How to delete HTML row using jQuery and then update to database?

Question

Currently the following code is able to make the first 2 columns editable and process it and have it sent to PHP and update to db. I then tried a few code to remove a particular row with the JavaScript code but now it caused that editable and delete to not work altogether.

How to make both editable and delete row work again?

Edit the editable uses source from jquery.jeditable.mini.js

HTML code:

<table>
<tbody><tr>
    <th>Room Types</th>
    <th>Acronym</th>
    <th>Delete</th>
</tr>
<tr id="row-0">
    <td><div class="edit" id="Deluxe Family">Deluxe Family</div></td>
    <td><div class="edit" id="DLX (2K)">DLX (2K)</div></td>
    <td><div class="delete" id="DLX (2K)"><span class="ui-button-text">X</span></div></td>
</tr>
<tr id="row-1">
    <td><div class="edit" id="Deluxe Queen">Deluxe Queen</div></td>
    <td><div class="edit" id="DLX (2Q)">DLX (2Q)</div></td>
    <td><div class="delete" id="DLX (2Q)"><span class="ui-button-text">X</span></div></td>
</tr></tbody>

Javascript:

$(document).ready(function() {
    $('.edit').editable('process.php', {
        loadurl   : 'load.php',
        id        : 'rt_code',
        name      : 'rt_codevalue',
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
    $('.delete').click(function(){
        var del_id = $(this).attr('id');
        var rowElement = $(this).parent().parent(); //grab the row

        $.ajax({
                type:'POST',
                url:'process.php',
                data: delete_id : del_id,
                success:function(data) {
                    if(data == "YES") {
                       rowElement.fadeOut(500).remove();
                    } 
                    else {
                    }
                }
        });
    });
});

PHP:

if (isset($_POST['rt_code'])  {
    echo $_POST['rt_codevalue'];
}

if(isset($_POST['delete_id'])) {
    $data = "DELETE FROM roomtype WHERE RT_CODE = ".$_POST['delete_id'];
    if(query($data)) {
        echo "YES";
    }
}

@Itay Gal, i changed the value of ID to unique but still break editable and delete. — dobuz
– dobuz, Commented May 13, 2014 at 5:16

Brij Patel · Accepted Answer · 2014-05-13 07:29:15Z

1

I guess error is in your jquery ajax code change it to as following,

$.ajax({
            type:'POST',
            url:'process.php',
            data: {delete_id : del_id},
            success:function(data) {
                if(data == "YES") {
                   rowElement.fadeOut(500).remove();
                } 
                else {
                }
            }
    });

actually the data you have passed seems like an object but you forgot to put braces '{}' i mean

  data: delete_id : del_id,

should be

data: {delete_id : del_id},

answered May 13, 2014 at 7:29

Brij Patel

747 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dobuz Over a year ago

This still didn't remove the table row. It does solve the edit issue. Any other method?

Brij Patel Over a year ago

I would suggest you alert the response from the AJAX script may be the response is not YES so that it is not getting in to the 'if' condition. i dont see any error in the code which is supposed to remove the table row.

dobuz Over a year ago

I just tried again the answer given, yes it does work now, it is my process.php issue. I can't seems to vote your answer as i do not have 15 reputation yet. will come back and give you a vote once i gathered 15 reputation. Thanks!

Brij Patel Over a year ago

U r welcome mate. i am glad i cud help. you can just mark my answer as 'Accepted Answer' as the owner of the question.

Collectives™ on Stack Overflow

How to delete HTML row using jQuery and then update to database?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related