How can jQuery .load fail? - php

Question

I am using a simple ajax loader to get content on wordpress.
$("#page_preview").load("ajaxloader/", function(response, status, xhr) {
if (status == "error") {
alert("Sorry but there was an error");
}
else
{
$('#page_preview').fadeIn(300);
}
});
return;
When I load a specific post that has a google map embedded, obviously something goes wrong BUT instead of going inside the if statement, the firebug shows that it goes beyond this code. Neither if or else hit.
Using the eclipse debugger I found that the page load successfully, but when it returns the data to the .load() method, the last breaks.
Any ideas on what might going on?

Answer 1

How
<script>
// as of jQuery 1.5.x ++
var pagePreview = $("#page_preview");
$.get("ajaxloader/").success(
function(response, status, jqXhr) {
alert("Success!");
pagePreview.empty();
pagePreview.append(response);
// i feel you need to parse the response for the google map div, and perform another $.get() of the google url?
}).error(function(response, status, jqXhr) {
alert("These are not the droids you are looking for. move along.");
}).complete(function(response, status, jqXhr) {
alert("Complete!");
});
</script>
#Why
jQuery.load() will get you on the documentation. .load is equivalent to this
It is roughly equivalent to $.get(url, data, success) except that it
is a method rather than global function and it has an implicit
callback function. When a successful response is detected (i.e. when
textStatus is "success" or "notmodified"), .load() sets the HTML
contents of the matched element to the returned data.
You need to register in $.ajax( complete:function(responseText, textStatus, XMLHttpRequest)){}); and check the textStatus value. if ok, then load the data into the destination $('selector') yourself. Or fix the .load() by watching your network xmlHttpRequests in chrome (ctrl + shift +j) or some network tab in firebug and debug the issue with your 'url' value in $('selector').load( 'url', function(response, status, xhr){})

Answer 2

A simple way to debug this is to look at the XHR requests with the firebug console tab. There might be a problem with the request URL and you might not get any data back, or maybe you get an error or something. With firebug you could easily see what the server returns.
Since .load only load on success, you could add a
console.debug("In .load function");
at the begging of the function. Again, checking with firebug you could find out if the .load callback is actually fired.

Answer 3

use $.ajax function
eg
$.ajax({
url: "test.html",
context: document.body,
success: function(){
//when Successfully executed
},
error: function(){
//When Error Fires
}
});