prevent postBack - jquery/javascript

Question

I have a gridview with 2 template buttons: (1) Approve and (2) Rejected..When one of the buttons is clicked the status of the row will change to either Approve or Rejected and update the 'Status' field in the database. I am using this in money transactions.

What i want to happen is to prevent the page to postback when either of the button is clicked. How can i do this in jquery? How can i get the status of the row from the database then pass it to jquery so that when i click the button it will not post back( so that the payment of a customer will only be added once to the currenct balance of the merchant ).

Please help, I have no idea on how to do this...

Answer 1

You can do it with Ajax . To post some data without postback.

Answer 2

When render a table row, you add some id to row like this

<table>
  <tr data-id="1">
    <td>Name</td>
    <td><button class="approve">Aprove</button><button class="reject">Reject</button></td>
  </tr>
</table>

Then use jquery, ajax to catch button press

$('.approve').click(function(){
   var id = $(this).parents('tr').data('id');/// Here is your id
   $.post('/approve/',{id:id}, function(data){

   })
});