JQuery Reload div data Only

Question

I am new to JQuery and facing an issue while refreshing div using following script

 < script > $(document).ready( function() { setInterval(function() { $("#dbq").load("dbqtest.php"); }, 10000); //Delay here = 10 sec }); </script>

 <?php echo '<section class="col-lg-6" id="dbq">'; echo '<p>My Section </p>'; echo '</section>'; ?>

The section i am trying to refresh is declared as below

The problem i am facing is that whenever the page loads for the first time, table from "dbqtest.php" is not visible for 1st 10 seconds. and My section stays there even after loading data from "dbqtest.php"

Answer 1

You need a wrapper for reloading section . Somthing like this must work:

<script>
 $(document).ready(
 function() {
  setInterval(function() {
   $("#dbq-wrapper").load("dbqtest.php");
  }, 10000); //Delay here = 10 sec
 });
</script>

And the HTML:

<div id="dbq-wrapper">
 <section class="col-lg-6" id="dbq">
  <p>My Section </p>
 </section>
</div>

Hoever you can use div inside section and reload data to that and use section as parent, anyway you need wrapper.

---

As you want to the first time load without delay, the solution is somthing like this:

< script >
    function dbqLoader {
        $("#dbq").load("dbqtest.php");
    }

    $(document).ready(function() {
            dbqLoader(); // for first time.
            function() {
                setInterval(function() {dbqLoader();}, 10000); // Loop with Delay
            });  
    });
</script>

Answer 2

This has to be it:

<script>
    $(document).ready(function() {
        $("#dbq").load("dbqtest.php");
        setInterval(function() {
               $("#dbq").load("dbqtest.php");
        }, 10000); 
    });
</script>

It's very similar to M.Abooali's answer but I've fixed some issues and minimised it.