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

32 comments:

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

    ReplyDelete
  2. Great post Dude thanks a lot.

    ReplyDelete
  3. 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..

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

    ReplyDelete
  5. @Rezaul

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

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

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

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

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

    ReplyDelete
  8. Thanks. Needed it for ajax login too ;)

    ReplyDelete
  9. You rock!, saved my day :)

    ReplyDelete
  10. 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.

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

    ReplyDelete
  12. Saved my day :)

    While searching found something similar..

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

    Thanks,
    Rajesh

    ReplyDelete
  13. Great post Dude thanks a lot.

    ReplyDelete
  14. 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

    ReplyDelete
  15. 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

    ReplyDelete
  16. Great post Dude, thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

    ReplyDelete
  18. 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!

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

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

    ReplyDelete
  21. 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!

    ReplyDelete
  22. 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!

    ReplyDelete
  23. Thanks! You really help me :P

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

    ReplyDelete
  25. 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

    ReplyDelete
  26. 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'.

    ReplyDelete
  27. 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

    ReplyDelete
  28. is there any method in php which work like update panel control in asp.net

    ReplyDelete
  29. Hi team,
    I have one reqerment
    am developing one online exam quiz application , when i answering questions (like I am answered 2 two questions) at this time am refresed the page that time no page will not to home, even i refreshes exam is contine ..


    explaination :
    If User refreshes a current running session of any Assessment , then system should bring User back to the same point in Exam UI where he/she was and save all the assessment details till that point.
    (Example If User is at 4th question of a lesson, has answered 3 out 10 questions then if User refreshes the browser assessment , System should bring User to the Fourth question and save details of the previous three answered questions)

    ReplyDelete