Question

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?

Answer 1

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);
        }
    });
}