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>

Answer 1

.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.