jQuery.ajax "data" parameter syntax

Question

I am trying to pass the contents of a javascript variable to the server for processing. I can pass static strings no problem but when I pass a variable containing a string, the WebMethod is not called. Here is my code: (Client)

function expand(checkbox) 
{
    var selectedrow = checkbox.parentNode.parentNode;
    var rowindex = selectedrow.rowIndex;
    var parent = document.getElementById("parentTable");
    var NextRow = parent.rows[rowindex + 1];

    var cols = selectedrow.cells[1];
    var ID = cols.firstElementChild.attributes.value;


    $.ajax({
        type: "post",
        url: "Playground.aspx/childBind",
        data: "{sendData: ID}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) { alert("successful!" + result.d); }
    })

    NextRow.style.visibility = "visible";
}

(Server)

[WebMethod]
    public static string childBind(string sendData)
    {
        return String.Format("Hello");
    }

Now, if I were to try data: "{sendData: "ok"}", the WebMethod gets called and returns a response. How is my syntax wrong?

Solution 1

You were sending a string instead of an object ("{sendData: ID}" instead of {sendData: ID}). And the data you were sending wasn't JSON. So remove the contentType line and change the data line. You should re-write this as:

$.ajax({
    type: "post",
    url: "Playground.aspx/childBind",
    data: {sendData: ID},
    dataType: "json",
    success: function (result) { alert("successful!" + result.d); }
})

You can also write this, if you want to send JSON:

$.ajax({
    type: "post",
    url: "Playground.aspx/childBind",
    data: $.getJSON({sendData: ID}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (result) { alert("successful!" + result.d); }
})

Solution 2

You don't have to pass it as a string. Since ID is a javascript variable you have to pass its value. When you pass data as "{sendData: ID}" it will not pass the value of ID.

Try this

data: { sendData: ID }

Comments

[ShankarSangoli]

@Seraph812 - Hope this helped you.

[Seraph812]

That doesn't seem to work although it did allow me to catch an error elsewhere. After a small modification in the javascript, I am now storing the correct value. var ID = cols.firstElementChild.defaultValue; However, the server-side web method is still not being called. I noticed if I comment out the "contentType" & "dataType" lines, the "success" statement on the client side is called. "ID" holds a string value from a hiddenfield that is actually a GUID (but is a string when stored.) The server-side webmethod expects a string.

[ShankarSangoli]

What modification you did? You mean you are still passing ` data: "{sendData: ID}"` and it works?

[Seraph812]

no. I fixed that AND var ID = cols.firstElementChild.defaultValue; Still doesn't work.

[ShankarSangoli]

Did my solution helped you in any way? If yes, then I think you should mark this as an answer. If you have a different problem then you should create another question.

[Seraph812]

Well, no, the question still stands because it isn't working. The server-side WebMethod isn't being called when passing a variable instead of a string literal.

[Seraph812]

It seems like right data is in place now but the server-side web method is still not being called. I noticed if I comment out the "contentType" & "dataType" lines, the "success" statement on the client side is called. "ID" holds a string value from a hiddenfield that is actually a GUID (but is a string when stored.) The server-side webmethod expects a string.

[Seraph812]

It seems like right data is in place now but the server-side web method is still not being called. I noticed if I comment out the "contentType" & "dataType" lines, the "success" statement on the client side is called. "ID" holds a string value from a hiddenfield that is actually a GUID (but is a string when stored.) The server-side webmethod expects a string.

[Pierre-Luc Champigny]

You should remove the contentType line since you are not sending the data as json (you just receive data back as json) OR you can add jQuery.getJSON() around your data