Ajax call is not calling to the server side and in httpfox shows error as “Error loading content (NS_ERROR_DOCUMENT_NOT_CACHED)” in ajax post call

Here I am making a simple ajax post call from my asp.net page which shows following error on httpfox.
“Error loading content (NS_ERROR_DOCUMENT_NOT_CACHED)”
and

 error: function () { alert(arguments[2]); }

of my ajax call displays alert message as “Internal server error”

Here i am creating a JSON array and convering that json array to a JSON String and passing as a parameter to the Server side method.

here is my ajax call

 $('#btnResult').on('click', function () {
            var myObject = new Object();

            $("#<%=GridProjectDetails.ClientID %>  tr").each(function () {
                var id = $(this).find("input[name*='ID']").val();
                var locationcode = $(this).find("input[name*='TextLocationCode']").val();
                var Location = $(this).find("input[name*='TextLocation']").val();
                myObject.id = id;
                myObject.locationcode = locationcode;
                myObject.Location = Location;
            });

            var myString = JSON.stringify(myObject);
            alert(myString);
            var exportdata = myString;

            $.ajax({
                type: "POST",
                url: "Default.aspx/ExportToExcel",
                data: exportdata,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $("#Result").text(data.d);
                },
                error: function () { alert(arguments[2]); }
            });
        });
    });

and here is my server side code

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string ExportToExcel(string details)
    {

        return "Message : Success";
    }

Any Idea ? What’s happening here ?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try this:

$('#btnResult').on('click', function () {
        var myArray = [];

        $("#<%=GridProjectDetails.ClientID %>  tr").each(function () {
            var id = $(this).find("input[name*='ID']").val();
            var locationcode = $(this).find("input[name*='TextLocationCode']").val();
            var Location = $(this).find("input[name*='TextLocation']").val();
            var myObject = new Object();
            myObject.id = id;
            myObject.locationcode = locationcode;
            myObject.Location = Location;
            myArray.push(myObject);
        });

        var myString = JSON.stringify({details: JSON.stringify(myArray)});
        alert(myString);
        var exportdata = myString;

        $.ajax({
            type: "POST",
            url: "Default.aspx/ExportToExcel",
            data: exportdata,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $("#Result").text(data.d);
            },
            error: function () { alert(arguments[2]); }
        });
    });
});

Method 2

Thanks for all of your responses.

Today i got the answer after googling for more than 1 hr.

Things i learned is while sending json data using stringfy() method, in server side we need to define the parameter as object. not any other format like string/int/bla bla…..

Actually there was a mistake on my Server side parameter.I modified it from string to object and it worked for me. Here i have defined my modified answer.

        $('#btnResult').on('click', function () {

        var mydata = [];
        $("#<%=GridProjectDetails.ClientID %>  tr").each(function () {
            var myObject = new Object();
            var id = $(this).find("input[name*='ID']").val();
            var locationcode = $(this).find("input[name*='TextLocationCode']").val();
            var Location = $(this).find("input[name*='TextLocation']").val();
            myObject.id = id;
            myObject.locationcode = locationcode;
            myObject.Location = Location;
            mydata.push(myObject);
        });

        var myString = JSON.stringify({ details: JSON.stringify(mydata) });
        alert(myString);
        var exportdata = myString;

        $.ajax({
            type: "POST",
            url: "Default.aspx/ExportToExcel",
            data: exportdata,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $("#Result").text(data.d);
            },
            error: function () { alert(arguments[2]); }
        });
    });
});

and my server side method should be

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string ExportToExcel(object details)
{

    return "Message : Success";
}

Method 3

Send data using following method

 data: "{'details':" + myString "}",

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0