jQuery ajax callback never called

Question

Javascript code, using jQuery 1.7:

$( function() { 
  $.get('/ajax_dummy', function() { alert('foo');  })
});

With Firebug I can see that the HTTP GET request is sent and a "hello world" response with code 200 is returned, so everything seems fine. But the callback is never called.

I have no idea what is wrong; this should be so simple, right?

`$.get()` will fail silently. Switch to using `$.ajax()` with an `error` method and see if that gets run instead. If it does, take a look at the arguments given to to see what's going wrong. — JAAulde, Dec 14 '11 at 18:11
What type of content comes back from the ajax handler? If it's JSON and the response has malformed JSON it can fail without giving you a clear reason why. — Dan Herbert, Dec 14 '11 at 18:11
At quick glance, are you missing a ';' at the end of the get statement? — brheal, Dec 14 '11 at 18:14
@brheal while the semicolon ought to be put in, it is not causing the issue at hand. — JAAulde, Dec 14 '11 at 18:16
what is the content-type header in the response from server.. — Esailija, Dec 14 '11 at 18:19
@Dan Herbert: The content type was 'application/json', when I changed to 'plain/text' it worked :) If you would like the points, make an answer. — Lucy Brennan, Dec 14 '11 at 18:28
@JAAulde: Thanks for the tips about using $.ajax which does not fail silently. — Lucy Brennan, Dec 14 '11 at 18:29

score 10 · Accepted Answer · answered Dec 14 '11 at 18:49

You are not providing dataType so jQuery makes an "intelligent guess" of what the content type is from the response Content-Type header which you said is application/json.

So jQuery treats the response as JSON which means it will try to automagically parse it as so, causing an error.

Because the request causes an error

$.parseJSON( "hello world" );
"Invalid JSON: hello world"

the success callback won't obviously be fired.

score 6 · Answer 2 · answered Dec 14 '11 at 18:23

6

Give this a rip:

$.ajax("/ajax_dummy", {
    dataType: "text",
    success: function() {
        console.log("winning.");
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus); //error logging
    }
});

answered Dec 14 '11 at 18:23

Naftuli Kay

75,812
80
244
374

Lloyd · Answer 3 · 2011-12-14T18:25:35.567

0

add this markup

<div id="error"></div>

then add this handler to catch AJAX errors

$("#error").ajaxError(function(event, request, settings){
  $(this).append("<li>Error requesting page " + settings.url + "</li>");
});

Alternatively, you could rewrite your original code like this

$.get('/ajax_dummy', function() { 
    alert('foo');  
}).error(function() {
    // catch error
});

edited Dec 14 '11 at 18:25

answered Dec 14 '11 at 18:17

Lloyd

7,498
2
31
52

score 0 · Answer 4 · answered Dec 14 '11 at 19:47

This is because according to the documentation the $.get() syntax should be like this

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

please note the "success" callback option. a success callback called when the request is success based on status codes (200). but your url might be not a valid path or returns some other status code (404) meaning "file not found" and thus an error occurs. so success method never called.

also there is no "error" callback defined with your syntax. check the following more complete code

$.get("/ajax_dummy", function() { alert('foo'); })
  .error(function(d,e) { alert(e); })
  .complete(function() { alert("complete"); });

jQuery ajax callback never called

4 Answers4