php variable value in a while loop for each row - php

Question

I have a cancel button on each row of a table that is autopopulated in a while loop.
The $id resolves correctly but when I click on the cancel button all the active rows are modified. I only want the row that is concerned to be modified.
So in a while loop in php:
<tr id="dataTable">
<td id="nom"><?php echo $nom;?></td>
<td id="statut"><?php echo $statut;?> </td>
<td id="<?php echo $id;?>" >
<a id="<?php echo $id;?>" href="#" title="Annuler"
onclick="document.write('<?php
$queryannuler = "UPDATE wp_RDV SET statut = 'Testy' WHERE id_RDV = '".$id."'";
$resultatannuler = $connexion->query($queryannuler); ?>'); location.reload(); 'return false';">Annuler</a>
</td>
</tr>
My problem is the 'statut' column is being updated for all the rows and not just the row where I click on the cancel button. Thanks if you can help.
UPDATE
I have tried to implement your different advices by using ajax. It's tough. I didn't specify in the original post that I am using a Wordpress framework. So I have modified #ssurli code to take into account wordpress
<td id="<?php echo $id;?>" >
<a id="<?php echo $id;?>" class="button delete" href="javascript:void(0)" title="Annuler"
onclick="cancelRecord('<?php echo $id; ?>')">Annuler</a>
</td>
<script>
function cancelRecord(id) {
jQuery.ajax({
type: 'post',
url: ajaxurl,
data: {id:id},
action: 'delete_rdv',
success: function(response) {
return;
},
error: function(jqXHR, status, error) {
alert('Error: Please refresh the page');
return;
},
complete: function() {
console.log('The function is hooked up');
location.reload();
console.log('The function is hooked up2');
}
});
}
AND in my functions.php file
add_action( 'wp_ajax_delete_rdv', 'delete_rdv' );
add_action( 'wp_ajax_nopriv_delete_rdv', 'delete_rdv' );
function delete_rdv() {
$queryannuler = "UPDATE wp_RDV SET statut = 'Testy' WHERE id_RDV = '".$_POST['id']."'";
$resultatannuler = $connexion->query($queryannuler); //include connection file above
return $resultatannuler;
}
I'm stuck on the very first hurdle.
The console is sending an error message :
admin.php?page=plugin-voc:1 Uncaught ReferenceError: cancelRecord is not defined
But my cancelRecord function is right after my button call so I don't understand this error.

Answer 1

Here the working code.
Update your table row as below:
<tr id="dataTable">
<td id="nom"><?php echo $nom;?></td>
<td id="statut"><?php echo $statut;?> </td>
<td id="<?php echo $id;?>" >
<a id="<?php echo $id;?>" href="javascript:void(0)" title="Annuler"
onclick="cancelRecord('<?php echo $id; ?>')">Annuler</a>
</td>
</tr>
Add below js scripts to bottom of your html page. Include jquery cdn file only if not add to page already.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
function cancelRecord(id) {
$.ajax({
type: 'post',
url: 'cancel.php', //use actual directory path, if not kept in root directory
data: {id:id},
success: function(response) {
return;
},
error: function(jqXHR, status, error) {
alert('Error: Please refresh the page');
return;
},
complete: function() {
location.reload();
}
});
}
</script>
Add PHP file having PHP code having DB query responsible for cancelling the record.
//cancel.php
<?php
$queryannuler = "UPDATE wp_RDV SET statut = 'Testy' WHERE id_RDV = '".$_POST['id']."'";
$resultatannuler = $connexion->query($queryannuler); //include connection file above
return $resultatannuler;
Hope it will work for you. Feel free if you have any further query.

Answer 2

This was the original html request
<td id="<?php echo $id;?>" >
<a id="<?php echo $id;?>" class="button delete" href="javascript:void(0)" title="Annuler"
onclick="cancelRecord('<?php echo $id; ?>')">Annuler</a>
The javascript function was not defined when I put it in the same file as the php. I moved into the plugin index.js file and most importantly I moved this line:
action: 'delete_rdv',
into data {}
data: {
action: 'delete_rdv',
id:id},
Here is the complete javascript code:
jQuery( document ).ready(function($){ $('.button.delete').on('click', function(){ let id = $(this).attr('id'); cancelRecord(id); }); });
function cancelRecord(id) {
jQuery.ajax({
type: 'post',
url: ajaxurl,
data: {
action: 'delete_rdv',
id:id},
success: function(response) {
return;
},
error: function(jqXHR, status, error) {
alert('Error: Please refresh the page');
return;
},
complete: function() {
location.reload();
}
});
}
The ajax calls the function delete_rdv which I put in the functions.php file
add_action( 'wp_ajax_delete_rdv', 'delete_rdv' );
add_action( 'wp_ajax_nopriv_delete_rdv', 'delete_rdv' );
function delete_rdv() {
$queryannuler = "UPDATE wp_RDV SET statut = 'Annulé' WHERE id_RDV = '".$_POST['id']."'";
$resultatannuler = $connexion->query($queryannuler); //include connection file above
return $resultatannuler;
}
Special thanks to #jeprubio for kinda forcing to look the ajax way and to #sssurii for posting his code and answering my question.