[英]php json modal popup not working
我使用模式删除json文件数据删除。 但我使用JavaScript将json文件数据查看为html文件。 但是我使用了删除模式来删除数据,它不能正常工作。 现在我曾经删除数据而没有任何警告消息。 这是我的JavaScript代码,用于查看数据。
var output = document.getElementById('output');
var ajaxhttp = new XMLHttpRequest();
var url = "form.json";
var xhttp = new XMLHttpRequest();
var details = '';
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var response = JSON.parse(xhttp.responseText);
var response = JSON.parse(xhttp.responseText);
var output = '';
output += "<table class='table table-bordered'>";
output += "<tr><th scope='col'>id</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Action</th></tr>";
for(x in response){
if(response[x].is_active == "1"){
output += "<tr><td>" + response[x].id + "</td><td>" + response[x].firstname + "</td><td>"+response[x].lastname+"</td><td>"+response[x].age+"</td><td><a href='edit.php?id="+response[x].id+"&firstname="+response[x].firstname+"&lastname="+response[x].lastname+"&age="+response[x].age+"' class='btn btn-primary btn-sm active' role='button' aria-pressed='true'>Edit</a><a href='update.php?id="+response[x].id+"&firstname="+response[x].firstname+"&lastname="+response[x].lastname+"&age="+response[x].age+"' class='btn btn-danger btn-sm' role='button' name='btnDelete' style='margin-left: 10px;'>Delete</a></td></tr>";
}
}
output += "</table> ";
document.getElementById("output").innerHTML = output;
这是我的删除php函数以更新活动状态。
session_start();
$success = "<div class='alert alert-danger' role='alert'>User Deleted Successfully</div>";
$success = urlencode($success);
$myFile = "form.json";
//create empty array
$arr_data = array();
try{
//Get form data
$formdata = array(
'id' => $_GET['id'],
'firstname' => $_GET['firstname'],
'lastname' => $_GET['lastname'],
'age' => $_GET['age'],
'is_active' => '0'
);
//get data from existing json file
$jsondata = file_get_contents($myFile);
//converts json data into array
$arr_data = json_decode($jsondata, true);
$updateKey = null;
foreach($arr_data as $key=>$value){
if($value['id'] == $formdata['id']){
$updateKey = $key;
}
}
if($updateKey === null){
array_push($arr_data, $formdata);
}
else{
$arr_data[$updateKey] = $formdata;
}
//push user data to array
//array_push($arr_data, $formdata);
//convert update array to json
$jsondata = json_encode($arr_data);
//write json data into form.json file
if(file_put_contents($myFile, $jsondata)){
header("location: index.php?success=$success");
}else{
echo "error deleting";
}
}
catch(Exception $e){
echo 'Caught Exception ', $e->getMessage(), "\n";
}
我如何使用模型调用此php函数以使用JavaScript按钮删除数据。
要打开一个带有删除数据的弹出窗口:
1)您必须在数据中添加ID以便删除链接,单击该链接将显示弹出窗口。
2)弹出窗口将具有删除确认按钮,当用户通过ajax单击对您的控制器方法的删除调用时,将从db / remote api等中删除数据。
我已经展示了一个示例演示。 您可以自己尝试
$(".btn").click(function(){ $("#myModal").show(); $("#deletebtn").click(function(){ // Your ajax call for controller to delete }); // });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Small Modal</h2> <ul> <li id="1">Item 1 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br> <li id="2">Item 2 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br> <li id="3">Item 3 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br> <li id="4">Item 4 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br> </ul> <!-- Trigger the modal with a button --> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Are you sure you want to delete ?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="deletebtn">Delete</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.