AJAX array stopping AJAX call

Question

Please see the AJAX code below:

function Save()
        {

            var checkBoxArray = $("input:checkbox:checked").map(function () {
                return this.id
            }).get();

            var str = JSON.stringify(checkBoxArray);
                var user = document.getElementById("ctl00_ContentPlaceHolder1_lstUsers");
                $.ajax({
                    type: "POST",
                    url: "frmReview.aspx/AllocateReview",
                    data: '{strUser: "' + user.value + '", strCheckBoxes: ' + str + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                success: OnSuccess(),
                async: false,
                failure: function (response) {
                    alert('There was a problem allocating the reviews')
                }
                });

                function OnSuccess() {
                    return function (response) {
                        alert("The reviews where allocated successfully");
                    }
                }
     }

and the server side code below:

<System.Web.Services.WebMethod()> _
    Public Shared Sub AllocateReview(ByVal strUser As String, ByVal strCheckBoxes As String)
       msgbox("got here")
    End Sub

I put a breakpoint on the messagebox (server side). However, it is not reached. It is reached if I do not pass str (which is an array) ie I exclude it on the client side and server side. Why is the array not passed to the server? There is no error - it is as if nothing happens.

Answer 1

In a jQuery $.ajax() call, the data property should be either

• a URL-style query string ("foo=bar&hello=world");
• a plain object ( { foo: "bar", hello: "world" } );

• an array of objects with name and value properties

   [ { name: "foo", value: "bar" }, { name: "hello", value: "world" }] 

Your code is building a JSON string, and I don't think it should be.