Not Building jQuery ajax data correctly

Question

I have the following js code in my aspx page:

                    $.ajax({
                        type: 'POST',
                        url: '/Reporting/landing.aspx/UpdateUserReportingSettings',
                        data: "{ 'reportingSettings' :" + columns.join() + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        beforeSend: function (xhr, opts) {
                        },
                        success: function (data) {
                            window.top.location.href = "landing.aspx";
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Error Message' + thrownError);
                            alert('error' + xhr.responseText);
                       }
                    });

The columns are built up above this as so:

                    $('#currentColumnsList').each(function () {
                        // this is inner scope, in reference to the .phrase element
                        var column = '';
                        $(this).find('li').each(function () {
                            // cache jquery var
                            var current = $(this);
                            // check if our current li has children (sub elements)
                            // if it does, skip it
                            // ps, you can work with this by seeing if the first child
                            // is a UL with blank inside and odd your custom BLANK text
                            if (current.children().size() > 0) {
                                return true;
                            }
                            // add current text to our current phrase
                            column += (current.text() + ',');
                        });
                        // now that our current phrase is completely build we add it to our outer array
                        columns.push(column);
                    });

I then have a Web Method on code behind page as below:

    [WebMethod]
    public static void UpdateUserReportingSettings(string reportingSettings)
    {
        string columns = reportingSettings;

        //more code
    }

If I change the data line as below I can hit a breakpoint in the webmethod and the reportingSettings string will be test as expected:

data: "{ 'reportingSettings' : 'test' }",

If I alert columns.join() - I get the comma separated values something line columnA, columnB etc - what is the best way to get this passed acorss to the Code Behind WebMethod in the reportingSettings string?

score 1 · Accepted Answer · answered Apr 22 '14 at 11:56

1

You are missing ' symbol before columns.join(). It should be:

data: "{ 'reportingSettings' : '" + columns.join() + "'}"

answered Apr 22 '14 at 11:56

Zhivko Donev

441
3
2

score 1 · Answer 2 · edited May 23 '17 at 10:26

The best way depends on your personal flavor I guess. But first of all I would try to add a single quote before the closing double quote

data: "{ 'reportingSettings' : '" + columns.join() + "'}"

instead of

data: "{ 'reportingSettings' : " + columns.join() + "'}"

Alternatively you could pass the parameters as an array. Something like

data: "{ 'reportingSettings' : {'ColumnA','ColumnB'}}"

And capture them with an array input parameter on your method like

[WebMethod]
public static void UpdateUserReportingSettings(string[] reportingSettings)

An example can be found here : Link

score 0 · Answer 3 · answered Apr 22 '14 at 12:26

The problem with your js is that you've added the following line

contentType: "application/json; charset=utf-8",

The contentType in $.ajax is that the data that you send it to the server is of type "application/json". But you're not sending the json data to the server. So, $.ajax is not able to hit the web method's breakpoint.

To convert your data to JSON, you've to explicitly make your data of json type.

var data = { reportingSettings: "" };

$.ajax({
        type: 'POST',
        url: '/Reporting/landing.aspx/UpdateUserReportingSettings',
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function (xhr, opts) {
        },
        success: function (data) {
            window.top.location.href = "landing.aspx";
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error Message' + thrownError);
            alert('error' + xhr.responseText);
       }
    });

Give it a try.

Hope this helps.

Not Building jQuery ajax data correctly

3 Answers3