更新Mysql的記錄ONCLICK Bootrstrap複選框切換

Question

我想編輯狀態域中選擇列的onclick引導複選框撥動.....請幫助 例子： 。如果狀態處於活動狀態，那麼當用戶單擊時，它應該在數據庫中更新爲非活動狀態並重新加載頁面。 。如果狀態不活動，那麼當用戶單擊時，它應該在數據庫中更新爲活動並重新加載頁面。

獲取數據庫

<?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">&times;</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">&times;</span></button>'+ 
          '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+ 
         '</div>'); 
       } 
      } 
     }); 
    }); // click toggle btn 
} else { 
    alert('Error: Refresh the page again'); 
} 
} 

更新

<?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

您正在考慮如何重新加載頁面，而不是像您應該那樣使用API​​。您只想獲取狀態並更新所需的零件，這意味着您需要一種正確的方法來識別表格中的一行。另外，html頁面在頁面中必須是唯一的，才能更好地移除該頁面。

你有兩個選擇：

1. 使用數據表AJAX請求因此它可以處理不同的cols多次編輯。
2. 使用jquery和bootstrap打開和關閉按鈕。

下面顯示的是後者：

$(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 
     }); 
     } 
    }); 
    }); 
}); 

我們建立唯一的反應是：

<?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 
    ])); 
?> 

應該做的伎倆，沒有必要要求所有的數據更新單一的價值。