Refresh (reload) a page once using jQuery?

Question

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.

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, Apr 01 '10 at 00:50
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, Apr 01 '10 at 01:02
I think you should read this article http://mycodingtricks.com/snippets/javascript/refresh-page-using-jquery/ — Shubham Kumar, Jul 07 '16 at 14:08

score 83 · Accepted Answer · edited Nov 29 '14 at 06:03

83

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.

edited Nov 29 '14 at 06:03

Peter Mortensen

30,738
21
105
131

answered Apr 01 '10 at 00:56

Ben

16,275
9
45
63

Thanks but I want the page to refresh/reload only ONCE (per browser session if possible)...? – Pete Apr 01 '10 at 01:05
What's the trigger for reloading? a certain event or just time? – Ben Apr 01 '10 at 01:05
trigger: the first "call" of the page (sorry, my english is kinda poor *g*) – Pete Apr 01 '10 at 01:09
omfgroflmao, you're a genius! The "edited" version is exactly what I was looking for (the whole day btw...). Is it possible to add an optional time trigger here? So that location.reload is executed - let's say - after 3 seconds...? TIA (YOU've really made my day!) – Pete Apr 01 '10 at 01:55
Yeah, sure, just change location.reload() with window.setTimeout('location.reload()', 3000); – Ben Apr 01 '10 at 02:01
Great! So, this is how it should work with the time trigger (for IE7 only), right? BTW: Any chance to realize this with scripting turned off (as a backup)? – Pete Apr 01 '10 at 02:10
Yes and no, you need JS to do this. – Ben Apr 01 '10 at 02:20
OK, then I'll advise my customers via – Pete Apr 01 '10 at 02:30

score 67 · Answer 2 · edited Nov 29 '14 at 06:05

67

To reload, you can try this:

window.location.reload(true);

edited Nov 29 '14 at 06:05

Peter Mortensen

30,738
21
105
131

answered Jun 03 '11 at 08:14

Milli

1,351
15
19

1

can you explain the bool argument? – tomfumb Nov 14 '11 at 19:27
7

The argument to the location.reload function determines if the browser should retrieve the document from the web-server. If needed to pull the document from the web-server again (such as where the document contents change dynamically) pass the argument as 'true' http://grizzlyweb.com/webmaster/javascripts/refresh.asp – Squirrel5853 Dec 29 '11 at 15:43

score 40 · Answer 3 · answered Apr 01 '10 at 00:53

40

window.location.href=window.location.href;

answered Apr 01 '10 at 00:53

Maz

3,375
1
22
27

bad rep this, jQuery asked HTML given. -1 – Stefano Groenland Jan 07 '16 at 08:21
This will not work if URL have hash like: http://mycodingtricks.com/#cool – Shubham Kumar Jul 07 '16 at 13:53

score 5 · Answer 4 · edited Nov 29 '14 at 06:08

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.

score 4 · Answer 5 · edited Feb 17 '12 at 11:54

4

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

   location.reload();
        });

This is the correct syntax.

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

edited Feb 17 '12 at 11:54

Flexo

87,323
22
191
272

answered Feb 17 '12 at 11:05

swapnil

41
1

score 3 · Answer 6 · edited Nov 29 '14 at 06:06

3

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

edited Nov 29 '14 at 06:06

Peter Mortensen

30,738
21
105
131

answered Jan 22 '12 at 17:16

Adrian P.

5,060
2
46
47

Nice one. you can even put it inside a function: and function init(){ if (location.href.indexOf('reload')==-1) location.replace(location.href+'&reload');} – Adrian P. Feb 09 '12 at 23:40

score 2 · Answer 7 · edited Sep 26 '17 at 08:49

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>

score 1 · Answer 8 · answered May 13 '14 at 12:39

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">

score 1 · Answer 9 · answered Sep 30 '15 at 01:11

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

score 0 · Answer 10 · edited Nov 29 '14 at 06:06

0

Try this code:

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

edited Nov 29 '14 at 06:06

Peter Mortensen

30,738
21
105
131

answered Oct 13 '12 at 17:12

Koss

1,012
11
8

score 0 · Answer 11 · edited Dec 17 '12 at 06:16

0

Use this instead

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

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

edited Dec 17 '12 at 06:16

cereallarceny

4,913
4
39
74

answered Dec 17 '12 at 05:53

arunav

1

score 0 · Answer 12 · edited Nov 29 '14 at 07:26

0

For refreshing page with javascript, you can simply use:

location.reload();

edited Nov 29 '14 at 07:26

Ariona Rian

9,153
3
24
36

answered May 17 '13 at 01:25

Felipe Leão

915
2
15
27

score 0 · Answer 13 · edited Nov 29 '14 at 06:11

0

Try this:

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

edited Nov 29 '14 at 06:11

Peter Mortensen

30,738
21
105
131

answered Oct 14 '13 at 05:55

user1016195

153
3
5
14

score 0 · Answer 14 · edited Jan 25 '18 at 11:35

0

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

this.location.reload();

edited Jan 25 '18 at 11:35

cch

3,336
8
33
61

answered May 15 '17 at 13:12

Tino Jose Thannippara

644
12
20

Refresh (reload) a page once using jQuery?

14 Answers14

Linked