Sending variable values via ajax in a table for specific rows

Question

I am stuck on an issue concerning my ajax request. The goal is to have a table with a number of rows each including a button or a link that can be clicked to send a value in order to update the database. After this is done, the button or link should not be clickable anymore and be replaced by pure text on that specific row.

EDIT: Thanks to @Sagar Arora we have the working code now to send a specific variable value for a specific row, but we need a way to replace the button with pure text so one can see that it has been clicked.

For testing, I have the following potatoe.php:

// Several table-rows before and after
// Problem is, the class "paid_button" also belongs to the other buttons in every other
// table row, but I want to adress them specifically to get the id of that row for the ajax

<td><button name="paid" value="<?php echo $id; ?>" class="paid_button">Bezahlt</button></td>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>                         
<script src="../js/global.js"></script>

In my global.js

$(document).on("click",".paid_button",function(){

var current_element = $(this);
$.ajax({
type: "POST",
url: "https://www.xxx",
data: { 'paid': current_element.attr("value")},
success: function(data){
 alert("ok"); 
 this.attr("disabled","disabled");//this will disable the clicked button
} 
});
});

updatePotatoe.php:

// the update database query and execution (is already doing fine)

$request_id = $_POST['request_id'];

echo "test $request_id test";

I am thankful for any help and tips!

check my answer .This will solve your problem.

Sagar Arora
– Sagar Arora

2017-04-04 15:27:10 +00:00
Commented Apr 4, 2017 at 15:27 — Sagar Arora
– Sagar Arora, Commented Apr 4, 2017 at 15:27

Sagar Arora · Accepted Answer · 2017-04-05 05:30:25Z

1

SO this in the following way:

<button name="paid" class="paid_button" value="$id" >Support</button>

$(document).on("click",".paid_button",function(){

var current_element = $(this);
  $.ajax({
    type: "POST",
    url: "https://www.xxx.php",
    data: { 'paid': current_element.attr("value")},
    success: function(data){
     alert("ok"); --> just for testing, I actually want to return values
     this.attr("disabled","disabled");//this will disable the clicked button
    } 
   });


});

edited Apr 5, 2017 at 5:30

answered Apr 4, 2017 at 15:21

Sagar Arora

1,7831 gold badge11 silver badges20 bronze badges

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

6 Comments

Franky2207 Over a year ago

Hi Sagar, thanks for your help! I edited my original post with your suggestion and I posted a little bit more of my code. It still doesn't work though, when I click the button nothing happens :(.

Sagar Arora Over a year ago

@Franky2207 just alert("something") under click code and also check in browser console is there some error please let me know?

Franky2207 Over a year ago

The console gave me the following error (no alert popping up): SyntaxError: missing variable name var this = $(this); However, I solved my original problem now, but I am still stuck on adressing the table rows uniquely - is that even possible? I edited my original post. Good night!

Franky2207 Over a year ago

Hey thank you very much, the code now works - also in my table :). Do you perhaps have an idea if it is possible to replace the button with pure text so that one can see the button has already been clicked?

Sagar Arora Over a year ago

@Franky2207 yes you either replace or change button html by like this. current_element.replace("<span>Button Clicked</span>"); or by change html like current_element.html("Button Clicked");

|

Collectives™ on Stack Overflow

Sending variable values via ajax in a table for specific rows

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related