简体   繁体   English

PHP的JSON模式弹出不工作

[英]php json modal popup not working

i used a modal to delete json file data delete. 我使用模式删除json文件数据删除。 but i used JavaScript to view my json file data into a html file. 但我使用JavaScript将json文件数据查看为html文件。 but i used a delete modal to delete data it's not working properly. 但是我使用了删除模式来删除数据,它不能正常工作。 now i used to delete data without any warning message. 现在我曾经删除数据而没有任何警告消息。 this is my JavaScript code to view data. 这是我的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;

and this is my delete php function to update active status. 这是我的删除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";
}

how i used a model to call this php function to delete data with JavaScript button. 我如何使用模型调用此php函数以使用JavaScript按钮删除数据。

To open a popup with delete data : 要打开一个带有删除数据的弹出窗口:

1) You will have to add id's to your data for delete link, which when clicked shows the popup. 1)您必须在数据中添加ID以便删除链接,单击该链接将显示弹出窗口。

2) The popup will have the delete confirm button, which when the user clicks a delete call via ajax to your controller method is made to delete the data from db/remote api etc. 2)弹出窗口将具有删除确认按钮,当用户通过ajax单击对您的控制器方法的删除调用时,将从db / remote api等中删除数据。

I have shown a sample demo of that. 我已经展示了一个示例演示。 You can try it with your own 您可以自己尝试

 $(".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