jquery: how to wait until ajax call would be completed

Question

I have an anchor on my page that leads to some other website.

I want to keep track on clicking that anchor, so I wrote a little click handler.

<a href="https://othersite.com" class="js-button">Leave</a>

and there's javascript code...

$(".js-button").on("click", function() {
    var name = $(this).data("name");
    $.when(
        $.ajax({
            url : 'statscript.php',
            type : 'post',
            data : 'name=' + name,
            success : function(response) {                  
            }
        })
    ).then(); 
});

Though it should wait for an ajax to load and only after that leave the page, in fact it doesn't work. The statscript.php doesn't even start working, and user leaves the page.

So if I alter the string with then to

).then(alert('hey'); 

the php script works fine because it looks like it has time to work.

So what am I doing wrong with the wait function?

Answer 1

You were close to the answer: There is a done function called like this:

$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  beforeSend: function( xhr ) {
      xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
}).done(function( data ) {
    if ( console && console.log ) {
        console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
});

Answer 2

The closest solution to your code would be:

You should use e.preventDefault() to prevent the default action of the a tag.

You should also redirect the user on complete . if you got error in your analytics system, he doesn't need to know that.

You should do it like that:

$(".js-button").on("click", function(e) {
    e.preventDefault();

    var name = $(this).data("name"),
        href = $(this).attr("href");

    $.ajax({
        url : 'statscript.php',
        type : 'post',
        data : 'name=' + name,
        complete: function () {
            alert('Hey!');
            // if you want to redirect the user after the statistics sent:
            //window.location.href = href;
        }
    })
});

Answer 3

I think you have two problems. One Jnn Mgdls responded to - the AJAX done callback on the promise is to be used.

The second problem may be related to the anchor's event causing a navigation away from the page, and you may need to prevent the default behavior - http://api.jquery.com/event.preventdefault/

Answer 4

You need to disable the default browser action and then manually redirect the user:

$(".js-button").on("click", function(e) {
    e.preventDefault();
    var name = $(this).data("name"),
        href = this.href;
    $.ajax({
        url : 'statscript.php',
        type : 'post',
        data : 'name=' + name,
        success : function(response) {
            document.location.href = href;
        }
    }); 
});

Answer 5

There is a function called ajaxComplete()

$(document).ajaxComplete(function() {
  alert('Ajax done');
});