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.76miles.com/'/>";

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

65 Comments How to refresh DIV using jquery

  1. Pingback: Design Gala

  2. Pingback: WordPress Rocker

  3. Pingback: Topsy.com

  4. Pingback: Naveen Lagadapati

  5. Pingback: rabi

  6. Matias Lecaros

    Dude, you’ve just given me the perfecto solution for what I wanted to do, :D.

    Greetings from Chile

    :D

    Reply
  7. chipowski

    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.

    Reply
  8. chipowski

    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

    Reply
    1. usmcguy

      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.

      Reply
  9. Pingback: SWAROVSKI CRYSTAL USB STICKS WWW.NKBLING.CO.UK | branded usb sticks

  10. boris

    with small modification this was exactly what i needed!
    just to refresh the div when another action not every 20 seconds.

    Perfect good job!

    Reply
  11. Peter

    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.

    Reply
  12. Pingback: Auto reload - XHTMLforum

  13. Pingback: problemino con refresh - AlterVista | Spazio web gratis, hosting free php mysql

  14. Pingback: webdew.hu

  15. Pingback: Bob Belderbos

  16. lusozim

    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?

    Reply
  17. Pingback: junichi_y

  18. Pingback: javascript

  19. DavidB

    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?

    Reply
    1. Baggins

      Add this to into de fuction:

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

      This worked to me…

      Reply
      1. Ruxandra

        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

        Reply
  20. JD

    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

    Reply
  21. Precise

    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.

    Reply
  22. ole

    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

    Reply
  23. Manoj

    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

    Reply
  24. DavidB

    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.

    Reply
  25. srijib

    I want to inject a from the reload.php into the of current page rather than the complete page. i do i do that

    Reply
  26. RJ

    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!

    Reply
  27. taeiljun

    here is the solution.

    bla, bla, bla

    bla, bla, bla // same tags div1

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

    Reply
  28. Vikas

    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);

    Reply
  29. vinod

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

    Reply
    1. Web master

      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

      Reply
  30. Ervin

    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

    Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>