The error function not working

Question

Hi I just tried testing if the error function would return an alert but it didn't fire. I altered the url link hoping that it would generate an alert since it won't be able to find or get json data. All I am getting is "Uncaught TypeError: Cannot read property 'length' of undefined jquery-1.9.1.min.js:3"

$(document).on('pagebeforeshow', '#blogposts', function () {
    //$.mobile.showPageLoadingMsg();    
    $.ajax({
        url: "http://howtodeployit.com/api/get_recent_po",
        dataType: "json",
        jsonpCallback: 'successCallback',
        async: true,
        beforeSend: function () {
            $.mobile.showPageLoadingMsg(true);
        },
        complete: function () {
            $.mobile.hidePageLoadingMsg();
        },
        success: function (data) {
            $.each(data.posts, function (key, val) {
                console.log(data.posts);
                var result = $('<li/>').append([$("<h3>", {
                    html: val.title
                }), $("<p>", {
                    html: val.excerpt
                })]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>');
                $('#postlist').append(result).trigger('create');
                return (key !== 4);
            });
            $("#postlist").listview();
        },
        error: function (data) {
            alert("Data not found");
        }

    });
});

afaik $.ajax will only trigger error if the request failes, ignoring the data returned. but i am not sure on this. throw a uncaught exception in your api method to see how your javascript reacts — Tschitsch, Oct 24 '13 at 07:17

score 1 · Answer 1 · edited May 23 '17 at 10:31

I think the problem is that, when you make the AJAX request your code is executing the success callback, not the error callback. Thus when you execute:

$.each(data.posts, function(key, val) {

The $.each function is trying to get the length of data which is NULL.

It doesn't look right that you have defined a jsonp callback function and yet your still using the success and error callbacks. This SO question might help a bit :

Use of success / jsonpCallback with ajax request

score 0 · Answer 2 · answered Oct 24 '13 at 07:11

0

Maybe here $.each(data.posts, data.posts is undefined and that's why you get an error. Log data in success callback and see what it contains.

answered Oct 24 '13 at 07:11

karaxuna

26,752
13
82
117

I think that's the OP's point. If the URL returns 404, the success callback shouldn't be called. – CodingIntrigue Oct 24 '13 at 07:12
I would assume so as RGraham had mentioned – Chelseawillrecover Oct 24 '13 at 07:14
@Chelseawillrecover just try what I said )) – karaxuna Oct 24 '13 at 07:15
@karaxuna what change do you want me to make? – Chelseawillrecover Oct 24 '13 at 07:26
@Chelseawillrecover You can check wheather `data.posts` is undefined or not like this: `if(data.posts) $.each(data.posts, ...`. But I would suggest to see the structure of data object, maybe data.posts is never defined and `data` variable itself contains posts – karaxuna Oct 24 '13 at 07:30
@karaxuna data.posts returns fine: [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] myscript.js:16 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] myscript.js:16 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] myscript.js:16 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] myscript.js:16 [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] – Chelseawillrecover Oct 24 '13 at 07:35
@Chelseawillrecover see this http://stackoverflow.com/questions/18699968/why-is-my-jquery-plugin-causing-a-cannot-read-property-length-of-undefined – karaxuna Oct 24 '13 at 07:44

Sebastian vom Meer · Answer 3 · 2013-10-24T07:25:28.900

0

I created a clean Fiddle. Opening the given URL gives a 301 redirect followed by a 200 JSON response. The HTTP status code says that everything is fine, so jQuery doesn't know there was an error.

You mixed up two different concepts here: jQuery's error callback is for network errors and all these things. If you transport error states inside your JSON with HTTP status code 200 you have to deal with it on your own inside the success callback.

Sorry, SO doesn't allow JS-Fiddle links without code:

beforeSend: function()  { console.log('beforeSend'); },
complete: function()    { console.log('complete'); },
success:function (data) { console.log('success') },
error: function(data)   { console.log('error') }

edited Oct 24 '13 at 07:25

answered Oct 24 '13 at 07:20

Sebastian vom Meer

5,005
2
28
36

Sorry, should hit Save first ;). Updated. – Sebastian vom Meer Oct 24 '13 at 07:27
beforeSend myscript.js:11 error myscript.js:14 complete myscript.js:12 GET http://howtodeployitsdf.com/api/get_recent_po – Chelseawillrecover Oct 24 '13 at 07:33
The fiddle shows a request to a nonexisting URL and that the error event is fired correclty (at least it does for me, don't know if something is wrong there). However, this is not the case in your example, because your response sends a 200 header. So jQuery won't fire the error event. – Sebastian vom Meer Oct 24 '13 at 07:55

score 0 · Answer 4 · answered Oct 24 '13 at 08:18

Thanks everyone for your input. I did take on-board all suggestions. Recommendation from Jason seems to had made more sense so while investigating his suggestion I came to this site to read up more about jasonCallback. removing the jasonCallback option though did not fix the issue but strangely this issue seems to do with the url I was using for my json caalback.

What I then did was to change the url from "http://howtodeployit.com/api/get_recent_po" to "http://howtodeployit.com/category/daily-devotion/feed/?json=recentstories" and it worked. Even though both returned error in the console but the second was the one that triggered the error function. Why I am looking into it.

The error function not working

4 Answers4