Jquery / AJAX update table on link / button click

Question

I have a table populated from MySQL, I'm trying to update values by a click of a button, but I'm not really sure where to start.

I am just getting into Jquery / AJAX, and haven't really figured it out quite yet so don't be too harsh on me.

In my example I have a HTML table that looks like this:

ID   Status      Set Status
1    Pending     Yes / No
2    Pending     Yes / No
3    Pending     Yes / No
4    Pending     Yes / No
5    Pending     Yes / No

Now when I click on ID 3 Yes, MySQL entry with ID 3 should be updated to Yes

My question is, how do I find out which Yes / No of which row was clicked ? How do I pass that to the processing script via AJAX ?

My Yes / No Links have the ID of the entry attached like so:

<a href="status.php?set=yes&id=3">

I'm fine with the PHP part I think, my problem is getting the correct data to it.

//Edit, this is the table:

<table class="table table-striped table-bordered table-hover datatable">
       <thead>
         <tr>
           <th><div class="checkbox"><input type="checkbox" /></div></th>
           <th>ID</th>
           <th>Status</th>
           <th>Set Status</th>
         </tr>
       </thead>
<tbody>
<?php 
      $query=mysql_query( "select * from test");
      if(mysql_num_rows($query)>0){
      while($data=mysql_fetch_array($query,1)){
?>
<tr>
  <td><div class="checkbox"><input type="checkbox" /></div></td> 
  <td><?php echo $data['id']; ?></td>
  <td>
  <?php 
  if($data['status'] == 'pending') 
  { 
       echo "<span class=\"label label-warning\">Pending</span>";
  } 
  elseif($data['status'] == 'yes') 
  { 
      echo "<span class=\"label label-success\">Yes</span>";
  } 
  elseif($data['status'] == 'no') 
  { 
    echo "<span class=\"label label-danger\">No</span>";
  } 
  ?></td>
  <td>
  <?php 
  if($data['status'] == 'pending') 
  { 
      echo "<a href=\"" . "status?set=yes&id=" . $data['id'] ."\" class=\"btn btn-success btn-xs\"><i class=\"icon-ok-sign\"></i> Yes</a>" . " <a href=\"" . "status?set=no&id=" . $data['id'] ."\" class=\"btn btn-danger btn-xs\"><i class=\"icon-remove\"></i>No</a>"; 
   } ?>
   </td>
   </tr>
   <?php 
          }
     } ?>
   </tbody>
   </table>

/// EDIT 2

Utilizing user574632's answer, I got the simple AJAX GET to work as to updating the table, now I'm trying to get some feedback posted back to the user and hiding the 2 buttons.

status.php

$id = $_GET['id'];
$status = $_GET['set'];

if($_GET['set'] == 'yes') {
$result = mysql_query("UPDATE test SET status='yes' WHERE id='$id'") 
or die(mysql_error()); 
echo "Status Changed to Yes";
exit();  }

if($_GET['set'] == 'no') {
$result = mysql_query("UPDATE test SET status='no' WHERE id='$id'") 
or die(mysql_error()); 
echo "Status Changed to No";
exit();  }

Steve · Accepted Answer · 2013-09-20 16:17:16Z

1

Whilst you probably want to display some kind of feedback to the user, this simplest way to acheive this would be like so:

$('#tableid a').click(function(){
    event.preventDefault();
    var href = $(this).attr('href');
    $.get( href );
})

provided the html table has an id='tableid'.

What this does is stop the link being followed, then grap the href attribute, and perform a get request via ajax.

You would probably want to indicate success/fail etc, but without seeing your status.php i cant elaborate

EDIT per comment: To get data back from the php file:

 $('#tableid a').click(function(){
    event.preventDefault();
    var href = $(this).attr('href');

    $.get( href, function( data ) {
        //append data to a div, hide buttons etc.
        //alert used as example
        alert( data );
    });
 });

Y

edited Sep 20, 2013 at 16:17

answered Sep 20, 2013 at 11:23

Steve

20.5k5 gold badges47 silver badges71 bronze badges

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

4 Comments

Marius Prollak Over a year ago

Thanks, this was really simple, setting the status works fine, as you've already pointed out I do want to give some feedback to the user though aswell as hide both links after one of them was clicked. I updated the original question with my status.php which works, just gives no feedback, could you take a look and suggest what to do ? I tried with a simple echo in the status.php but that didn't give any response.

Steve Over a year ago

@MariusProllak Amended my answer with further details.

Marius Prollak Over a year ago

Thank you, that works, I understand that $(this).hide(); would hide the button / link that was clicked, how would I hide both of them ? Or maybe even better, replace the whole <td> cell with the response from status.php

Steve Over a year ago

@MariusProllak replace the alert with: $(this).parent().html('<p>' + data + '</p>');

Mangesh Parte · Accepted Answer · 2013-09-20 11:21:10Z

0

Added class to your anchor tag so it will look like <a class="mylink" href="status.php?set=yes&id=3">

Now add a jquery to initiate ajax request when you click on the link. This is how your jquery should be.

jQuery(document).ready(function($){
    $(".mylink").click(function(e) {
        $.post($(this).attr(),{},function(res){
            console.log(res);
        });
        return false;
    });
});

answered Sep 20, 2013 at 11:21

Mangesh Parte

2,1771 gold badge13 silver badges16 bronze badges

Collectives™ on Stack Overflow

Jquery / AJAX update table on link / button click

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related