Repetitive ajax requests over table elements

Question

I'm working on a script that's supposed to go over a table (see below) of users, complete with user IDs, and make a bunch of API requests which will update an online client database with arbitrary metadata about those users.

Here's the table:

<table id="msisdns_to_process">
        <tr class="header">
            <th>phone</th>
            <th>First</th>
            <th>Last</th>
            <th>Favorite Book</th>
        </tr>
        <tr subid="4e8d1d81e89f75ffc1fd71b1">
            <td class="unprocessed" mdid="4eb838400cf2384c4bd32ba5">18005882300</td>
            <td class="unprocessed" mdid="4eb838400cf2384b3ac22ba5">Quentin</td>
            <td class="unprocessed" mdid="4eb838480cf2384b3ac22ba6">Tarantino</td>
            <td class="unprocessed" mdid="4ef3c054696e84d9342c46c1">Naked Lunch</td>
        </tr>
        <tr subid="4e8d92560cf24f1d7e67de28">
            <td class="unprocessed" mdid="4eb838400cf2384c4bd32ba5">18005882300</td>
            <td class="unprocessed" mdid="4eb838400cf2384b3ac22ba5">Wes</td>
            <td class="unprocessed" mdid="4eb838480cf2384b3ac22ba6">Anderson</td>
            <td class="unprocessed" mdid="4ef3c054696e84d9342c46c1">The Ticket That Exploded</td>
        </tr>
        <tr subid="4e8eacac2d6afa11cbdece8a">
            <td class="unprocessed" mdid="4eb838400cf2384c4bd32ba5">18005882300</td>
            <td class="unprocessed" mdid="4eb838400cf2384b3ac22ba5">David</td>
            <td class="unprocessed" mdid="4eb838480cf2384b3ac22ba6">Cronenberg</td>
            <td class="unprocessed" mdid="4ef3c054696e84d9342c46c1">Junky</td>
        </tr>
</table>

So what I need to do is have a button press that will iterate over all of the non-header cells, making an API call that uses then subid attribute of the row, the mdid attribute of the cell and the value of the cell. Something like:

http://api.foo.bar/update/[subid]
POST payload: {"id":"[mdid]","value":"[cell text]"}

I'm fairly new to jQuery, so I'm probably getting tripped up on using the right selector, but here's what I have:

$("button#process_md").click(function(){
        $("table#msisdns_to_process tr").each(function(){
                var subid = this.attr("subid");
                $("td.unprocessed").each(function(){
                        var mdid = this.attr("mdid");
                        var cont = this.contents();
                        $.ajax("/update"+subid,
                        {
                            data: { 'id': mdid,
                            'value':cont
                            },
                            headers: {'Accept': 'application/json'},
                            type: 'POST',
                            statusCode: {
                                200: function() {
                                    $(this).addClass("processed");
                                    $(this).removeClass("unprocessed");
                                }

                            }
                        }
        });     
});

...but I'm getting no result. I think, again, I'm doing the selection or iteration wrong. Any thoughts?

i guess you can find what you want, [here](http://stackoverflow.com/questions/376081/how-to-get-a-table-cell-value-using-jquery). — Sunmit Girme, May 31 '12 at 05:56

score 0 · Answer 1 · answered May 31 '12 at 06:55

Try after replacing your code with code below, i have fixed few selectors which is required to make that code work.

$(document).ready(function() {

    $("button#process_md").click(function() {
        $("table#msisdns_to_process tr[subid]").each(function() {
            var subid = $(this).attr("subid");
            $("td.unprocessed").each(function() {
                var mdid = $(this).attr("mdid");
                var cont = $(this).html();
              //Ajax call go here 

            });
        });

    });

});

It is recommended to use debugger (firebug,chrome) to see if your code is working, you can use alerts and console.log() to see if your code work.

score 0 · Accepted Answer · answered May 31 '12 at 07:13

There's a couple of general errors in your code that.

1) You're treating 'this' as a jQuery object when it's actually a DOM element. So this:

var mdid = this.attr("mdid");

should be:

var mdid = $(this).attr("mdid");

2) You can't pass '$(selector).contents()' in as a parameter to the ajax call as it throws an exception. You probably meant

$(selector).text()

3) The keyword 'this' is not preserved through callback functions unless you explicitly use the jQuery proxy function. So the function for success will not have the correct scope for 'this'. Please see $.proxy in the code below.

Code below is reformatted to be slightly more legible.

function    setProcessed(data){
    $(this).addClass("processed");
    $(this).removeClass("unprocessed");
}

function processRow(){

    var subid = $(this).attr("subid");

    try{
        $(this).find("td.unprocessed").each(function(){

            var mdid = $(this).attr("mdid");
            var cont = $(this).text();

            var params = {};
            params.id = mdid;
            params.value = cont;

            $.ajax({
                url: "/update" + subid,
                data: params,
                type: 'POST',
                success:$.proxy(this, setProcessed),
            });
        });
    }
    catch(error){
        alert("error caught in processRow: " + error);
    }
}


function processTable(){
    $("table#msisdns_to_process tr").each(processRow);
}

$("button#process_md").click(processTable);

However I should note your page will almost certainly not work as well as you would hope using this approach. Basically most browsers will only have two connections open to a server at once, and so the Ajax requests will be massively queued and delayed, potentially to the extent that they time out.

You would be much better off finding a significant number of row that need processing to the server, passing them all in one request, and then getting the data back in request.

Repetitive ajax requests over table elements

2 Answers2