Update Mysql Records Onclick Bootrstrap Checkbox Toggle - php

Question

I want to edit status field for selected column onclick of bootstrap checkbox toggle.....Please Help
Example :
1. if status is active then when user click then it should be update in database as inactive and reload page.
2. if status is inactive then when user click then it should be update in database as active and reload page.
Fetch Database
<?php
require_once 'db_config.php';
$output = array('data' => array());
// do not fetch status 3 because it is deleted
$sql = "SELECT *,emailnotificationstable.id as sid FROM notificationslist";
$query = $connect->query($sql);
$num_rows = mysqli_num_rows($query);
$x = $num_rows;
while ($row = $query->fetch_assoc()) {
// activate button
$activateButton = '';
if ($row['status'] == 1) {
$activateButton =
'<input type="checkbox" id="toggleBtn" name="toggleBtn" checked data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger" data-size="mini" value="'.$row['sid'].'" onclick="editMember()">';
} elseif ($row['status'] == 2) {
$activateButton =
'<input type="checkbox" id="toggleBtn" name="toggleBtn" data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger" data-size="mini" value="'.$row['sid'].'" onclick="editMember()">';
}
// extra code here
$output['data'][] = array(
$x,
$activateButton,
$row['date'],
$row['notificationname'],
$row['employeename'],
$createdby,
$editedby,
$editeddate,
$deleteButton,
);
$x--;
}
// database connection close
$connect->close();
echo json_encode($output);
Jquery
// global the manage memeber table
var mytable;
$(document).ready(function() {
mytable = $("#mytable").DataTable({
"ajax": "../pages/php_action/salesexe/retriveemailnotifications.php",
"order": [],
"fnDrawCallback": function() {
jQuery('#mytable #adBtn').bootstrapToggle();
}
});
});
function editMember(sid = null) {
if(sid) {
// remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
$(".text-danger").remove();
// empty the message div
$(".edit-messages").html("");
// remove the id
$("#membersid").remove();
// click on toggle button
$("#adBtn").click(function() {
$.ajax({
url: 'notifstatus.php',
type: 'post',
data: {membersid : sid},
dataType: 'json',
success:function(response) {
if(response.success == true) {
$(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// refresh the table
mytable.ajax.reload(null, false);
} else {
$(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>');
}
}
});
}); // click toggle btn
} else {
alert('Error: Refresh the page again');
}
}
Update
<?php
require_once 'db_config.php';
$output = array('success' => false, 'messages' => array());
$membersId = $_POST['membersid'];
// update record to inactive
$sql = "UPDATE notificationslist SET notfistatus = '2' WHERE id = $membersId";
$query = $connect->query($sql);
if($query === TRUE) {
$output['success'] = true;
$output['messages'] = 'Notification trigger successfullt activated for selected user';
} else {
$output['success'] = false;
$output['messages'] = 'Error while activating notification trigger for selected user,';
}
// close database connection
$connect->close();
echo json_encode($output);

Answer 1

You're thinking way to complex with reloading a page, not using the API as you should. You only want to fetch the status and update the needed parts this means you need a proper way to identify a row in your table. Also an html id must be unique in a page better remove that.
You have a couple of options:
use datatables ajax requests so it can handle multiple edits on different cols.
toggle the button on and off using jquery and bootstrap.
Shown below is the latter:
$(function() {
// hooking event only on buttons, can do tr's as well.
$('.toggleBtn').click(function(){
$.ajax({
url: 'notifstatus.php',
type: 'post',
data: {
id : $(this).val(),
status: $(this).prop('checked')
},
dataType: 'json',
success: function(response){
if(response.success){
$(this).bootstrapToggle('enable');
console.log(response.message);
} else {
$(this).bootstrapToggle('disable');
BootstrapDialog.show({
title: 'failed to update status',
message: response.status + response.messages
});
}
},
error: function(xhr, textStatus, errorThrown) {
BootstrapDialog.show({
title: textStatus,
message: errorThrown
});
}
});
});
});
Now the only response to build is the following:
<?php
require_once 'db_config.php';
if(isset($_POST['status']) && $_POST['status']){
// user requests to turn off
$sql = "UPDATE notificationslist SET notfistatus = '2' WHERE id = ?"; // SQL injection, use prepared statements. fix it.
} else {
// user requests to turn on, other query.
}
$success;
$status = 0;
$message = 'Error while activating notification trigger for selected user,';
if($query = $connect->query($sql)){
if($row = $query->fetch_assoc()){
$success = true;
$message = 'Notification trigger successfully activated for selected user';
$status = $row['status'];
}
}
die(json_encode([
'success' => $success,
'messages' => $message,
'status' => $status
]));
?>
Should do the trick, no need to request all data to update a single value.