get statusCode inside jQuery load event handler

Question

I'm using jQuery ajax event 'load':

markup code:

<iframe id="my_iframe" src="http://somewhere"></iframe>

jQuery code:

$(function() {
    $('#my_frame').load(function(statusCode) {
        // The content loaded here maybe 404/500 or other.
        if(statusCode == 400) {
            // do something.
        } else {
            // do something else.
        }
    });
});

Question

I want to get the status code in my load event callback. Maybe get the jqXHR object to achieve?

Is this possible?

More, I may manually change the src attribute of the iframe, which will also trigger the load event, it seems this is not an ajax call.

You only have a callback and no loading-url, what are you loading?, also you can use the XHR-object if defined in the callback paramaters. — Adrian Forsius, Oct 10 '14 at 08:40
@AdrianForsius could you please point me a more specifically way about how to put the XHR-object into callback as parameter? — Alfred Huang, Oct 10 '14 at 08:47
possible duplicate of [How do I load an url in iframe with Jquery](http://stackoverflow.com/questions/7177080/how-do-i-load-an-url-in-iframe-with-jquery) — Adrian Forsius, Oct 10 '14 at 09:14

score 3 · Accepted Answer · edited May 23 '17 at 11:44

Firstly, it is generally not best practice to use iframes. You should be able to accomplish all of your requirements simply using a <div> element.

Html:

<div id="dynamicPage">
    Loading...
</div>

JavaScript:

$("#dynamicPage").load(
"http://somewhere",
function(response, status, xhr) {
    if (status == "success") {
        // SUCCESSFUL request //

    } else if (status == "error" || status == "timeout") {
        // ERROR and TIMEOUT request //

        var msg = "Sorry! An error has occurred. Please try again later";
        $("#dynamicPage").html(msg);

    } else if (status == "notmodified") {
        // NOT MODIFIED request (likely cached) //

    } else if (status == "abort") {
        // ABORTED request //

    }
});

Tread carefully with some of the other suggested on this question. Another post did not even use jQuery.load() and mispelled "success:" as "sucess."

As a bonus treat (if you are possibly intrigued), you may easily adapt the code above to utilize a loading animation.

Reference: Basic jQuery animation: Elipsis (three sequential dots)

Adrian Forsius · Answer 2 · 2014-10-10T10:47:30.547

0

I would say you are looking for something like this:

$.get({
    'url': 'your-url',
    sucess: function(response, status, xhr) {
        //do something

        //Change the iframe content by src while having xhr availible
        $('#my_frame').attr('src', 'new-url');
        //Change the iframe content by appending your own HTML while having xhr availible
        $('#my_frame').contents().append('<div>New HTML</div>');

    },
    error: function (response, status, xhr) {
        //do something
    }
});

edited Oct 10 '14 at 10:47

answered Oct 10 '14 at 08:49

Adrian Forsius

1,437
2
19
29

Well, if I wrote this way on an `div`, it works, but I'm now working on an iframe, that seemed not loading content correctly. Is there any way works if I load the content by changing `src` of that iframe? – Alfred Huang Oct 10 '14 at 08:59
What you probably then want to do is what is discussed in this question, probably you don't want to use load but change the src-attribute on the iframe: http://stackoverflow.com/questions/7177080/how-do-i-load-an-url-in-iframe-with-jquery – Adrian Forsius Oct 10 '14 at 09:14
Well, I know how to change the src attribute, then make the iframe load the page, but if I load the iframe in this way, I can't get the xhr object and status as that in your answer. – Alfred Huang Oct 10 '14 at 09:49

get statusCode inside jQuery load event handler

markup code:

jQuery code:

Question

2 Answers2