Refresh the page that the user is on when clicked a button ajax

Question

I have a logout button displayed when the user logs in, now It is only on the homepage, I want to refresh the same page when the user clicks log out, I have created a function so that when logout is pressed it refreshes the same page as on refresh it logs user out, But it doesn't refresh when logout is click

function logout() {
    $("#logout").live("click",function(){
        $(document).ajaxStop(function(){
            window.location.reload();
        });
    });
};

Answer 1

Try something like;

function logout() {
  $("#logout").live("click",function(){
    $.ajax({  // do the ajax request
      url:"file.php",
      success:function(result){
        alert(result);//do something if you want or simply remove
        location.reload();
      }
    });
  });
};

Answer 2

I am confused why do you want to bind to ajaxstop within body of click handler, but if you just want to reload page on click of logout button, you can just use following:

function bindToLogoutClick() {
    $("#logout").on("click",function(e){
        e.preventDefault(); //Used to restrict page posting to server if logout is a submit button.
        window.location.reload();
        return false; //Used to restrict page posting to server if logout is a submit button.
    });
};

And off course somewhere you also have to call bindToLogoutClick() function to set the binding to button's click event like right on DOM load:

$(function() {
   bindToLogoutClick();
});

Answer 3

I'm not sure if your ajaxStop callback really is being called, after the ajax call, test it using console.log or simply alert it, like this:

$("#logout").live("click",function(){
    $(document).ajaxStop(function(){
        alert('ajaxStop callback');
        window.location.reload();
    });
});

and if it isn't called, it means you have one or multiple ajax requests in the page which are not completed. as you know .ajaxStop()

Register a handler to be called when all Ajax requests have completed

you can check your browser developer tool and look for ongoing xhr requests.

• most likely your problem is you add .ajaxStop() trigger after all Ajax requests have completed, then since there is no ongoing ajax call, it will never fire.

• the problem is if you use several advanced jQuery or other client frameworks components, it might never happen. I mean advanced components usually always use ajax requests in the background, without you even knowing.

• other possible problem could be an ajax request gone through timeout, without being completed.

• you have to be careful about the global option, since:

If $.ajax() or $.ajaxSetup() is called with the global option set to false, the .ajaxStop() method will not fire.

for instance if you have an ajax call like this:

$.ajax({
    //...
    global: false,
    // ...
});

or

$.ajaxSetup({
    ...
    global: false,
    ...
});
$.ajax(...);

your .ajaxStop() method will not fire.