CODEWITHSUNDEEP
htmljquery
None
None

Reputation: 5670

Syntax error in jquery ajax call

My HTML is like this 

<tbody>
    <tr>
        <td ><img src="" alt="close" /></td>
        <td><input type="hidden" name="addproducts" value="141420">141420</td>
        <td class="prd"><strong><a href=""></a></strong></td>
        <td><a rel="prettyPhoto" href=""><img src="" alt="Product"></a></td> 
    </tr>
    <tr>
        <td ><img src="" alt="close" /></td>
        <td><input type="hidden" name="addproducts" value="1213143">1213143</td>
        <td class="prd"><strong><a href=""></a></strong></td>
        <td><a rel="prettyPhoto" href=""><img src="" alt="Product"></a></td> 
    </tr>
    <tr>
        <td ><img src="" alt="close" /></td>
        <td><input type="hidden" name="addproducts" value="242424">242424</td>
        <td class="prd"><strong><a href=""></a></strong></td>
        <td><a rel="prettyPhoto" href=""><img src="" alt="Product"></a></td> 
    </tr>
</tbody>

I want select all hidden inputs with name addproducts from this and add to an ajax call. The problem is that I can't predict how many elements will be there before the code execute. The ajax url i am trying to make will be like this

http://mydomain.com?addproducts=141420&q141420=16&addproducts=X945X2MG&qX945X2MG=1&addproducts=8382355&q8382355=10&addproducts=146353&q146353=3

my usual code for specific parameters in url will be some thing like this

  ajaxManager.add(({
    type: 'GET', url: '/ajaxhandler', data: { addproducts: X945X2MG,qX945X2MG:1}

but here i can't use this because of unpredictable parameters. any way i had made some try which ended up in syntax error.code is this

  ajaxManager.add(({
            $(this).parent().parent().find(".antal").find("input:hidden[name='addproducts']").map(function () {
                 return
            type: 'GET', data: {addproducts:this.value,'&q'+$(this).val():$(this).next().val()}

EDIT:from Alnitak's post i have tried to edit this . new code

 var data = $(this).parent().parent().find(".antal")
          .find("input:hidden[name='addproducts']").map(function () {
                 return
               { addproducts: this.value}

                data['q' + $(this).val()] = $(this).next().val();
                   }).get().join(',')

  ajaxManager.add(({
            type: 'GET', data: data

but unfortunatedly it ended up my ajax call comes like this

http://mydomain.com?_=1365768440633

I am sure I have made some thing terribly wrong.Cany one help me on this

Upvotes: -1

Views: 163

Answers (1)

Alnitak
Alnitak

Reputation: 340055

You should create an object literal with the known keys, and then use obj[key] syntax for the variable keys:

var data = { 'addproducts[]': [] };

$(this).parent().parent().find(".antal")
       .find("input:hidden[name='addproducts']")
       .each(function () {
            data['addproducts[]'].push(this.value);
            data['q' + this.value] = $(this).next().val();
       });

$.ajax({
    ...,
    data: data
});

Note the use of addproducts[] to allow encoding of an array of values for that particular parameter. Note that there's not actually a defined standard for passing multiple values with the same key for x-www-form-urlencoded data, but this works with PHP. You should consider changing the way your products are added - perhaps a comma-separated list?

Upvotes: 2

Related Questions