Reload DIV from page, without changing pages

Question

I want to reload only the DIV from my page every 5 to 10 seconds because that's the time that the data will enter, I don`t want to reload the FULL page, just the DIV.

This is what I tried, but for some reason it messes up all my page format:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
      <script type="text/javascript">
      var auto_refresh = setInterval(
      function () {
          $('#blocoCorrente').load('#blocoCorrente');
      }, 1000);
      </script>
      </p>

This is one part of my DIV:

 <div class="blocoCorrente" id = "blocoCorrente">
      <!-- Imprimir os valore dos sensor 1 -->
      <p class="p0-blocoCorrente">Corrente 1:
      <?php 
        $id = $_SESSION['userId']; 

        $dBname = "infosensor";
        $conn = mysqli_connect($servername, $dBUsername, $dBPassword, $dBname);

        $sql = "SELECT * FROM `$id` ORDER BY id DESC LIMIT 1;";
        $result = mysqli_query($conn, $sql);
        $resultCheck = mysqli_num_rows($result);

        if($resultCheck > 0)
        {
          while ($row = mysqli_fetch_assoc($result))
          {
            //echo "".$row['sensor1']."A";
            $ss1 = intval($row['sensor1'] * ($p = pow(10, 2))) / $p;
            echo "".$ss1."A";
            $s1 = $row['sensor1'];
          }
        }
      ?>
      </p>

You are using .load() correctly. Please look at the docs here. https://api.jquery.com/load/ — blupointmedia, Oct 30 '19 at 20:33
You need to have your query in a different page and return the results of the query and load that page in .load() of jquery to dom element. — blupointmedia, Oct 30 '19 at 20:33
You have to load the content from another page for the data to be refreshed. There isn't a way to refresh it on the page once it is on the page. — blupointmedia, Oct 30 '19 at 20:40

score 2 · Answer 1 · answered Oct 30 '19 at 20:38

2

.load() needs a URL to make its AJAX request to get the data. The additional selector is optional for filtering out information from the response. Something like this:

$('#blocoCorrente').load('yourPage.php #blocoCorrente');

Your testing can confirm this, but I suspect it may need to be taken a step further. I would suspect that this would place a new #blocoCorrente element as a child of the existing #blocoCorrente element, creating an ever-growing hierarchy of duplicated IDs.

If that turns out to be the case, as a quick fix you might simply wrap the #blocoCorrente element and use that wrapped one as your target. Something like this:

<div id="blocoCorrente-container">
    <div id="blocoCorrente">
        ...
    </div>
</div>

Then in your JavaScript:

$('#blocoCorrente-container').load('yourPage.php #blocoCorrente');

It's worth noting that the entire page is processed and returned, making this fairly inefficient. For something that's going to be executed repeatedly like this, you may want to make it more efficient and only request/return the updated data.

As a next step, consider making a separate page which returns just the data you need to build the markup, ideally in JSON format. Then use jQuery's $.get() to make an AJAX request to get just that data, and have JavaScript code in the callback which uses that data to modify the already existing page markup.

Further steps to improve design and efficiency could be to investigate the use of a technology called WebSockets, in which the server actively pushes updated information to the browser only when the data is updated. This would drastically reduce the number of HTTP requests being made.

answered Oct 30 '19 at 20:38

David

208,112
36
198
279

It is because I'm not an expert neither a beginner in JQuery, I was just looking up a method to make this update, every time the data comes to the server. So there are WebSockets that could make it easier to do this? Could you list any of them plz. – Nilton Sf Oct 30 '19 at 20:44
@NiltonSf: A Google search for something like "php websocket example" would be the ideal place to get started. One such example could be: https://stackoverflow.com/questions/14512182/how-to-create-websockets-server-in-php – David Oct 30 '19 at 20:46
Do you know if there is any other simpler way to load only this info? – Nilton Sf Oct 30 '19 at 20:51
@NiltonSf: Essentially you either poll for updates at regular intervals (your current approach) or use web sockets to push data to the browser. And in both cases you can either return everything again (your current approach) or just the specific data to be updated. You can certainly stick with the current approach if it works for you and no performance problem is noticed. But if performance becomes an issue then these are next steps to take. – David Oct 30 '19 at 20:56
Hmm, Ok I get it now. If I was going to make a load.php file to add to .load I would have to put the PHP code for sending data?, I this case, inside the load.php I would have to put the code mentioned in 'This is one part of my DIV:'? – Nilton Sf Oct 30 '19 at 21:04
@NiltonSf: Ideally the only information returned would be just the data itself, likely in JSON format, rather than all of the HTML markup surrounding that data. The markup is already on the page, so there's no real need to transfer it over the network again. The client-side code would use the returned data to update the existing markup, rather than a wholesale replacement of all the markup for newly returned markup. This is likely going to involve simply more learning and practice on your part, it's not critical but rather a performance improvement step. – David Oct 30 '19 at 21:28
@NiltonSf: Check the resulting HTML in your browser’s debugging tools. You may have altered the markup, which can change the layout. – David Oct 30 '19 at 22:06
Hey, I just made a separate file as you told. But I have a question, for all my 3 Infos I will have to create 3 different files? – Nilton Sf Oct 30 '19 at 22:50

Reload DIV from page, without changing pages

1 Answers1