When the user refreshes the page, defaultView() is called, which loads some UI elements. $.address.change() should execute when defaultView() has finished, but this doesn't happen all the time. $.address.change() cannot be in the success: callback, as it's used by the application to track URL changes.

defaultView();

function defaultView() {
    $('#tout').fadeOut('normal', function() {
        $.ajax({
            url: "functions.php",
            type: "GET",
            data: "defaultview=true",
            async: false,
            success: function (response) {
                $('#tout').html(response).fadeIn('normal');
            }
        });
    });
}

$.address.change(function(hash) {
    hash = hash.value;
    getPage(hash);
});

I'm at a loss as to how to make $.address.change() wait for defaultView() to finish. Any help would be appreciated.

When the user refreshes the page, defaultView() is called, which loads some UI elements. $.address.change() should execute when defaultView() has finished, but this doesn't happen all the time. $.address.change() cannot be in the success: callback, as it's used by the application to track URL changes.

defaultView();

function defaultView() {
    $('#tout').fadeOut('normal', function() {
        $.ajax({
            url: "functions.php",
            type: "GET",
            data: "defaultview=true",
            async: false,
            success: function (response) {
                $('#tout').html(response).fadeIn('normal');
            }
        });
    });
}

$.address.change(function(hash) {
    hash = hash.value;
    getPage(hash);
});

I'm at a loss as to how to make $.address.change() wait for defaultView() to finish. Any help would be appreciated.

• javascript
• jquery

• You can't do this. You've got two asynchronous events going on here: the fadeOut of #tout, and the AJAX request. A synchronous AJAX request is the least desirable piece of Javascript code I can think of. The only way of doing this is to put $.address.change() in the success callback of the AJAX request, so another approach is needed. – Matt Commented Apr 25, 2010 at 22:11
• async: false, is there by error - I was trying how it affected the script. Didn't make any difference, and I removed it. – Wurlitzer Commented Apr 25, 2010 at 22:19

3 Answers 3

Call it in the success or plete callback. Using delay for timing a callback is unreliable at best. You might even need to put the call to it in the callback to the fadeIn function inside of the success callback.

It doesn't have to be defined inside the success callback, just executed. Both contexts will still be able to use it.

I too was told that because of async you can't make javascript "wait" -- but behold an answer :D ...and since you're using jQuery, all the better:

use jQuery's bind and trigger. I posted an answer to a similar problem at How to get a variable returned across multiple functions - Javascript/jQuery

One option is to hide the $.address (I'm guessing this is a drop-down list) via css, and show it inside the success callback from the ajax method.