to execute a sql query in jquery so that the data gets removed from html table as well as database

Question

i have a html table which displays columns -client name,staff name, matter and delete. my delete column contains only buttons for each row.And my data base contains columns id,date ,client name, staff name and matter.My database does not contain delete column,it is just displayed in my html table.now i want to delete particular row on click of corresponding delete button in that row.just check out my jquery code and sql code and let me know why is it not working? jquery code-

 $(document).ready(function()
{
    $('input[type=button]').click(function()
    {
        if (confirm("Are you sure you want to delete this row?"))
        {
            var id = $(this).parent().parent().attr('id');
            var data = 'id=' + id ;
            var parent = $(this).parent().parent();

            $.ajax(
            {
                   type: "POST",
                   url: "delete.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                    parent.fadeOut('slow', function() {$(this).remove();});
                   }
             });
        }
    });


});

my sql code -

<?php
include 'db.php' // DB Connection
if($_POST['id'])
{
    $ID = mysql_escape_string($_POST['id']);

    $sql = "DELETE FROM `newdata` WHERE id = '$ID'";
    mysql_query($sql);
}

?>

and my html goes like this-

   <table class="footable" data-filter="#filter" id="tableresult">
                               <thead>

                                <th>Client name</th>
                                 <th>Staff name</th>
                                 <th>Matter</th>
                                 <th> Delete</th>
                              </thead>
<tr id="<?php echo $id; ?>" class="edit_tr">

<td class="edit_td" >
<span id="client_<?php echo $id; ?>" class="text"><?php echo $clientname; ?></span>
<input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" /&gt;
</td>

<td class="edit_td">
<span id="staff_<?php echo $id; ?>" class="text"><?php echo $staff; ?></span> 
<input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
</td>

<td class="edit_td">
<span id="matter_<?php echo $id; ?>" class="text"><?php echo $matter; ?></span> 
<input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
</td>
<div id ="delete_btn">
<td class="delete_td"><input type="button" id="del" class="btn btn-danger" value="&times;"></input></td>
</div>
</tr>

