php - how to assign ajax variables for multiple buttons
I have an ajax code with php an SQL where I am trying to have three buttons change the name of a "scheduled" column depending on the value: yes (1) ,no (0),cancelled (2).
The scheduled button has data-target and data-role. once clicked, a modal appears containing three buttons (yes, no, cancelled) each with its own unique id to be used in ajax.
I have three functions each for the id names each also having a var of 0, 1 or 2.
The problem is that these variables do not trigger the update.
I simply have only 2 files: index.php for the main codes and connection.php for the database link and sql update.
table output
modal
database (ajax_test)
index.php (table)
<?php
$table = mysqli_query($connection ,'SELECT * FROM user');
while($row = mysqli_fetch_array($table)){ ?>
<tr id="<?php echo $row['id']; ?>">
<td data-target="email"><?php echo $row['email']; ?></td>
<td data-target="scheduled">
<?php
if ($row['scheduled'] == 1) {
?>
<a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">YES</a>
<?php
} else if ($row['scheduled'] == 0) {
?>
<a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">NO</a>
<?php
} else if ($row['scheduled'] == 2) {
?>
<a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">CANCELLED</a>
<?php } ?> </td> </tr> <?php } ?>
index.php (modal popup)
<!-- Modal-->
<div id="myModal" role="dialog">
<div >
<!-- Modal content-->
<div >
<div >
<button type="button" data-dismiss="modal">×</button>
</div>
<div >
<div >
<a href="#" id="update_yes" >YES</a><br>
<a href="#" id="update_no" >NO</a><br>
<a href="#" id="update_cancelled" >CANCEL</a>
</div>
</div>
</div>
</div>
index.php (ajax)
<script>
$(document).ready(function(){
$(document).on('click','a[data-role=update]',function(){
var id = $(this).data('id');
var scheduled = $('#'+id).children('td[data-target=scheduled]').text();
$('#scheduled').val(scheduled);
$('#userId').val(id);
$('#myModal').modal('toggle');
});
$('#update_no').click(function(){
var id = $('#userId').val();
var scheduled = $('0').val();
$.ajax({
url : 'connection.php',
method : 'post',
data : {scheduled: scheduled , id: id},
success : function(response){
// now update user record in table
$('#'+id).children('td[data-target=scheduled]').text(scheduled);
$('#myModal').modal('toggle');
}
});
});
$('#update_yes').click(function(){
var id = $('#userId').val();
var scheduled = $('1').val();
$.ajax({
url : 'connection.php',
method : 'post',
data : {scheduled: scheduled , id: id},
success : function(response){
// now update user record in table
$('#'+id).children('td[data-target=scheduled]').text(scheduled);
$('#myModal').modal('toggle');
}
});
});
$('#update_cancelled').click(function(){
var id = $('#userId').val();
var scheduled = $('2').val();
$.ajax({
url : 'connection.php',
method : 'post',
data : {scheduled: scheduled , id: id},
success : function(response){
// now update user record in table
$('#'+id).children('td[data-target=scheduled]').text(scheduled);
$('#myModal').modal('toggle');
} }); }); }); </script>
connection.php
<?php
$connection = mysqli_connect('localhost' , 'root' ,'' ,'ajax_test');
if(isset($_POST['id'])){
$id = $_POST['id'];
$scheduled = $_POST['scheduled'];
$result = mysqli_query($connection , "UPDATE user SET scheduled = '$scheduled' WHERE id='$id'");
}
?>
I would like to know what is wrong with the ajax functions, any help would be appreciated.
Answer
Solution:
First of all, you can simplify part of each of those to be simply
You are trying to get the id of the user by accessing them with:
You are not showing any elements with the id="userId"
Instead use:
Once you get the data-id value and the value from the modal, you can make your ajax call with box values and pass it to connection to update the db record.