How can jQuery .load fail?

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?

Burrus

Can you console.log or alert the response? – Tradition

What happens if you insert an alert(status); ahead of your if statement? – Rembert

edited my answer, let me know the results of the 'alerts' on your machine – Bindweed

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

Bindweed

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.

Perspex

Answer 3

use $.ajax function eg

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

Plenish

This doesn't answer my question. I would like to know how can .load fail. Theoretically speaking. – Burrus