Question

I have a table with 3 rows. Each row has 3 td. The first 2 td of each row have default values. The last td of each row has no value, but an attribute called letter, and a class called loader. Above my table I have a button. What I am trying to do is as follows. When the button is clicked, an ajax call is send for each td that have the loader class. The ajaxData send through the call should be the value of the attribute letter. I know how to make an ajax call, but not to launch it for all element of a class at the same time. Have a look at the jsFiddle to understand better what I am looking for. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.

http://jsfiddle.net/sp6JA/

My HTML:

<input type="submit" id="load" value="click here to load last td with its attribute called letter" />

<table>
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td class="loader" letter="A"></td>
  </tr>
    <tr>
    <td>td4</td>
    <td>td5</td>
    <td class="loader" letter="Q"></td>
  </tr>
    <tr>
    <td>td7</td>
    <td>td8</td>
    <td class="loader" letter="M"></td>
  </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

My JS:

$(document).on({
    click: function() {

        var ajaxData = "";

        $.ajax({
            type: "POST",
            url: "myfile.php",
            data: ajaxData,
            success: function(return) {

                $('.loader').html(return);

            }
        });

    }

}, "#load");​

Answer 1

If you want to send individual Ajax requests, one per cell, and put the responses back into the appropriate cells, then you can use an .each() loop:

$(document).on({
    click: function() {

        $(".loader").each(function() {
           var $this = $(this),
               ajaxData = "";

           $.ajax({
               type: "POST",
               url: "myfile.php",
               data: ajaxData,
               success: function(return) {
                  $this.html(return);
               }
           });
        });
    }

}, "#load");​

Note that within the loop you need to save a reference to the current element so that you can update it from the Ajax success handler.