Update multiple HTML table rows using AJAX

Question

I have a table that shows information pulled from a PHP script like so:

<tr class="online" id="0011e31xxxxx">
  <td><input type="checkbox" name="mac" value="0011e31xxxxx"></td>
  <td>1234567</td>
  <td>Modelnumber</td>
  <td>0011.e31x.xxxx</td>
  <td>10.x.x.x</td>
  <td>UBR4</td>
  <td>online</td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','resetubr');"><img src="/own/v2.2/images/reset.gif"></a></td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','resetsnmp');"><img src="/own/v2.2/images/reset.gif"></a></td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','refresh');"><img src="/own/v2.2/images/icone_refresh.png"></a></td>
</tr>

The 3 getInfo calls links are as follow and work perfectly:

<script>
function getInfo(id,adresseip,ubr,action) {
        var rowid = "tr#" + id;
        $.ajax({
            type: "GET",
            cache: false,
            url: 'index.php',
            data: "macaddress=" + id + "&ubr=" + ubr + "&adresseip=" + adresseip + "&action=" + action,
            beforeSend: function() {
                $(rowid).addClass("loading");
            },
            success: function(data) {
                $(rowid).replaceWith(data);
            }
        });
}
</script>

What I am trying to do is use the checkbox available at the beginning of each <tr> in order to generate some kind of loop to run one of the three links seen on each row.

Lets say I check 3 boxes (value 123, 234 and 345), I need the <tr id=123><tr id=234> and <tr id=345> to update their respective lines only while the rest of the data remains intact.

Is it possible to make such a loop to call the AJAX function to be run as many times as there are selected checkboxes? Or can the AJAX function iterate over each selected checkbox in order to update them one after the other?

Thank you

I know this is not your solution, but in the meantime I managed to get this to work: function loopForm(action) { for (var i = 0; i < formulaire.elements.length; i++ ) { if (formulaire.elements[i].type == 'checkbox') { if (formulaire.elements[i].checked == true) { getInfo(formulaire.elements[i].value,'','',action); } } } } but it works only once on Chrome, and after the first time button calling the function doesn't work anymore. It works fine on IE though. I will test your replies tomorrow when I get back to work. — vizi0n
– vizi0n, Commented Sep 20, 2016 at 20:39

Community · Accepted Answer · 2017-05-23 11:51:47Z

1

Please Search on google then try... if you don't get any answer then raise the Question...

Check this Link..

$('#TableID > tr').each(function() {
    var postData = {
    'FirstName':$(this).find('#FirstName').val(),
    'SurName':$(this).find('#Surname').val()
    };
    $.ajax({
    type: "POST",
    cache: false, 
    url: "WuFoo.aspx",
    data: postData ,
    success: success
    });
 });

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Sep 20, 2016 at 18:26

Karthikeyan Sekar

3333 silver badges13 bronze badges

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

Comments

Matti Price · Accepted Answer · 2016-09-20 18:26:55Z

0

You can get all checked check boxes with JQuery by doing something like

$("input[type=checkbox]:checked")

You can then use .each to iterate over them and update each appropriate row.

That code should go in your success: function of your ajax call.

Alternately you can use that same JQuery code to get the checked boxes, and then selected the <tr> in the .each and use that data to make an Ajax call.

answered Sep 20, 2016 at 18:26

Matti Price

3,54118 silver badges32 bronze badges

Collectives™ on Stack Overflow

Update multiple HTML table rows using AJAX

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related