Refresh (reload) a page once using jQuery?

84
votes

I'm wondering how to refresh/reload a page (or even specific div) once(!) using jQuery?

Ideally in a way right after the DOM structure is available (cf. onload event) and not negatively affecting back button or bookmark functionality.

Please, note: replace() is not allowed due to third-party restrictions.

14
jqueryrefreshreload
I am missing something in your question. What do you mean by "refresh" the page. If the page has loaded, reloading immediately would just load the exact same content, right? What are you trying to accomplish? – Doug Neiner
I'm working on a template which comes up "normally" first but is forced into an iFrame when refreshed/reloaded. Now I want the page to display in that iFrame on its first "call" as well. TIA! – Pete
I think you should read this article mycodingtricks.com/snippets/javascript/… – Shubham Kumar

14 Answers

82
votes

Alright, I think I got what you're asking for. Try this

if(window.top==window) {
    // You're not in a frame, so you reload the site.
    window.setTimeout('location.reload()', 3000); //Reloads after three seconds
}
else {
    //You're inside a frame, so you stop reloading.
}

If it is once, then just do

$('#div-id').triggerevent(function(){
    $('#div-id').html(newContent);
});

If it is periodically

function updateDiv(){
    //Get new content through Ajax
    ...
    $('#div-id').html(newContent);
}

setInterval(updateDiv, 5000); // That's five seconds

So, every five seconds the div #div-id content will refresh. Better than refreshing the whole page.

66
votes

To reload, you can try this:

window.location.reload(true);
40
votes
window.location.href=window.location.href;
5
votes

Use this:

    <script type="text/javascript">
        $(document).ready(function(){

            // Check if the current URL contains '#'
            if(document.URL.indexOf("#")==-1)
            {
                // Set the URL to whatever it was plus "#".
                url = document.URL+"#";
                location = "#";

                //Reload the page
                 location.reload(true);
            }
        });
    </script>

Due to the if condition, the page will reload only once.

4
votes
$('#div-id').click(function(){

   location.reload();
        });

This is the correct syntax.

$('#div-id').html(newContent); //This doesnt work
3
votes

You don't have a jQuery refresh function, because this is JavaScript basics.

Try this:

<body onload="if (location.href.indexOf('reload')==-1) location.replace(location.href+'?reload');">
2
votes

Use:

<html>
    <head>
        <title>Reload (Refresh) Page Using Jquery</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#reload').click(function() {
                    window.location.reload();
                });
            });
        </script>
    </head>
    <body>
        <button id="reload" >Reload (Refresh) Page Using</button>
    </body>
</html>
1
votes

Add this to the top of your file and the site will refresh every 30 seconds.

<script type="text/javascript">
    window.onload = Refresh;

    function Refresh() {
        setTimeout("refreshPage();", 30000);
    }
    function refreshPage() {
        window.location = location.href;
    }
</script>

Another one is: Add in the head tag

<meta http-equiv="refresh" content="30">
1
votes
 - location = location
 - location = location.href
 - location = window.location
 - location = self.location
 - location = window.location.href
 - location = self.location.href
 - location = location['href']
 - location = window['location']
 - location = window['location'].href
 - location = window['location']['href']

You don't need jQuery for this. You can do it with JavaScript.

0
votes

Use this instead

function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
}

<a href="javascript:timedRefresh(2000)">image</a>
0
votes

Try this code:

$('#iframe').attr('src', $('#iframe').attr('src'));
0
votes

Try this:

<input type="button" value="Reload" onClick="history.go(0)">
0
votes

For refreshing page with javascript, you can simply use:

location.reload();
0
votes

You may need to use this reference along with location.reload() check this, it will work.

this.location.reload();