looks like a next to exact duplicate of your other post http://stackoverflow.com/questions/34694805/to-delete-particular-row-from-database-as-well-as-html-table-on-corresponding-bu — Funk Forty Niner, Jan 12 '16 at 13:06
@Drudge Not from that HTML unless he is not showing us something — RiggsFolly, Jan 12 '16 at 13:06
@RiggsFolly Yeah, I also don't think he is getting id there coz he has kept id='del' — Drudge Rajen, Jan 12 '16 at 13:08
Please dont use the `mysql_` database extensions, it is deprecated (gone for ever in PHP7) Especially if you are just learning PHP, spend your energies learning the `PDO` or `mysqli_` database extensions, [and here is some help to decide which to use](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) — RiggsFolly, Jan 12 '16 at 13:10
[Your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Jay Blanchard, Jan 12 '16 at 13:10
Please [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). [These extensions](http://php.net/manual/en/migration70.removed-exts-sapis.php) have been removed in PHP 7. Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [PDO](http://php.net/manual/en/pdo.prepared-statements.php) and [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and consider using PDO, [it's really pretty easy](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Jan 12 '16 at 13:10
Add error reporting to the top of your file(s) right after your opening ` — Jay Blanchard, Jan 12 '16 at 13:11
i am getting the current id in alert if i remove $.ajax method @Drudge — payal_suthar, Jan 12 '16 at 13:13
Where is your ``, and its attributes? You are only showing ``, since you have `$(this).parent().parent().attr('id');`, the 1st `.parent()` is the ``, and the 2nd would be the `` — Sean, Jan 12 '16 at 13:13
You have a syntax error in your `$.ajax()` as you have a semicolon `;` at the end of `type: "POST";` & `url: 'delete.php';`, where it should be a comma - `type: "POST",` & `url: 'delete.php',`. Also, you have an extra semicolon in `$('#tableresult').removeRow(ID); ;` — Sean, Jan 12 '16 at 13:18
Is the data removed from the DB but not from the form ? Also, replace if($_POST['id']) with if(isset($_POST['id'])) because it might evaluate to false if the ID is 0. Unlikely, but just in case. — Hassan, Jan 12 '16 at 13:20
I edited my comment twice, so did you get all 3 of the semicolon issues? Have you looked at your browser console to see if the `$.ajax()` is firing? Or if you have a JavaScript error? Or if the `$.ajax()` is failing? — Sean, Jan 12 '16 at 13:26
just let me know how should i refer this var ID in my sql so that i can write my delete query and also let me know what should be my success function of $.ajax method — payal_suthar, Jan 12 '16 at 13:26
my console is giving me -remove row is not a function ..what should i do? and yes i corrected that semicolon issue — payal_suthar, Jan 12 '16 at 13:28
https://sarfraznawaz.wordpress.com/2009/09/14/deleting-table-rows-using-jquery-and-php/ check this tutorial if it is helpful. — Drudge Rajen, Jan 12 '16 at 13:28
There are many syntax errors in your JS code, for example this : `removeRow(ID); ;` as well as some missing parens. Doesn't the console display them ? — Hassan, Jan 12 '16 at 13:29
So `.removeRow(ID);` is not your custom function, you just assumed that jQuery/JavaScript had this function? You could try something like - `$('tr#'+ID).remove();` instead of `$('#tableresult').removeRow(ID);` — Sean, Jan 12 '16 at 13:35
now with the tutorial u gave me , row gets deleted from my html table but it does not gets deleted from my database @Drudge — payal_suthar, Jan 12 '16 at 13:35
i am editing my jquery code, with this code i am able to delete the row from html table but it does not delete it from my database @everyone — payal_suthar, Jan 12 '16 at 13:36
when you run code are you getting id in the php code when you echo it now ?? — Drudge Rajen, Jan 13 '16 at 05:46

score 0 · Answer 1 · answered Jan 12 '16 at 14:31

HTML

I've removed the <div> you had wrapped around your final <td> because that's bad markup. Rely, instead on the button itself, which has also been changed from an <input> to <button>. I've also added a data-id attribute to the button, so you can more easily access the row id. Finally, I've removed the id="del" attribute, as I would imagine this is in a loop and all your buttons will then have the same id which does you no good. Class was added btn-delete to target click events.

<tr id="<?php echo $id; ?>" class="edit_tr">

    <td class="edit_td" >
        <span id="client_<?php echo $id; ?>" class="text">
        <?php echo $clientname; ?>
        </span>
        <input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" /&gt;
    </td>

    <td class="edit_td">
        <span id="staff_<?php echo $id; ?>" class="text">
        <?php echo $staff; ?>
        </span> 
        <input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
    </td>

    <td class="edit_td">
        <span id="matter_<?php echo $id; ?>" class="text">
        <?php echo $matter; ?>
        </span> 
        <input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
    </td>

    <td class="delete_td">
        <button data-id="<?php echo $id; ?>" class="btn btn-danger btn-delete" value="&times;" />
    </td>
</tr>

JavaScript / jQuery

The jQuery is fairly simple. We create an eventListener for the class .btn-delete which is on your delete button. Then it grabs the data-id attribute of the button that was clicked and calls your PHP with an $.ajax() call. On success of that call, we run a callback function called removeRow() which will remove the front-end <tr> element. Inside that callback function, there's a simple var time that controls the transition time to remove the row, which is a two-step procedure. First, it slides up the row and then it will remove the element from the DOM.

<script type="text/javascript">
    $( document ).ready( function() {

        // A Delete Button Was Clicked
        $( document ).on( 'click', '.btn-delete', function() {

            // Get the ID we're going to delete
            var delID = $( this ).attr('data-id');

            // Run Our Ajax
            $.ajax({
                url: "delete.php",
                type: "POST",
                data: "?id=" + delID,
                success: function() {
                    removeRow(delID);
                },
                error: function() {
                    alert('Something went wrong');
                }
            });

        } );

        // Callback function to remove row
        function removeRow( id ) {
            var time = 500;
            $( 'tr#' + id ).slideUp(time);
            setTimeout( function() { $( 'tr#' + id ).remove(); }, time );
        }

    } );
</script>

PHP

I'm going to assume your php is deleting the row properly already, so it can probably just remain the same.

score 0 · Answer 2 · answered Jan 13 '16 at 07:44

guys finally got it and thanks for your help and support-

my jquery code-

$(document).ready(function()
{
    $('input[type=button]').click(function()
    {
        if (confirm("Are you sure you want to delete this row?"))
        {
            var ID = $(this).parent().parent().attr('id');
            var data = 'id=' + ID ;
            var parent = $(this).parent().parent();

            $.ajax(
            {
                   type: "POST",
                   url: "delete.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                    parent.fadeOut('slow', function() {$(this).remove();});
                   }
             });
        }
    });


});

my sql code-

<?php
include("db.php");
if($_POST['id'])
{
    $id = mysql_escape_string($_POST['id']);

    $sql = "DELETE FROM newdata WHERE id = '$id'";
    mysql_query($sql);
}

?>

to execute a sql query in jquery so that the data gets removed from html table as well as database

2 Answers2

HTML

JavaScript / jQuery

PHP