How to refresh DIV using jquery

ref
jQuery; magic in web programming, have allowed us to use different features with the simple knowledge to use them. I was searching for basic code to refresh the specific DIV using jquery and found this article and like to share with my viewers.

There are very simple steps to achieve this:
Step 1:
Copy the following code and paste it in the head section of your webpage.

<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script> 
 <script> 
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>

Here, above the file “reload.php” will be reloaded in every 20000ms i.e 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly, the #loaddiv is the name of DIV which is going to be refreshed.

Step 2:
and now you need to put the div in the body section of your page

<div id="loaddiv"> 
</div>

Step 3:
Now finally you need to write the code for the file “reload.php” which will extract the contends from the other page or it also may contain the code to read the data from the database depending upon requirement.
here i am going to read a small content from another site. you can copy , paste the code and save it as the filename “reload.php”. in the same folder that contains the source code.

echo"<img src='http://www.nepalstock.com/datanepse/realindex.php'/>";

Now your page is ready .
Click here to see the demo.

68 replys to How to refresh DIV using jquery

  1. Pingback: Design Gala
  2. Pingback: WordPress Rocker
  3. Pingback: Topsy.com
  4. Pingback: rabi
  5. Dude, you’ve just given me the perfecto solution for what I wanted to do, :D.

    Greetings from Chile

    :D

  6. thanks exactly what i’ve been looking for.

    can you tell me how it would be modified to load the php straight away. i want my div to be a database refresh so would like the data to be displayed as soon as the page loads up initially.

  7. ignore my last post, just figured it out.
    i just put a require statement in the div to load the php file initially and then when the reload happens the contents are overwritten.

    absolutely perfect now.
    thanks very much for code

    1. chipowski, what exactly did you have to add to make the page load immediately? You said you added a require, but I’m not sure what you meant. Sorry, I know this is an old post.

  8. Great tutorial. Thanks.

    Does anyone know how to refresh the div only once. I have a webform which I want to insert into my mysql DB, and then update the div automatically to show the just inserted comment. Or even better refresh if it detects a new comment in the DB.

  9. Pingback: webdew.hu
  10. Pingback: Bob Belderbos
  11. Hi, I know this thread is old but I thought I’d try my luck anyway. This code was precisely what I needed with one small drawback- it does not work in IE. It does of course work in safari, firefox and chrome in os x and windows. My php script outputs the name of an randomly selected image which is then displayed [via echo]. As I said this works perfectly except for in IE.
    Has anyone else had this problem and found a solution?

  12. Pingback: junichi_y
  13. Pingback: javascript
  14. This workd fine in FF and Chrome. However in IE8 it does the first refresh to load the php file then, although it does further refreshes (the content fades in and out), the data stays the same. I looks like IE8 is cacheing the processed php file served from the server. Even a manual page refresh does not work – you have to close and reopen the page to get the new data. (My php file displays data from a text file on the server which is uodated every minute by FTP.)

    Any suggestions?

    1. Add this to into de fuction:

      $.ajaxSetup ({
      // Disable caching of AJAX responses
      cache: false
      });

      This worked to me…

      1. Hi, for me the fix does not work: it does not refresh the image i am reading, even though it fades in and out. on manual refresh it does change the image from the server, but with the function the image stays the same.

        many thanks for any feedback

  15. Wish I could say it was helpful, but for the program i’m working on, it doesn’t work
    for some reason none of the tabs or buttons reload as tabas or buttons
    it loads the content, and javascript runs (as is visible by console.log)
    but none of the jquery specific layout stuff seems to “rework” after it reloads

  16. Yes I agree with DavidB! IE just refresh one… Second time calling PHP file doesnt effect anything..! need to close it and open it again.

  17. thank you it solved my problem i found small error in your code

    $(‘#loaddiv’).fadeOut(‘slow’).load(‘reload.php’).fadeIn(“slow”);

    changed it to

    $(‘#loaddiv’).fadeOut(“slow”).load(‘reload.php’).fadeIn(“slow”);

    “slow”

    also i had to remove the
    echo”
    before it worked for me,
    and in the end
    “;

    im using other version
    jquery-1.5.1.min.js

    best regards ole

  18. Thank you very much for this code snippet for which i was searching for.This is actually very precise but functionality worth code.Thank u very much

  19. This works well. My query is about the syntax of the statement:

    $(‘#loaddiv’).fadeOut(‘slow’).load(‘reload.php’).fadeIn(“slow”);

    I haven’t seen this sort of sequential chaining of methods before but I am guessing it is equivalent to:

    $(‘#loaddiv’).fadeOut(‘slow’);
    $(‘#loaddiv’).load(‘reload.php’);
    $(‘#loaddiv’).fadeIn(‘slow’);

    I can’t find this syntax documented anywhere. Is it a Javascript or a JQuery syntax? In either case could anyone point me to some documentation that explains it. It isn’t explained in my Javascript manual.

  20. Nothing else seems to have worked for me except this jquery. Only one problem. It works fine with the example img link given, but I can’t get it to work with my station’s “Now Playing” and “Up Next” scripts. Please Help!

  21. here is the solution.

    bla, bla, bla

    bla, bla, bla // same tags div1

    ==================================
    $(‘#div1’).html( $(‘#div1copy’).html() );

  22. Great

    Complete code used by me (all credit to you and Baggins ……….for solution to ie

    $(document).ready(function(){
    $(‘#loaddiv’).show();
    $(‘#loaddiv’).load(‘reload.php’);
    });
    var auto_refresh = setInterval(
    function()
    {
    $.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
    });
    $(‘#loaddiv’).fadeOut(‘slow’).load(‘reload.php’).fadeIn(“slow”);
    }, 20000);

  23. Thank you very much. Keep doing the good work. This helps teachers like me in developing their own websites and tests. Thanks a ton!

    1. Because of same origin policy!!, meaning you cant use from external domains. without using a Proxy, JSONP or equivalent technique to get around this.

      If you want to load something like that Simple way is to use

  24. Hello!
    One question:
    How modify this script that will:
    – immediately when visiting the website show reload.php, not with a delay of 20 seconds
    – refresh 20sec

Leave a Reply

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