jQuery $.post affecting multiple rows in table after a previous accidental click - php

Question

I have a web page that allows authorized users to update or delete rows in a MySQL table. The table has the columns id (INT), label (VARCHAR), details (VARCHAR), templateId (INT), and auditable (TINYINT, either 0 or 1). This table is displayed as HTML on the front end, with "Label", "Details", "Auditable?" and "Edit/Delete" columns showing.
Clicking the "Edit" button on a row, changing some data in the resulting Bootstrap modal form, and clicking "Save Changes" works fine. The problem occurs when I click "Edit", click "Cancel" on the form, and then click another row (say, for example, I accidentally clicked the wrong row). When I click the button to execute the edit on that newly clicked row, both that row and the initially clicked row will be affected. The Chrome console shows that two JavaScript objects are being sent via $.post(), though I cannot figure out why from the logic I wrote (see below). I looked in MySQL and the duplicate results are there, confirming the page accurately reflects the update. Is there some $.get or $.post cache behavior in jQuery I am not aware of? (This also occurs with the delete functionality, but I'm limiting the question for brevity's sake).
Main page (GUI):
// The 'edit this row' button that brings up the modal form
$(".edit-action").click(function() {
// Clear any previously set values in form
$("#editActionLabel").val('');
$("#editActionDetails").val('');
$(".radio-edit-action").prop("checked", false);
// All edit button id's in GUI table will be "edit-action-[`id` in database]"
// Grab number out of there and convert from string to number
var actionId = $(this).attr("id");
actionId = parseInt(actionId.slice(12));
// Grab data from database to populate fields
$.get("data.php?a=actionData&actionId=" + actionId, function(d) {
// Returning a JSON encoded array isn't working,
// so I'm sending back a comma-separated string instead
var response = d.split(",");
var label = response[0];
var details = response[1];
var auditable = parseInt(response[2]);
$("#editActionLabel").val(label);
$("#editActionDetails").val(details);
if (auditable == 1) {
$("#editAuditableNo").prop("checked", false);
$("#editAuditableYes").prop("checked", true);
} else if (auditable == 0) {
$("#editAuditableYes").prop("checked", false);
$("#editAuditableNo").prop("checked", true);
}
// Only reset `auditable` variable if selection was changed
$(".radio-edit-action").change(function() {
auditable = $(this).val();
auditable = parseInt(auditable);
});
// User clicks "Save Changes" instead of "Cancel"
$("#executeEdit").click(function() {
var label = $("#editActionLabel").val();
var details = $("#editActionDetails").val();
var obj = {
"operation": "edit",
"actionId": actionId,
"label": label,
"details": details,
"auditable": auditable
};
console.log("The object passed to 'edit' this row:");
console.log(obj);
$.post("data.php", obj, function(r) {
// Confirm success or failure to user
$("#crudResult").html(r);
});
}); // end click
});
}); // end 'edit action'
data.php (called via AJAX to execute the UPDATE in database. Only relevant code shown):
$debug = false;
$operation = $_POST['operation'];
$action_id = (isset($_POST['actionId']) ? $_POST['actionId'] : '');
$label = (isset($_POST['label']) ? $_POST['label'] : 'NULL');
$details = (isset($_POST['details']) ? $_POST['details'] : 'NULL');
$auditable = (isset($_POST['auditable']) ? $_POST['auditable'] : 'NULL');
switch ($operation) {
case 'edit':
$query = "
UPDATE actions
SET label='$label',
details='$details',
auditable=$auditable
WHERE id=$action_id
LIMIT 1";
// DB connection not shown. Yes, I know I should be using PDO...
$result = mysqli_query($db_conn, $query);
// PHP echoes out the result; let the calling JavaScript figure out where to place it
if ($result) {
echo '<p class="text-success">Action successfully updated!</p>';
} else {
echo '<p class="text-warning">There was an error and the action could not be edited.</p>';
// Don't show error to user in production, when $debug should be false
if ($debug) {
echo '<p><b>Error:</b> ' . mysqli_error($db_conn) . '</p>';
}
}
break;
/* case 'delete': ... */
}
The modal form, which follows Bootstrap's template HTML, is simply a collection of fields and a couple buttons (no <form> wrapped around it). Please let me know if I can clarify anything.

Answer 1

How many times is the request to server occurs? I Bet it is twice.
The problem is on the client side.
For each edit click you have made, a new save click function has been created.
You do not need to add this for every edit click, take it out from the edit click function.
Hope it helps.