JQuery. Send ajax query for each row in table

Question

I have found many answers about my problem, but problem not resolved

I have table, with data, example:

<table>
    <tr>
        <td class="editable"> <a id="query" href="#"> Data 1 </a> </td>
        <td class="editable"> <a id="text"  href="#"> Data 2 </a> </td>
        <td class="editable"> <a id="foo"   href="#"> Data 3 </a> </td>
        <td class="editable"> <a id="bar"   href="#"> Data 4 </a> </td>
    </tr>
    <tr>
        <td class="editable"> <a id="query" href="#"> Data 1 </a> </td>
        <td class="editable"> <a id="text"  href="#"> Data 2 </a> </td>
        <td class="editable"> <a id="foo"   href="#"> Data 3 </a> </td>
        <td class="editable"> <a id="bar"   href="#"> Data 4 </a> </td>
    </tr>
</table>

I need:

For each row in this table, get values of links with id="query" and id="foo" in current row and send ajax query

I try to do this:

    $("#detect_rel").click(function(){
        $('tr').each(function() {
            // ajax to: ajax.php?query=xxxx&data=&xxxxx
        });
    });

But i cant get inner text of <a id="query"... and <a id="foo"... both, for current row

I tried something like this:

$('tr').each(function() {
    var cols = $('.1, .2', this);
    // do something with cols
});

But it doens't help, because i cant (mb not enough js knowledges) get inner text of <a id="query"... and <a id="foo"... both, for current row

Pseudocode:

get row

get value of link in column_one and column_two

send ajax query

get next row

etc

NOTE: <a href... at each cell, needed for 'bootstrap x editable', and cuz of it, i need use id at each link

PROBLEM RESOLVED, thanks guys

Be aware that your HTML is invalid; IDs are meant to be unique across the entire page. Consider converting them to classes instead. — Adrian Wragg
– Adrian Wragg, Commented Jul 9, 2013 at 23:40
Yeah, i know, its cuz of "bootstrap x editable", he use "id" as "name" of element, like <input type="text" name="name" Sorry, i can't explain it more correctly, cuz of my bad engl :D But u can look "bootstrap x editable" documentation for understanding, why i do like this — Виктор Новиков
– Виктор Новиков, Commented Jul 9, 2013 at 23:49

jrthib · Accepted Answer · 2013-07-09 23:44:20Z

5

In HTML ID's must be unique whereas classes can occur multiple times in the page. To do what you ask, your HTML should look like this:

<table>
    <tr>
        <td class="editable"> <a class="query" href="#"> Data 1 </a> </td>
        <td class="editable"> <a class="text"  href="#"> Data 2 </a> </td>
        <td class="editable"> <a class="foo"   href="#"> Data 3 </a> </td>
        <td class="editable"> <a class="bar"   href="#"> Data 4 </a> </td>
    </tr>
    <tr>
        <td class="editable"> <a class="query" href="#"> Data 1 </a> </td>
        <td class="editable"> <a class="text"  href="#"> Data 2 </a> </td>
        <td class="editable"> <a class="foo"   href="#"> Data 3 </a> </td>
        <td class="editable"> <a class="bar"   href="#"> Data 4 </a> </td>
    </tr>
</table>

And your jQuery code should do something like this:

$('#detect_rel').click(function() {
    $('tr').each(function(i, el) {
        var query = $(el).children('td').children('.query').text();
        var text = $(el).children('td').children('.text').text();
        //$.ajax (do your AJAX call here using values of query and text
    });
});

I tested this code on JSFiddle just now and it works.

Demo: http://jsfiddle.net/Pt2Vd/

edited Jul 9, 2013 at 23:44

answered Jul 9, 2013 at 23:38

jrthib

1,3191 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Виктор Новиков Over a year ago

Yes, this code workin. Really big thx ;) But i a little bit correct it: $(el).children('.editable').children('.query').text(); and only after this, it's workin

jrthib Over a year ago

I just made some edits and tested it on JSFiddle. Let me know how it goes!

Collectives™ on Stack Overflow

JQuery. Send ajax query for each row in table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related