Reload the page after ajax success

Question

I have some problems with redirecting/reloading after a successful ajax call. Here is the situation:

I have item for deletion saved in an array. When I click on a button it calls for PHP file via ajax, and after success I need to reload the page. But I have some problem doing this. I searched the internet and couldn't find a working solution.

I have PHP file which goes through the array deleting item by item from the database.

foreach($arrayVals as $key=>$val)
{
    //bla bla
}

Also, I have jQuery part:

$("#button").live("click",function(){
    $.ajax({
        url, data, type... not important
        success: function(html){
                    location.reload();
                }
    });
});

I mean, the code works, but not good. It does delete items, but not all of them and then it reloads the page. Like, if I have 10 items to delete, it deletes like 6-7, and 3-4 items stay undeleted.

It acts like it reloads the page too soon, like PHP file does not have enough time to process everything :D

Why do something with AJAX just to reload the page... Seems like poor UI. — Jason McCreary, Oct 24 '11 at 19:49
Your AJAX query (and why are you using one, anyway?) is fired once and then forgotten, so it's not reloading before the deletion is completed. Most likely you're either submitting an incomplete list of items to delete, or an inaccurate one, or your PHP is incorrectly written. We need more code in any case. — Blazemonger, Oct 24 '11 at 20:01
Jason: I tend to agree, but there ARE exceptions to every rule or guideline. ;-) Session expiry for example. I'm not sure this one fits into the exception category or not; not enough information to say. — Greg Pettit, Oct 25 '11 at 05:35
Jason, I understand that. Only reason why I wanted to use ajax call and then reload (and not only php reload after finish) is the design. If I am deleting images as items, I wanted it to look prettier, with loading bar and detaching image by image while deleting, and then reload after completion. :) — bosniamaj, Oct 25 '11 at 08:24
It works now :) I made some changes in my PHP file to work in a different way, and changed my jQuery to sth like this: $.ajax( { ... success:function(html){ $(".myDiv").replaceWith(html); } }); $(this).ajaxStop(function(){ window.location.reload(); }); Thanks for your effort :) — bosniamaj, Oct 25 '11 at 15:31
Disagree with @JasonMcCreary Although dynamically modify the page seems cool, sometimes we need to show the refreshing animation for the users to feel they actually have changed sth. — Toma, Aug 03 '22 at 02:46

score 66 · Accepted Answer · answered Oct 24 '11 at 20:01

66

BrixenDK is right.

.ajaxStop() callback executed when all ajax call completed. This is a best place to put your handler.

$(document).ajaxStop(function(){
    window.location.reload();
});

answered Oct 24 '11 at 20:01

Vikas Naranje

2,350
5
30
40

It works now, with some corrections to PHP and use of your ajaxStop suggestion, thanks :) – bosniamaj Oct 25 '11 at 15:32
1

@VikasNaranje, I want to know where should I add this code? Inside success function? – Naren Verma Mar 18 '20 at 07:40
It works well but the challenge is, it bypasses the success message in the ajax success function. – Masaba James Moses Apr 05 '20 at 07:12

score 13 · Answer 2 · answered Oct 24 '11 at 19:53

13

You use the ajaxStop to execute code when the ajax are completed:

$(document).ajaxStop(function(){
  setTimeout("window.location = 'otherpage.html'",100);
});

answered Oct 24 '11 at 19:53

brixenDK

341
2
7

score 8 · Answer 3 · edited May 23 '17 at 10:30

8

use this Reload page

success: function(data){
   if(data.success == true){ // if true (1)
      setTimeout(function(){// wait for 5 secs(2)
           location.reload(); // then reload the page.(3)
      }, 5000); 
   }
}

edited May 23 '17 at 10:30

Community

1
1

answered Oct 23 '16 at 09:48

Naveen Kumar

481
5
16

Reload in existing page isn't functioning – JWC May Jul 17 '19 at 08:17
why need to do `if (data.success == true)`? – Lucas Vazquez Nov 26 '19 at 14:05

score 0 · Answer 4 · answered Nov 29 '21 at 12:14

0

Using the ajaxSuccess to reload the page after ajax success.

$(document).ajaxSuccess(function(){
    window.location.reload();
});

answered Nov 29 '21 at 12:14

Maged Hamid

952
1
9
18

Reload the page after ajax success

4 Answers4

Linked

Related