Our ajax calls go through two JavaScript objects before they make the actual jQuery $.ajax call, so the problem had something to do with that as well, but to oversimplify it, if there is a JavaScript error during the execution of the success callback, the complete callback will NOT get invoked. Here is the source:
<html> <head> <title> jQuery test</title> <script src="jquery-1.4.3.min.js"></script> <script type="text/javascript"> function testClick() { $.ajax( { url: "somePage.html", success: function(data){ console.log('success called'); $('#targetDiv').html(data); var someObject; //if you comment out the following line out, complete will get called someObject.nonExistingProperty = "blah"; }, complete : function() { console.log('complete called'); } }); } </script> </head> <body> <h1> <span style="color:green">jQuery Ajax Complete test</span> </h1> <input id="testButton" type="submit" value="click me to test" onclick="testClick()" /> <div id="targetDiv" style="margin-top:10px"> </div> </body> </html>
Oh god thank you very much! I've lost two hours trying to figure it out, and at last it was so simple!
ReplyDeleteYou just made my day! Glad the post helped! :)
Delete@Boyko: same thing. how stupid I am. I just did not look at the console and was trying to debug complete event. Thanks a million times!!!
ReplyDeleteThanks for leaving a note my friend! Our job often makes us feel stupid, but at the end of the day, it's a whole bunch of fun :). Thanks for the nice note again!
Delete