JQuery AJAX returns 200 OK, but errors. How can I view error details?

Question

I have the following jQuery:

var fn = { Load: function () { $(".myclass input.Submit").click(function (e) { var _IsValid = fn.IsValid(); if (_IsValid == false) { e.preventDefault(); } //Popup displays message fine if "return false;" is //called here but then obviously never posts back. }); } , IsValid: function () { var _IsValid = true; $.ajax({ url: "/myURL" , type: 'POST' , contentType: 'application/json; charset=utf-8' , data: JSON.stringify({ Barcode: $barcode.val(), Email: $email.val() }) , dataType: 'json' , success: function (data) { var array = eval(data); if (array[0] == 0) { _IsValid = false; ShowPopup(array[1]); } } , error: function (xhr, status, error) { } }); return _IsValid; } } 

The answer is AJAX 200 OK , but the success function does not start. Instead, the error function seems to work.

The script runs as a click event listener for ImageButton ASP.NET. If _IsValid==false , then e.preventDefault() is called to prevent postback.

Which is strange, if I add return false to the end of my event listen function, this code runs the success function.

How can I find out what causes the error so that I can solve it?

Answer 1

I think the problem you are having right now is that your IsValid function will always return true. This is because the AJAX message will not have time to complete before the function returns. This is an asynchronous function.

From the fact that I can say that you want to use the form with an AJAX request, and if valid, submit the form, otherwise display a popup. If this is correct, you should do something like ...

 $(".myclass input.Submit").click(function (e) { e.preventDefault(); ProcessForm(); }); function ProcessForm(){ $.ajax({ url: "/myURL" , type: 'POST' , contentType: 'application/json; charset=utf-8' , data: JSON.stringify({ Barcode: $barcode.val(), Email: $email.val() }) , dataType: 'json' , success: function (data) { var array = eval(data); if (array[0] == 0) { ShowPopup(array[1]); } else//VALID { document.forms[0].submit(); //OR IF YOU HAVE MULTIPLE FORMS SPECIFY AN ID... document.getElementById("FormElement").submit(); } } , error: function (xhr, status, error) { } }); } 

Answer 2

How can I find out what causes the error so that I can solve it?

You can use the javascript debugging tool in your browser, such as FireBug in FireFox, which will allow you to see the AJAX request and response. You will definitely see what is sent via cable and any possible errors.

In fact, looking at this:

 dataType: 'json;' 

you probably meant:

 dataType: 'json' 

When you explicitly set the content type of the response like this, you need to make sure the server sends valid JSON, as jQuery will try to parse the response, and if it does not work, you will get an exception.

Also I would completely replace:

 data: '{"Barcode":"' + $barcode.val() + '", "Email":"' + $email.val() + '"}' 

from:

 data: JSON.stringify({ Barcode: $barcode.val(), Email: $email.val() }) 

Never use string concatenation, as when creating JSON.