php json modal popup not working

Question

i used a modal to delete json file data delete. but i used JavaScript to view my json file data into a html file. 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.

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.

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.

Answer 1

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.

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.

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>

php json modal popup not working

Question

1 answers

solution1
0 2018-05-23 04:06:19

php json modal popup not working

Question

1 answers

solution1 0 2018-05-23 04:06:19

solution1
0 2018-05-23 04:06:19