load in css and jquery

Question

load in css and jquery

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I'm trying to make a load system to inform the user that the page is loading.

I have a page in php that mounts a very large report, and it takes around 10 seconds to be displayed. As long as the page is blank. What I want is to put a load until the page loads.

I tried to do so, at the beginning of php I put this:

<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>

I placed before the tag

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: url(../Img/Loading.gif) center no-repeat #FFFFFF;
}
.se-pre-con p {
    text-align: center;
    height: 15px;
    position: absolute;
    top: 0;
    bottom: -125px;
    left: 0;
    right: 0;
    margin: auto;
}

The no jquery is like this:

$(window).on("load", function () {
    $(".se-pre-con").fadeOut();
});

The problem is that the load up appears, but it appears after about 5 seconds. How do I get it to appear and then the php start loading the data? How?

------------ EDIT

Follow my page in php, so you can tell me if I'm doing something wrong.

<!-- Loading -->
<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>

<?php
// AQUI ESTOU CONECTANDO COM O BANCO DE DADOS E MONTANDO UM ARRAY COM O RESULTADO
?>


<!-- Relatório -->
<table class="relatorio">

    <tr>
        <td>ID</td>
        <td>PRODUTO</td>
        <td>QUANTIDADE</td>
        <td>VALOR</td>
    </tr>


    <?php
    // Aqui monto o relatório com o array
    foreach ($curva as $c) {
        ?>
        <tr>
            <td><?= $c['id'] ?></td>
            <td><?= $c['nome'] ?></td>
            <td><?= $c['qtd'] ?></td>
            <td><?= $c['valor'] ?></td>
        </tr>
        <?php
    }
    ?>
</table>

php javascript jquery css

asked by anonymous 07.03.2017 / 20:22

2 answers

1

Your problem is that PHP is still sending the response to the browser, so the page has not yet finished loading.

A more interesting strategy is to open your empty report, show div load, and then load PHP data using an AJAX call.

A very simple example would be:

$(document).ready(function(){
  $(".se-pre-con").fadeIn();
  $.ajax({
    url: 'meu php',
    success: function(response) {
      /* Monte aqui o seu HTML */
      /* Ao final, remova a div novamente: */
      $(".se-pre-con").fadeOut();
    }, 
    error: function(error) {
      /* Trate os erros */
    }
  });
});

07.03.2017 / 20:29

How to leave a div with the same operation as a radio button? How to sort an array with php

score 3 · Accepted Answer

It's best for you to make a page that loads only the div:

<!-- Loading -->
<div class="se-pre-con"><p>PROCESSANDO DADOS</p></div>

And another page that loads only the content of the report

<tr>
    <td>ID</td>
    <td>PRODUTO</td>
    <td>QUANTIDADE</td>
    <td>VALOR</td>
</tr>


<?php
// Aqui monto o relatório com o array
foreach ($curva as $c) {
    ?>
    <tr>
        <td><?= $c['id'] ?></td>
        <td><?= $c['nome'] ?></td>
        <td><?= $c['qtd'] ?></td>
        <td><?= $c['valor'] ?></td>
    </tr>
    <?php
}
?>

That would look like this:

link - > Respond only to div

link - > It responds to the body of the report.

And with ajax you load the content:

$.ajax({
    'url': 'http://www.meusite.com.br/relatorio-corpo',
    'success': function(responseHtml) {
         $(".se-pre-con").html(responseHtml);
     }
 });

----- EDIT

Remembering that this is not the best approach, since you will be traveling HTML data across the network. The best would be to answer the data in JSON and assemble the HTML using Javascript