Question

I have a function to load page content via ajax, essentially the function, fades out the current content, replaces the content with the result of the ajax request and then fades the content back in.

My function works fine for most pages but for some reason on one particular request the content is being loaded but the ajax success function is not being called meaning the content is loaded but remains hidden.

Here is my code, for the purposes of diagnosis I have replaced the ajax success function with an alert but this is not running on the same page (but ajax content IS being loaded):

var loadUrl=b_url+page;
        if (History.enabled) {History.pushState({state:2}, page, "/"+page);}
        window.name=page;
        $.ajax({
            cache: false,
            async: false,
            type: "POST",
            url: loadUrl,
            dataType: "html",
            beforeSend: function() {
                 $('.contentarea').animate({
                        'opacity'   : 0
                    }, 180, 'jswing', function(){
                            $('#mainc').hide(350, 'jswing');
                });
             },
            success: function(response) {
                $('#mainc').html(response);
                alert('success')
            },
            failure: function(msg) {
                alert('FAIL');
            }
        });

With the above code, neither a success or failure message is being displayed on the problem page, however if I remove the line:

$('#mainc').html(response);

Then the success message is displayed. The content being loaded is a page of html, which as I say appears to be loaded fine (in the sense that it is in the document). Every page bar one works fine so I suspect there is some problem with what is being returned (although it loads to the document fine) – The content being loaded is built out of a load of partials using codeigniter so I suppose my question here is how I go about working out what the problem is. I have tried adding this in my document ready function (having read a similar post) but it does nothing:

$(document).ajaxError(function(e, xhr, settings, exception) {
alert('error in: ' + settings.url + ' \n'+'error:\n' + xhr.responseText );
}); 

An ideas how I go about finding out what the problem is here?

Answer 1

For the .ajaxComplete – you should have that registered as part of your page load on the element being loaded into – so

$('#mainc').ajaxComplete(function(){ alert('bob')})

can be it’s event instead of being buried inside of the .animate function. Otherwise the line:

$("#mainc").load(loadUrl);

could include your oncomplete function directly instead of registering the event listener. e.g.

$("#mainc").load(loadUrl, function(){ alert('bob' });