-1

I have database table BuildingMaster with three fields ID, BuildingLocation and Status. I have PHP page which display all building details like ID, Location ,Status in HTML table . In Every row there is remove hyperlink.

When I click on link related record has been removed from the database. but it is still displayed into the HTML table. When I refresh the web page then it will removed.

Building.PHP

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

function Remove(ID) {   

    $.ajax({
        type: "POST",
        url: "buildingremove.php",
        data: {ID:ID},
        dataType: "JSON",
        success: function(data) {
             $("#Row"+ID).remove();
             $("#Response").html(data.MSG);
        },
        error: function(err) {
             $("#Response").html(err);
        }
    });

}
</script>
</head>
<body>
<table>
    <tr>
        <th>ID</th>
        <th>Location</th>
        <th>Status</th>
        <th>Action</th>
    </tr>
    <?php
    $sq="Select * from buildingmaster";

    $Table=mysqli_query($CN,$sq);

    while ($Row=mysqli_fetch_array($Table)) {  
        $ID=$Row['ID'];

        echo("<tr id='Row'.$ID.'>");
        echo("<td>".$Row["ID"]."</td>");
        echo("<td>".$Row["BuildingLocation"]."</td>");
        echo("<td>".$Row["Status"]."</td>");

        echo("<td>");
        echo("<a href='#' onclick='Remove($ID)'>Delete</a>");
        echo("</td>");
        echo("</tr>");  
    }
    ?>
</table>
<?php                                   
echo("<div>");
echo("<p id='Response'></p>");
echo("</div>"); 
?>
</body>
</html>

buildingremove.php

<?php

require_once "../core/connection.php";

$ID=$_POST['ID'];

$DeleteQuery="Delete from buildingmaster where ID=$ID";

global $CN;
$R=mysqli_query($CN,$DeleteQuery);

if($R==1)
{   
    $MSG="Building has been remove successfully.";
    $res = array('ID'=>$ID,'MSG'=>$MSG);
    echo json_encode($res);
}
else 
{
    $MSG="Server Error... Try Again....";
    $error = array('ID'=>$ID,'MSG'=>$MSG);
    echo json_encode($error);
}

?>
Aioros
  • 4,373
  • 1
  • 18
  • 21
dr Chandra Kant Sharma
  • 679
  • 8
  • 15
  • Hi, have you tried wrapping your javascript inside jquery's document ready? https://learn.jquery.com/using-jquery-core/document-ready/ – Simon K Jan 16 '19 at 18:38
  • @WebCode.ie that is entirely irrelevant if the record is being removed. The record being successfully removed proves that the code is in fact being bound correctly and therefore doesn't need to be in a document ready handler. In fact, adding it to one would make the code cease to function in this case. – Kevin B Jan 16 '19 at 18:40
  • @KevinB - I am just going by the first line of text from the link I provided... `A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. ` – Simon K Jan 16 '19 at 18:42
  • @WebCode.ie In general, giving that advice blindly is rather useless. If it actually had any chance at all of fixing the problem, sure, but if you look at the code in question, it's quite clear that adding it would break the code. – Kevin B Jan 16 '19 at 18:42
  • @KevinB is it not good practice? Hence I commented rather than providing a full answer. – Simon K Jan 16 '19 at 18:43
  • @WebCode.ie jQuery in general isn't "good practice", wrapping a function that needs to be global to work in a document ready handler is *not* good practice, as that makes said function *not* global. There's no reason to wait for the document to be ready to define a function. – Kevin B Jan 16 '19 at 18:44
  • @FunkFortyNiner The **duplicate is wrong**. This question is not about redirect. It is about dynamically remove DOM elements after AJAX. Redirection is **not** intended. – Pinke Helga Jan 16 '19 at 18:50
  • @Quasimodo'sclone OP: *"When I click on link related record has been removed from the database. but it is still displayed into the HTML table. When I refresh the web page then it will removed."* – Funk Forty Niner Jan 16 '19 at 18:50
  • 1
    Lovely SQL injection you're introducing btw. Use a prepared statement for this, unless you like having your database deleted at some point in time. – Funk Forty Niner Jan 16 '19 at 18:51
  • 1
    @FunkFortyNiner Please read carefully again. This is part of the error description and a proof that the AJAX PHP side has worked correct. But intended is DOM manipulation via JQuery `.remove()`. There might be found a duplicate with single/double quotes confusion. – Pinke Helga Jan 16 '19 at 18:53
  • @FunkFortyNiner I have Asked How to remove a Row from HTML in which data comes from the database after Successfull AJAX – dr Chandra Kant Sharma Jan 16 '19 at 19:05
  • We have 2/5 reopen votes and can find an appropiate duplicate if the Q gets reopened. Does it work now? However, you should take the SQL injection issue seriously. http://php.net/manual/de/mysqli.quickstart.prepared-statements.php – Pinke Helga Jan 16 '19 at 19:11

1 Answers1

1

The ajax is working, the database is updated but the remove is not working because code cannot find the desired row. The syntax to assign Row ID is malformed

Replace this:

echo("<tr id='Row'.$ID.'>");

with 

echo("<tr id='Row".$ID."'>");

Or simply, as Quasimodo suggested

echo("<tr id='Row$ID'>");
Nawed Khan
  • 4,393
  • 1
  • 10
  • 22