jQuery Auto Load and Refresh Div on Ajax Call Without Reloading Page

In this tutorial, we will learn How to Refresh Div on Ajax Call Without Reloading page using jquery and ajax.We will refresh div every 5 or 10 seconds without refreshing page using jquery.You can refresh the div according to your convenience, but in this article, we will refresh div every 10 seconds on ajax call using jquery.

You may have noticed while using twitter that it show you notification of new tweets without refreshing page.

Refresh Div after every few second

In the above image you can see ” View 3 new Tweets “, it’s a example of Refreshing div on ajax call without reloading the page.

View Demo

Refreshing Div After Every 10 Seconds

Now, let’s come back to our topic.

We are using jquery to auto load data on ajax call every 10 seconds.

jQuery Code

function auto_load(){
        $.ajax({
          url: "data.php",
          cache: false,
          success: function(data){
             $("#auto_load_div").html(data);
          } 
        });
}

$(document).ready(function(){

auto_load(); //Call auto_load() function when DOM is Ready

});

//Refresh auto_load() function after 10000 milliseconds
setInterval(auto_load,10000);

In the Above Code We have created a function auto_load which load data.php page on ajax call without refreshing the page.

Then we have called the auto_load() function when the document is ready using jQuery.

[moptin id="3100"]

And then we called the auto_load function every 10 Seconds(10000 milliseconds) of interval.

HTML Code

<div id="auto_load_div"></div>

PHP Code

Now we are going to create some dynamic content in our php file which we are loading on ajax call.

In the data.php file we will generate random colors on every call.

<?php
//Generating Random Color
$r = mt_rand(0,255); //Generating a Random Number between 0 to 255
$g = mt_rand(0,255);
$b = mt_rand(0,255);

//Generating Random Height
$height = mt_rand(300,650); //
echo "
<div style='background:rgb({$r},{$g},{$b});height:{$height}px'></div>

";
?>

Full HTML Code

<!DOCUMENT>
<html lang="en">
 <head>

  <title>Auto Load and Refresh Div Every 10 seconds</title>


<style>
    #auto_load_div>div{width:100%;max-width:320px;}
  </style>

 </head>
 <body>


<div id="auto_load_div"></div>


   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script>
      function auto_load(){
        $.ajax({
          url: "data.php",
          cache: false,
          success: function(data){
             $("#auto_load_div").html(data);
          } 
        });
      }

      $(document).ready(function(){

        auto_load(); //Call auto_load() function when DOM is Ready

      });

      //Refresh auto_load() function after 10000 milliseconds
      setInterval(auto_load,10000);
   </script>
 </body>
</html>

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

9 Responses

  1. Jake says:

    Hi there guys. This is great but I’m struggling to implement this method on my WordPress site.

    How would I go about refreshing only the widgets on a WordPress site?

    I have a widget that is dynamically altered by the user but needs a complete page refresh to display the changes. This looks promising but I need some help if possible?

    Cheers

    P.s awesome article though 🙂

  2. I am sure this would have been a nice tutorial to read, but the two popup windows that wont go away no matter how hard i try. After closing the second popup, the scroll bar to the right disappears. 🙁

  3. ritesh says:

    how can we change that from auto load to clickable??

  4. Axel says:

    If you use on your webspace SSL (TLS) use this //code.jquery.com/jquery-latest.min.js because some browser blocks external scripts if the connection is mixed (http and https) or save the script and load it in the same directory of your code.

  5. alex says:

    with this can I update the div from another server?
    For example, data.php is on 192.168.0.10 and my web server with the div to refresh is on 192.168.0.20?

Leave a Reply

Your email address will not be published. Required fields are marked *

shares