Reload page after message is shown, jQuery

Question

Right now I have a form where user enters the info. It is than processed bu jQuery ajax function and is set to return false; so no page reload happens after user submits a form. Although I need to reload page, but if I remove return false; it refreshes page before success message is shown (this message is shown after user submits data).

     $.ajax({
      type: "POST",
      url: "scripts/process.php",
      data: dataString,
      success: function() {
       $("#st_message").html("<p> Your article was successfully added!</p>");
       //I need to reload page after the above message is shown
      }
     });
    return false;

So how can I reload page after the <p> Your article was successfully added!</p> message is shown, with a slight delay say 2 - 3 seconds, so user can actually read the message.

Rion Williams · Accepted Answer · 2017-02-24T22:00:58.880

37

You could add a delay by using the setTimeout() function, such as:

// This will reload the page after a delay of 3 seconds
window.setTimeout(function(){location.reload()},3000)

For your needs:

$.ajax({
      type: "POST",
      url: "scripts/process.php",
      data: dataString,
      success: function() {
           $("#st_message").html("<p> Your article was successfully added!</p>");
           window.setTimeout(function(){location.reload()},3000)
      }
});
return false;

Working Example

edited Feb 24 '17 at 22:00

answered Dec 06 '11 at 18:39

Rion Williams

74,820
37
200
327

for some reason it doesn't work, could it be because of return false? – Ilja Dec 06 '11 at 18:49

score 4 · Answer 2 · answered Dec 06 '11 at 18:38

Do it with something like:

function delayedRedirect(){
    window.location = "/index.php"
}

setTimeout('delayedRedirect()', 3000)

setTimeout is used to delay the redirect function call, in this case you can redirect somewhere to a new URL (just in case you need that too).

Otherwise use location.reload() to reload page.

score 3 · Answer 3 · answered Dec 06 '11 at 18:42

3

Use the setTimeout method to get the delay, and the reload method to reload the page. Note the true parameter in the reload call to ensure that the page is actually reloaded, and not just repainted from the cache.

window.setTimeout(
  function(){
    location.reload(true)
  },
  3000
);

answered Dec 06 '11 at 18:42

Guffa

687,336
108
737
1,005

for some reason it doesn't work, could it be because of return false? – Ilja Dec 06 '11 at 18:48
No, that could only be a problem if you tried to reload the page immediately. Also, changing the order of the code as you noted in another comment would not make any difference. Perhaps a typo? – Guffa Dec 06 '11 at 19:21

score 2 · Answer 4 · answered Jan 25 '13 at 12:29

2

Using timeout is a really bad idea.

answered Jan 25 '13 at 12:29

chuckfinley

2,577
10
32
42

score 2 · Answer 5 · answered Dec 06 '11 at 18:38

2

Do you mean something like : window.location.reload() in JavaScript

answered Dec 06 '11 at 18:38

David Laberge

15,435
14
53
83

for some reason it doesn't work, could it be because of return false? – Ilja Dec 06 '11 at 18:49

score 2 · Answer 6 · answered Dec 06 '11 at 18:38

2

give it using

setTimeout("window.location='yourpage.php'",3000);

in your code :

 $.ajax({
       type: "POST",
       url: "scripts/process.php",
       data: dataString,
       success: function() {
        $("#st_message").html("<p> Your article was successfully added!</p>");
        setTimeout("window.location='yourpage.php'",3000);//reload after 3 sec.
       }
      });
 return false;

answered Dec 06 '11 at 18:38

Mithun Satheesh

27,240
14
77
101

for some reason it doesn't work, could it be because of return false? – Ilja Dec 06 '11 at 18:48
for some reason I needed to add it before $("#st_message").htm... and it now works thank you ))) – Ilja Dec 06 '11 at 18:53

score 1 · Answer 7 · answered Sep 01 '12 at 08:45

1

<script type="text/javascript">
 //
 //your action here
 //
 window.setTimeout(function(){self.parent.location="?list"},3000);//after 3 sec go to (?list or example.html page)
 return false;
</script>

answered Sep 01 '12 at 08:45

Maher

2,517
1
19
32

jlrvpuma · Answer 8 · 2011-12-06T18:49:04.320

1

 $.ajax({
  type: "POST",
  url: "scripts/process.php",
  data: dataString,
  success: function() {
  var miliseconds = 2000;

   $("#st_message").html("<p> Your article was successfully added!</p>");
   setTimeout("window.location=window.location", miliseconds);
   //I need to reload page after the above message is shown
  }
 });

edited Dec 06 '11 at 18:49

answered Dec 06 '11 at 18:43

jlrvpuma

271
2
9

score 0 · Answer 9 · answered May 10 '20 at 09:40

exemple :

success: function(data){
            $("#loading-img").css("display","none");
                 swal({
                  title: "Félécitations",
                  text: "Votre demande a été transmise au service concerné",
                  icon: "success",
                  button: "OK",
                });
            window.setTimeout(function(){location.reload(true)},3000)
            }
            
            });
            return false;
            }

Reload page after message is shown, jQuery

9 Answers9