Monday, June 4, 2012

How do I make jQuery wait for an Ajax call to finish before it returns?


I have a server side function that requires login. If the user is logged in the function will return 1 on success. If not, the function will return the login-page.



I want to call the function using Ajax and jQuery. What I do is submit the request with an ordinary link, with a click-function applied on it. If the user is not logged in or the function fails, I want the Ajax-call to return true, so that the href triggers.



However, when I use the following code, the function exits before the Ajax call is done.



How can I redirect the user gracefully to the loginpage?




$(".my_link").click(
function(){
$.ajax({
url: $(this).attr('href'),
type: 'GET',
cache: false,
timeout: 30000,
error: function(){
return true;
},
success: function(msg){
if (parseFloat(msg)){
return false;
} else {
return true;
}
}
});
});


Source: Tips4all

5 comments:

  1. If you don't want the $.ajax() function to return immediately, set the async option to false:

    $(".my_link").click(
    function(){
    $.ajax({
    url: $(this).attr('href'),
    type: 'GET',
    async: false,
    cache: false,
    timeout: 30000,
    error: function(){
    return true;
    },
    success: function(msg){
    if (parseFloat(msg)){
    return false;
    } else {
    return true;
    }
    }
    });
    });


    But, I would note that this would be counter to the point of ajax also, and you should be handling the response in the error and success functions. Those functions will only be called when the response is received from the server.

    ReplyDelete
  2. The underlying XMLHttpRequest object (used by jQuery to make the request) supports the
    asynchronous property. Set it to false. Like

    async: false

    ReplyDelete
  3. I think things would be easier if your simply code you success function to load the appropriate page instead of returning true or false i.e instead of returning true, while not just say, window.location="appropriate page",that way when the success function is eventually called, the page gets redirected.

    ReplyDelete
  4. I am using not $.ajax but the $.post and $.get functions so if I need to wait for the response i use this:

    $.ajaxSetup({async: false});
    $.get("...");

    ReplyDelete
  5. From jQuery documentation

    "$.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually."

    So you have to use it like that

    var xhr = $.ajax({....});


    then look at XMLHttpRequest documentation ( https://developer.mozilla.org/en/XmlHttpRequest ) . It has readyState attribute. Try to set up interval (setInterval) to check this value, and when it will be 4, check responseText attribute for response.

    Do it

    $(".my_link").click(
    function(){
    var xhr = $.ajax({
    // not here
    });
    // here...
    };
    );


    Try to find something like that for IE.

    ReplyDelete