Jan
4

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.

62 Comments to “How to refresh DIV using jquery”

  • How to refresh DIV using jquery: Jquery , magic in web programming ,have allowed us to use different features with… http://bit.ly/8FIaAq

  • RT @designgala: How to refresh DIV using jquery http://bit.ly/6YpGWl #jQuery #tutorials

  • [...] This post was mentioned on Twitter by designgala, WordPress Rocker. WordPress Rocker said: RT @designgala: How to refresh DIV using jquery http://bit.ly/6YpGWl #jQuery #tutorials [...]

  • How to refresh DIV using #jquery http://ow.ly/SCmK #webdev #tech

  • RT @designgala: How to refresh DIV using jquery http://bit.ly/6YpGWl

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

    Greetings from Chile

    :D

  • Thanks… very use full

  • wow that was great!! thanks , this very useful!

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

  • 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

    • What was it you had to change to do this?

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

  • [...] How to refresh DIV using jquery [...]

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

    Perfect good job!

  • thanx, very cute

  • Thanks a lot…
    Really helpfull…
    Keep it up…

    • thanksss.. really good one

      • yes, thank

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

  • [...] [...]

  • How to refresh DIV using jquery : http://1r.hu/wv

  • Thanks, this is very useful for my project

  • Thanks buddy, because of u i started using jquery.. its quite easy to learn..

  • How to refresh DIV using #jquery http://t.co/W1Go8C7 #tips #ajax

  • the example does not work

    the div does not reload with the new information stored in the data base

  • 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?

  • Well Done.This is what required.

  • How to refresh DIV using jquery: http://bit.ly/faQYbq

  • How to refresh DIV using jquery: http://bit.ly/hLfohv

  • Thanks a lot for the code.. Worked perfectly..

  • thank you very very very very very very very very very very very very very very very very much

  • Hi,

    This post is very useful for me..thanks

  • 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?

    • Add this to into de fuction:

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

      This worked to me…

      • Thanks!!!!!!!!!!!!

      • 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

  • Thank you so much……….

  • Hi,

    Thank u for post.using this i got my solution

  • 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

  • good job.thanks a lot

  • Thanks alot for this! Very helpful and I was able to achieve the exact result I wanted :)

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

  • 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

  • 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

  • Thanks, this is a very good thing and it is working properly. But when this page is refresh i want this refreshing page get some dynamic value from master page. How it will get data ?

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

  • good thing i found this.
    I can use in my website actually 2 websites :)

  • thanks…
    and how if i have different 2 pages
    sample : reload.php and reload_2.php
    and show must be loop

  • Great Work Boss…….
    Lay Bhari….!!!

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

  • 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!

  • here is the solution.

    bla, bla, bla

    bla, bla, bla // same tags div1

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

  • why we should use that reload.php file. is it must?

  • Could you please send insert Data version with ajax and php

  • I’ve been hunting for this for some time. Thanks for posting. Great job!

  • This is what I needed. Thanks for sharing. More power

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

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

  • thanks a lot its very usefull

  • i change $(‘#loaddiv’).load(‘reload.php’) –> load(“http://www.google.com”) but it doesn’t work. Why ?

  • Thank you vary Much

Leave a comment

ThemeForest
Recommend on Google

Sign up for our mailing list.