繁体   English   中英

PHP的JSON模式弹出不工作

[英]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;

这是我的删除p​​hp函数以更新活动状态。

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">&times;</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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM