JQuery AJAX, Error Status code: 200, Status Text: parserorro | OK

Question

Here is a funny situation that I'm in. I'm developing an ASP.Net web site using VS 2008 and .Net Framework 3.5, and I want to use jquery ajax in a test page, the code looks like this:

C# Method
[WebMethod]
public static string test()
{
    return "Server Response" ;
}

$(document).ready(function() {
    $("#myDiv").click(function() {
        $.ajax({
            type: "POST",
            url: "AjaxTest.aspx/test",
            data: "",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
                        success: function(msg) {
                            // Replace the div's content with the page 
                            // method's return.
                            alert(msg.d);
                        },
                        error: function(result){ 
                            alert("error occured. Status:" + result.status  
                            + ' --Status Text:' + result.statusText 
                            + " --Error Result:" + result); 
                        }
           });
    });
});

So When I use Jquery 1.4.4 like this :

I get : Status 200; Status Text: OK

When I use Jquery 1.5 I get: Status 200; Status Text: Parsererror

So I created a new WebSite in Visual Studio, copy and pased the code there, and it works fine !!!! I can't figure out what causes the problem. Also I have used methods with parameter, and setting data:"{}", and removing data completely, but nothing seems to work.

I don't know if has to do anything with the DevExpress components that I'm using or not.

I also found a good answer which was working with complete method like this :

  complete: function(xhr, status) {
            if (status === 'error' || !xhr.responseText) {
                alert("Error");
            }
            else {
                var data = xhr.responseText;
                alert(data);
                //...
            }
        }

But I don't know if it will work fine or there might be some other problem with this method too. I also don't know how to access response data from here. But my main concern is finding out what is causing the problem in my website.

UPDATE: Well today in Google Chrome console I noticed some syntax problems with JQuery 1.5 they are as below:

Uncaught SyntaxError: Unexpected token < jQuery.jQuery.extend.globalEvaljquery.js:593 jQuery.ajaxSetup.converters.text scriptjquery.js:7175 ajaxConvertjquery.js:7074 donejquery.js:6622 jQuery.ajaxTransport.send.callbackjquery.js:7441

Answer 1

The issue isn't so easily solved with fiddler, although it's a great tool.

The issue I think is described here, and for now use the complete event. there are some issues that will be resolved in jQuery 1.5.1 See:

jQuery returning "parsererror" for ajax request

as it was posted there,

complete: function (xhr, status) {
    if (status == 'error' || !xhr.responseText) {
        handleError();
    }
    else {
        var data = xhr.responseText;
        //...
    }
}

Although the interesting thing is - this works for me with jsonp data when I query amazon's service (code amazon was based on some other posting on the net I don't have the ref too) ala:

   //resp is simple a placeholder for autocomplete's response which I will need to call on a global scope.
        var resp;
        var filter;

        $(document).ready(function () {
            //http://completion.amazon.com/search/complete?method=completion&q=halo&search-alias=videogames&mkt=1&x=updateISSCompletion&noCacheIE=1295031912518
            filter = $("#productFilter").autocomplete({
                source: function (request, response) {
                    resp = response;

                    $.ajax({
                        url: "http://completion.amazon.com/search/complete",
                        type: "GET",
                        cache: false,
                        dataType: "jsonp",
                        success: function (data) {
                            //data[1] contains an array of the elements returned from the service.
                            //use .map to enumerate through them.
                            response($.map(data[1], function (item) {
                                //debugger;
                                 return { label: item, value: item, id: item}
                            }))

                        },
                        data: {
                            q: request.term,
                            "search-alias": "videogames",
                            mkt: "1",
                            callback: '?'
                        }
                    });
                },
                minLength: 2,
                select: function (event, ui) {
                    //$('#browseNode option:first').attr('selected', 'selected');
                    alert('selected');
                },
                open: function () {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function () {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });
        });
        //this is the method that will be called by the jsonp request
        function updateISSCompletion() {
            alert('updateiss');
            resp(completion[1]);
        }