0

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?

SwiftD
  • 5,769
  • 6
  • 43
  • 67

2 Answers2

2

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' });
iivel
  • 2,576
  • 22
  • 19
  • I have tried your suggestion but no difference - works on the pages it did but not on the page it didn't - I'm really looking for a way to get some sort of error (clue) out of the ajax call – SwiftD Sep 26 '12 at 16:09
  • You have a lot more control if you use .ajax rather than the abstrated .load since everything is internal. At that point use both a success and a fail can be directly called. This is an old answer, but a generic pattern that has worked well for me for a long time. http://stackoverflow.com/questions/5160596/showing-loading-image-in-modal-popup-extender-in-webservice-ajax-call/5161204#5161204 .... if that doesn't work for you, I'll need some HTML – iivel Sep 26 '12 at 16:14
  • Thanks, I will shuffle my code and report back – SwiftD Sep 26 '12 at 16:16
  • Ok, I have tried the above method (see revised code) and neither success or failure message is running on the page I am struggling with - all other pages report success – SwiftD Sep 26 '12 at 17:45
  • Can I get a representative jsFiddle of the page (or the basic HTML)? – iivel Sep 26 '12 at 20:13
  • If I pre-compile the page being called, it appears to work fine so a js fiddle wont help matter unfortunately - this is some kind of issue with what codeigniter is passing it - but as I say the content looks fine so I am a bit stumped, is there any way of getting an error or status update from ajax? – SwiftD Sep 27 '12 at 13:10
  • Yes. If it completes succesfully the success function is called, if fail the fail function is called. Alternately the ajaxComplete should work fine (and -- so long as it is registered early and bound to the correct element -- (meaning I'd put it in your $.ready(){} block) http://api.jquery.com/ajaxComplete/ --- without seeing how you're doing this part, I don't know how much help we can be since the code itself is fine (moving the event listener like paislee mentioned, registering early, or using an abstracted generic function like the link I posted) . Last thought = are you supressing events? – iivel Sep 27 '12 at 13:19
  • Thank you for your help and explanations - turns out there was an error in my php (undefined variable) that was causing the problem - interestingly no failure message on the ajax side though but it did stop the ajax completing successfully - it appears there is in fact a grey area between success and failure – SwiftD Sep 27 '12 at 13:40
  • In the case of non-standard HTTP responses being returned - you'll want/need to handle them specifically - look at the statusCode attribute: http://api.jquery.com/jQuery.ajax/ – iivel Sep 27 '12 at 14:34
0

The following initiates an asynchronous procedure:

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

which may complete before the ajaxComplete listener on the next line is registered. You could attach the listener before firing load.

calebds
  • 25,670
  • 9
  • 46
  • 74
  • Thanks for your suggestion - I tried putting ajaxComplete before load and as the call back of .load, neither helped – SwiftD Sep 26 '12 at 16:11