How do I debug a jQuery Ajax request?

Question

My code is:

var test = "it isn't working";
var response = $.ajax({
    type: 'GET',
    url: 'jquerydemo.php', //This is in the same site as the page calling this request, so it's not a same-domain error.
    success: function(){
            test = "it's working";
        },
    error: function(){
            alert("Error detected");
        }
 }).responseText;
alert(test);

I tested the status code and it came out to a 200 and the error function never goes off, but neither does the success function. Like I said in my comment, it isn't a same-origin policy error. It just stays saying "it isn't working". What's going on here?

Fernando Fabreti · Accepted Answer · 2012-10-30 12:43:55Z

15

Try this:

 error: function(jqXHR, textStatus, errorThrown) {
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
 }

edited Oct 30, 2012 at 12:43

answered Oct 30, 2012 at 12:35

Fernando Fabreti

4,4213 gold badges34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jfriend00 · Accepted Answer · 2011-08-09 04:20:10Z

5

Your ajax call is asynchronous. It has not completed yet when your alert at the end runs. Put an actual alert in the success function and you should see your result there.

Remember that making the ajax call just starts the asynchronous ajax call and then the rest of your code continues to run. In the code example you posted, that means your alert(test) call runs right away before the ajax call has completed.

You can ONLY examine the results of the ajax call from within the success handler itself.

var test = "it isn't working";
var response = $.ajax({
    type: 'GET',
    url: 'jquerydemo.php', //This is in the same site as the page calling this request, so it's not a same-domain error.
    success: function(){
            alert("it's working");   // put this here and you will see it 
                                     // if the ajax call is successful
        },
    error: function(){
            alert("Error detected");
        }
 }).responseText;

answered Aug 9, 2011 at 4:20

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

5 Comments

dfreeman Over a year ago

You also have the option of adding async: true to the settings you pass in your ajax call, but keep in mind that this will halt that entire thread of execution in your script until the request has returned.

jfriend00 Over a year ago

@SchiefGelaufen - I assume you meant async: false. Turning the ajax call into a synchronous call is indeed an option, but because it locks up the whole web page for the duration of the ajax call, it is rarely the best design choice. It is more complicated to code with async: true, but gives a better user experience.

dfreeman Over a year ago

Whoops, silly typo on my part. Yes, async: false. It's not necessarily true that making a synchronous ajax request locks up the entire page (at least, there are a number of circumstances under which it doesn't), but it's certainly considered better practice to put any logic relying on the response in your success callback.

jfriend00 Over a year ago

@SchiefGelaufen - when would async: false not lock up your page until the call completed?

dfreeman Over a year ago

The particular situation I was thinking of does lock up the page after all. Sheepishly withdrawn.

Icarus · Accepted Answer · 2011-08-09 04:28:15Z

2

To debug these types of things, I find Firebug an indispensable tool. It will show you exactly the response from the server (500 error, 553 error, what have you). You can put break points in your Javascript code and debug it step by step. Firebug works on Firefox.

For IE, you can use the Developer Tools feature which is similar to Firebug, specially on IE9 which seems more mature than previous versions of the Developer Tools for IE7 or IE8.

answered Aug 9, 2011 at 4:28

Icarus

64k14 gold badges102 silver badges116 bronze badges

1 Comment

pilavdzice Over a year ago

You can also just press CTRL-SHIFT-J in Chrome

talha2k · Accepted Answer · 2011-08-09 04:27:59Z

1

Move that alert(test) from end into the success function of the ajax call. If it alerts it means code is working else it is not. you can only debug ajax call on its success return.

var test = "it isn't working";
var response = $.ajax({
    type: 'GET',
    url: 'jquerydemo.php', 
    success: function(){
            test = "it's working";
            alert(test);   //It will alert when you ajax call returns successfully.
        },
    error: function(){
            alert("Error detected");
        }
 }).responseText;

Hope this helps.

answered Aug 9, 2011 at 4:27

talha2k

25.5k4 gold badges67 silver badges83 bronze badges

Comments

Dhrumil Shah · Accepted Answer · 2011-08-09 04:25:10Z

0

You can make it like

  var response = $.ajax({
    type: 'GET',
    url: 'jquerydemo.php', 
    success: function(){
           alert("it's working");
        },
    error: function(){
            alert("Error detected");
        }
 }).responseText;

This will work....

answered Aug 9, 2011 at 4:25

Dhrumil Shah

2,1765 gold badges23 silver badges37 bronze badges

Collectives™ on Stack Overflow

How do I debug a jQuery Ajax request?

5 Answers 5

Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related