jquery ajax: redirect with json - unexplainable behaviour?

I'm getting a json object from the server. If the json object has "redirect" as its status i'm calling a function to reload a little part of the page and then redirect to the jsonObject data value that contains a link I can redirect to.

$.ajax({
    url: loadUrl,
    dataType: "text json",
    success: function( jsonObject, status ) {

        if ( jsonObject.status == "redirect" ) {

            ajaxLoad($('.list'), $('.group').data('ajax-link'));

            location.href = jsonObject.data;

            return false;
        }

        …

and this is the ajaxLoad() function I'm calling that simply reloads a specific part of a page.

function ajaxLoad(targetBox, loadUrl) {

    $.ajax({
        url: loadUrl,
        dataType: "html",
        timeout: 5000,
        cache: false,
        success: function( html, status ) {
            targetBox.html(html);
                    console.log("function() ajaxLoad : " + status);
        },
        error: function( request, status ) {
            console.log("function() ajaxLoad : " + status);
        }
    });
}

The weird thing is that if I comment out the location.href = jsonObject.data line the ajaxLoad() function logs SUCCESS, if i leave the redirect line the ajaxLoad() function logs ERROR. So if I leave the line the ajaxLoad function doesn't work, if I remove the line it works.

However, what has this line to do with rest of the script?

Any ideas?

To redirect you want to use window.location = jsonObject.data;

I would recommend putting the redirect inside a callback which you provide to ajaxLoad so the redirect happens on success of THAT ajax call. Then it won't be a race.

// Call ajaxLoad with the callback
ajaxLoad($('.list'), $('.group').data('ajax-link'), function(){window.location = jsonObject.data;});

// Add the callback to ajaxLoad
function ajaxLoad(targetBox, loadUrl, callback) {

    $.ajax({
        url: loadUrl,
        dataType: "html",
        timeout: 5000,
        cache: false,
        success: function( html, status ) {
            targetBox.html(html);
                    console.log("function() ajaxLoad : " + status);

            if(typeof(callback) == 'function')
            {
                // Execute the redirect here
                callback();
            }
        },
        error: function( request, status ) {
            console.log("function() ajaxLoad : " + status);
        }
    });
}

Since you are calling ajaxLoad function asynchornously, before its resposnse comes location has changed so you will not see the expected bejavior. Try to set the location in the success handler of ajaxLoad. But I dont understand what is the use of ajaxLoad which partially updates the page and immediately changes the location.

if ( jsonObject.status == "redirect" ) {

            ajaxLoad($('.list'), $('.group').data('ajax-link'), jsonObject.data);

            return false;
        }


function ajaxLoad(targetBox, loadUrl, dataUrl) {

    $.ajax({
        url: loadUrl,
        dataType: "html",
        timeout: 5000,
        cache: false,
        success: function( html, status ) {
            targetBox.html(html);
                    console.log("function() ajaxLoad : " + status);

           location.href = dataUrl;
        },
        error: function( request, status ) {
            console.log("function() ajaxLoad : " + status);
        }
    });
}

The problem is that the code is not executing in the order that you think that it does. The ajaxLoad function doesn't wait for the request to complete before it exists, it just sends the request and returns right away.

If you want the redirect to happen after the content is loaded, you have to do it from the success callback:

$.ajax({
  url: loadUrl,
  dataType: "text json",
  success: function( jsonObject, status ) {

    if ( jsonObject.status == "redirect" ) {

        ajaxLoad($('.list'), $('.group').data('ajax-link'), jsonObject.data);
        return false;
    }

...

and:

function ajaxLoad(targetBox, loadUrl, redirect) {

  $.ajax({
    url: loadUrl,
    dataType: "html",
    timeout: 5000,
    cache: false,
    success: function( html, status ) {
        targetBox.html(html);
        console.log("function() ajaxLoad : " + status);
        window.location.href = redirect;
    },
    error: function( request, status ) {
        console.log("function() ajaxLoad : " + status);
    }
  });
}