How to Refresh/Reload a Page using jQuery




I have seen this question asked in many forums, however the solution presented worked on selected browsers only. Here’s a solution I have tested that works on IE7, FireFox 3 and Chrome. Hopefully it should work on other browser versions as well!

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Reload/Refresh a Page in jQuery</title>
<
script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</
script>

<
script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {
location.reload();
});
});
</script>
</
head>
<
body>
<
input id="Button1" type="button" value="button" />
</
body>
</
html>


Drop a comment if this script does not work in any browser version.

Check plenty of other jQuery Tips here



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

30 Responses to "How to Refresh/Reload a Page using jQuery"
  1. dodol said...
    October 29, 2009 at 6:58 AM

    if we must reload the page using a button, it's just the same like using the F5 key :D however, nice tuts :D

  2. Anonymous said...
    February 1, 2010 at 8:43 AM

    Great post Dude thanks a lot.

  3. Lady said...
    March 4, 2010 at 11:25 PM

    Wow thanks! .. I was wondering how to reload the page after having logged the user via ajax, to give him access to admin links!

    location.reload() did exactly what i wanted..

  4. Wazdesign said...
    May 7, 2010 at 3:02 AM

    thanks a lot its works cool

  5. Rezaul said...
    October 3, 2010 at 12:27 PM

    Is there any way to reload the page automatically after 30 sec or 1 min using the above code?

  6. Stoffel said...
    October 15, 2010 at 2:56 AM

    @Rezaul

    Yes:
    function Refresh() {
    location.reload();
    };

    $(document).ready(function() {
    setTimeout("Refresh()", 30000); //30 sec.
    });

  7. Anonymous said...
    December 22, 2010 at 6:57 AM

    Or just use the metatags and put this in your head section:

    <meta http-equiv="refresh" content="30000">

  8. Anonymous said...
    December 28, 2010 at 9:38 AM

    but what if i want to reload only when the page has failed to load? how to detect this..?

  9. Prajosh said...
    February 4, 2011 at 4:02 AM

    Great one :)

  10. Anonymous said...
    March 8, 2011 at 12:24 AM

    Thanks. Needed it for ajax login too ;)

  11. Anonymous said...
    May 5, 2011 at 10:54 AM

    You rock!, saved my day :)

  12. Anonymous said...
    May 24, 2011 at 6:29 AM

    What do you mean by 'failed to load'?

    If you are loading stuff via AJAX, you can put reload() in the error handler:

    $.ajax({
    url:'example.com',
    error: function(xhr, textStatus, errorThrown){
    location.reload();
    }
    });

    At least the script needs to be correctly loaded in order to do what you want.

  13. Anonymous said...
    August 10, 2011 at 9:08 PM

    Nice Post Bro ... Keep it cool ... ty.

  14. Anonymous said...
    August 29, 2011 at 10:26 PM

    Saved my day :)

    While searching found something similar..

    http://jquerybyexample.blogspot.com/2011/08/different-ways-to-refresh-or-reload.html

    Thanks,
    Rajesh

  15. shiva said...
    August 30, 2011 at 6:34 AM

    Great post Dude thanks a lot.

  16. Anonymous said...
    September 26, 2011 at 5:17 PM

    Hi guys I tried with jquery to add a function to the media dialog close button. His ID is #TB_closeWindowButton and I just added this to the my-scripts.js file

    jQuery('#TB_closeWindowButton').click(function() {
    location.reload();
    });

    It doesn't work. Any Ideas???
    Raffaele COlleo

  17. Anonymous said...
    September 27, 2011 at 10:32 PM

    Sorry forgot to say that I am using wordpress. The media dialog box is the dialog box where you can manage images.

    Sorry again
    Raffaele Colleo

  18. Anonymous said...
    November 15, 2011 at 6:50 AM

    Great post Dude, thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  19. Anonymous said...
    December 2, 2011 at 4:15 PM

    omg... 3 hours spend on searching this solution... thanks

  20. kimeraweb said...
    January 1, 2012 at 9:38 PM

    Hi, thank you for your website.

    Here goes my problem:

    One iframe (let's say A) calling a web jquery code (just alert command, let's say B) to be in diferent iframe.

    First time you click on A, it calls to B and working perfect. You click on A for another jquery script code for diferent iframe, it works perfect. You click it again for first choice, and B doesn't work, Jquery script is not read anymore, why? Page is loaded (unless shows up) but alert is not running anymore.

    So, in other words, when you call back a page from another, jquery is not running anymore.

    I try with reload with unsuccessfully.

    Thank you!

  21. Tutorial PHP Website said...
    May 28, 2012 at 8:45 PM

    Awesome!! Simple but works fine. Thank you for this tutorial! :D

  22. Chan said...
    May 29, 2012 at 7:39 PM

    Thank you!
    Is there a way to reload with parameter?
    Example: mypage.php?message=1

  23. Mike said...
    June 18, 2012 at 2:24 PM

    I think my question is the same, is it possible to set a variable with the function? So that the site knows that it has refreshed?

    This doesn't work:

    location.reload();

    window.imgShow=1;


    The variable window.imgShow is undefined after the reload. Not that I am surprised but is there a way to get it in? Thanks, I learn a lot from these posts!

  24. Mike said...
    June 18, 2012 at 4:04 PM

    Found it!

    http://forums.devshed.com/javascript-development-115/can-you-pass-variables-in-href-javascript-window-location-reload-379690.html

    +

    http://www.idealog.us/2006/06/javascript_to_p.html

    Thanks again!

  25. Anonymous said...
    October 23, 2012 at 3:34 PM

    Thanks! You really help me :P

  26. Anonymous said...
    January 11, 2013 at 2:01 PM

    Good post

  27. Anonymous said...
    March 11, 2013 at 1:33 AM

    if i want to load the same page again then also it is diverting to my next page.

  28. Anonymous said...
    April 19, 2013 at 5:48 AM

    I used more than 1 data grid on page when click on button for enter the data in grid my page is reloaded if i used update panel its also not working wht to do
    thanx in advance

  29. Samuel said...
    May 16, 2013 at 10:20 AM

    I must have missing some information but the title of the post say: How to reload a page using JQuery but the object 'location' is not from the JQuery API. Ok, you use JQuery to attach the click event of the button but in this case, the title should be 'How to link a button with JQuery that will reload a page with Javascript'.

  30. King Washington said...
    May 30, 2014 at 10:58 AM

    Thanks for your code, is a great one. But i have a problem implementing it in php. I have html and php as different files. Now i want to implement it in php. so that when the php checks for error, and if there is error, it should reload to the html file with form values retained.
    Thanks in advace

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions