Pass an array through jquery ajax

Question

I have jquery generating a list item with a couple of input fields when someone clicks on a particular link. The link looks like this:

<a href="#" id="add_sublink" data-sublink_count = "0">Click Here to add more sub links</a>

The jquery looks like this

$('#add_sublink').live("click", function(){

    var count  = $(this).attr('data-sublink_count');
    var form = "<li>Link Name:<br />" +
           "<input type='text' size = '40' id='sublinkname' name='sub_link_name_" + count + "' value=''/><br />" +
           "Link URL:<br />" +
           "<input type='text' size = '40' id='sublinkurl' name='sub_link_url_" + count + "' value=''/>" +            
           "</li>";


        $('#sublink_list').append(form);
        var newcount = ( Number(count) + Number(1) );
        $(this).attr('data-sublink_count', newcount)

    return false;                       

});

This is the html that it generates

<li>Link Name:<br>
<input type="text" value="" name="sub_link_name_0" id="sublinkname" size="40"><br>
Link URL:<br>
<input type="text" value="" name="sub_link_url_0" id="sublinkurl" size="40"><br>
</li>

Each time they click on the link a new list item is added. I am also counting them and putting the count on the name so each input item is unique.

I may have 1 or more list items with the input values in them. When a submit button is clicked then I am collecting the information with jquery and trying to send the information through ajax.

    $('.save_link').live('click', function() {
    var linkID = $(this).attr('data-link_id');

        $('#sublink_list').children().each(function(index) {
            var this_sublink_name = $(this).find('#sublinkname').val();
            var this_sublinkurl = $(this).find('#sublinkurl').val();        

            sub_array[index]['name'] = this_sublink_name;
            sub_array[index]['url'] = this_sublinkurl;                          

            var index = ( Number(index) + Number(1) );

        }); 

        //send the info
        $.ajax({
            url: 'update_link.php', 

            data: jQuery.extend(
                {linkID: linkID},                                           
                {sub_array: sub_array}),        
            type: 'POST',    
            success: function(results) {        
                if (results == "error"){
                    //then display an error                                                     
                }else{                          
                    //display success                                                       
                }                                           
            }
        });


return false;
});

Everything works fine, but the ajax is not sending the array sub_array correctly.

I have read other places that suggest sending the array like this

{'sub_array[index][name]': 'value'} //value would be replaced with the actual value

But since the list items are dynamic, I don't know how many there will be, nor do I know the value.

I have also tried sending the data like this:

data: 'linkID=' + linkID +                                          
      '&sub_array=' + sub_array,

But it also did not work.

In this case, what is the best way to send a multi-dimensional array with an unknown number of array items, and unknown values?

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

Send subarray as JSON string to the backend, and decode it there as an array, try any JSON javascript library, http://www.json.org/

Another related question:

Why doesn't jquery turn my array into a json string before sending to asp.net web method?

edited May 23 '17 at 10:33

Community

1
1

answered Mar 13 '11 at 19:56

DhruvPathak

42,059
16
116
175

How would I convert it to JSON? – Jason Mar 13 '11 at 19:57
and here is a php example to convert it back to array/object http://php.net/manual/en/function.json-decode.php , you can decode it on similar lines in watever backend you have – DhruvPathak Mar 13 '11 at 20:01

score 0 · Answer 2 · answered Mar 13 '11 at 20:00

0

I usually use the jQuery plugin AjaxForm which automatically sends all the data in a form to the ajax "endpoint". For this, you only need to do something like:

$('#yourForm').ajaxForm();

Which can be customized to your needs, of course.

answered Mar 13 '11 at 20:00

fresskoma

25,481
10
85
128

Pass an array through jquery ajax

2 Answers2