Ask a Question Register Login

javascript - How to reload a table with ajax after deleting a single row

904

I am doing a pagination with random values in my database. Now that my pagination is done, I am working on how to delete a row and, without refreshing the browser, when you click on the X button, I want a confirm() and if it's yet, that row must disappear but my table should still be there.

So this is my script : 

<?php 
include_once("connectDB.php");
$db = new Connect;
$db = $db->ConnectDB();
$st = $db->prepare("SELECT COUNT(id) FROM users WHERE type='Concessionnaire'");
$st->execute();
$res = $st->fetch(PDO::FETCH_NUM);
$total_rows = $res[0];
$rpp = 5;
$last = ceil($total_rows/$rpp);
if ($last < 1) {
    $last = 1;
}
?>
<!DOCTYPE html>
<html>
    <head>
        <style>
            table,td {
                padding:5px;
                border:1px solid black;
            }
            table {
                width:800px;
            }
            #pagination_controls {
                width:200px;
                float:right;
                padding-bottom:15px;
            }
            #container {
                width:850px;
                margin:auto;
            }
        </style>    
        <script>
            function request_page(pn) {
                var rpp = <?php echo $rpp; ?>;
                var last = <?php echo $last; ?>;
                var results_box = document.getElementById("results_box");
                var pagination_controls = document.getElementById("pagination_controls");
                results_box.innerHTML = "Processing...";

                var hr = new XMLHttpRequest();
                hr.open("POST","pagination_parser.php",true)
                hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                hr.onreadystatechange = function () {
                    if(hr.readyState == 4 && hr.status == 200) {
                        var dataArray = hr.responseText.split("||");
                        var html_output = "<table><tr><th></th><th>ID</th><th>username</th><th>password</th><th>e-mail</th><th>creer par:</th><th></th></tr>";
                        for(i=0;i<dataArray.length - 1;i++) {
                            var itemArray = dataArray[i].split("|");
                            html_output += "<tr><td><input type='submit' onclick=''; value='O'></td><td>"+itemArray[0]+"</td><td>"+itemArray[1]+"</td><td>"+itemArray[2]+"</td><td>"+itemArray[3]+"</td><td>"+itemArray[4]+"</td><td><input type='submit' onclick='javascript:supprimer("+itemArray[0]+");'; value='X'></td></tr>";
                        }
                        results_box.innerHTML = html_output;
                    }
                }
                hr.send("rpp="+rpp+"&last="+last+"&pn="+pn);

                var paginationCtrls = "";
                if(last != 1) {
                    if(pn > 1) {
                        paginationCtrls += '<button onclick="request_page('+(pn-1)+')">&lt;</button>';
                    }
                    paginationCtrls += '&nbsp; &nbsp; <b> Page '+pn+' of '+last+' &nbsp; &nbsp; ';
                    if(pn != last) {
                        paginationCtrls += '<button onclick="request_page('+(pn+1)+')">&gt;</button>';
                    }
                }
                pagination_controls.innerHTML = paginationCtrls;
            }
            function supprimer(id) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4 && xhr.status == 200) {
                        if(confirm("Etes-vous sur?")) {
                            document.getElementById('container').innerHTML = xhr.responseText;
                        }
                    }
                }
                xhr.open("GET","supprimer2.php?id="+id,true);
                xhr.send();
            }
        </script>
    </head>
    <body>
        <div id="container">
            <div id="pagination_controls"></div>
            <div id="results_box"></div>
        </div>
        <script>request_page(1);</script>

    </body>
</html>

This is my supprimer function php (in my test.php)

public function supprimer($id) {
        $st = $this->db->prepare("DELETE FROM `phplogin`.`users` WHERE id='$id'");
        $st->execute();
    }

And this is where I get stuck :

<?php 
$id = $_GET['id'];
include_once('connect.php');
$obj = new User;
$obj->supprimer($id);
echo 'TABLE HERE';
?>

As you can see, with the help of ajax I can do innerHTML of my container div id. But at first, when you go on my page I call that table with a javascript function: request_page(1); So I tried echo 'request_page(1) inside my supprimer2.php but it doesn't work. Blank page. So tell me guys, how can I put back my table??

911

Answer

Solution:

Define a global variable like;

var page = 1;

and in yourrequest_page function set it like;

function request_page(pn) {
    .....
    page = pn;
    .....
}

and in yoursupprimer function callrequest_page function after ajax result,

function supprimer(id) {
    ...........
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            if(confirm("Etes-vous sur?")) {
                document.getElementById('container').innerHTML = xhr.responseText;
                request_page(page); // Call to refresh table
            }
        }
    }
    xhr.open("GET","supprimer2.php?id="+id,true);
    xhr.send();
}

People are also looking for solutions to the problem: arrays - PHP random number 1-20 output

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.