Delete entry from database using ajax and jQuery

Question

I'm making this app to practice asynchronous websites, all it does is show the contents of a database table on the site in table format using jQuery and PHP.

Everything works perfectly, except I wanted to add a button on each < tr > that on click deletes the respective entry on the database, however, I can't seem to get it done. I've got through the documentation of everything I used and just don't see the problem. Here is my code:

HTML:

<div class="row">
    <div class="col-lg-12" id="table_container">
        <table class="table table-striped" id="result_table">

        </table>
    </div>
</div>

The table is created on a separate PHP file that's called by ajax, this is the relevant loop:

while ($places = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>". $places ['ID']."</td>";
    echo "<td>". $places ['NAME']."</td>";
    echo "<td>". $places ['CHAIRS']."</td>";
    echo "<td>". $places ['CREATED']."</td>";
    echo '<td>
              <button class="btn btn-default deleteWaitlist" type="submit" name="' . $places['ID'] . '">X</button>
          </td>';
    echo "</tr>";
}

All buttons are created with the correct 'name' on the final html (that is an auto_increment number).

jQuery:

$(".deleteWaitlist").click(function(){
        console.log("click on .deleteWaitlist");
        // Get the varible name, to send to your php
         var i = $(this).attr('name');
            $.post({
                url: 'deleteWaitlist.php', 
                data: { id : i}, 
                success: function(result){
                    console.log("success" + result);
                }
            });
    });

As I said, kinda new to ajax. correct me if I'm wrong: this calls deleteWaitlist.php and posts a parameter 'id' with value '$(this).attr('name')' which is an auto_increment value on the database and should be diferent for every entry.

deleteWaitlist.php

$sql = "DELETE FROM waitlist WHERE id=" . $_POST[id] . "";
mysqli_query($c,$sql);

It's pretty straightforward, isn't it? Can you help me find the mistake? Maybe something like (int)$_POST[id] somewhere? I could swear I tried that everywhere.

EDIT: Strangely, Im not even getting the console log "click on .deleteWaitlist" when I click the button, as if I weren't even clicking it at all. What can be happening? I also changed the id "deleteWaitlist" for a class, since it seems to be the best practice.

what result are you getting? what do you get in your console? — Diwas
– Diwas, Commented Jul 27, 2015 at 3:34
have you tried to echo $_POST['id'] in deleteWaitlist.php before call sql query? — Thi Tran
– Thi Tran, Commented Jul 27, 2015 at 3:34
Shouldn't be relevant here, but never give two elements the same ID. If you want to identify several elements as belonging to a class that you want to operate on jointly, it should be - a class! class="deleteWaitlist", and $('.deleteWaitlist') — Amadan
– Amadan, Commented Jul 27, 2015 at 3:36
@Amadan. It is relevant here! Because that's how hez gonna achieve it!! That should be the first step here! — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 27, 2015 at 3:44

wkyip · Accepted Answer · 2015-07-27 03:50:23Z

4

Seems there is multiple delete button in your output html and jQuery matches exactly one element when querying for an ID.

Try use CLASS instead of ID on the delete button.

while ($places = mysqli_fetch_array($result)) {
  echo "<tr>";
    echo "<td>". $places ['ID']."</td>";
    echo "<td>". $places ['NAME']."</td>";
    echo "<td>". $places ['CHAIRS']."</td>";
    echo "<td>". $places ['CREATED']."</td>";
    echo '<td>
      <button class="btn btn-default deleteWaitlist" type="submit" name="' . $places['ID'] . '">X</button>
    </td>';
  echo "</tr>";
}

jQuery:

$(".deleteWaitlist").click(function(){
    console.log("click on .deleteWaitlist");
    // Get the varible name, to send to your php
     var i = $(this).attr('name');
        $.post({
            url: 'deleteWaitlist.php', 
            data: { id : i}, 
            success: function(result){
                console.log("success" + result);
            }
        });
});

answered Jul 27, 2015 at 3:50

wkyip

5004 silver badges17 bronze badges

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

1 Comment

TianRB Over a year ago

Hello @wkyip, thanks for the answer! I don't see how that could cause a problem, shouldn't using class or id be the same to jQuery? I tried the code you kindly provided but it didn't work.

Collectives™ on Stack Overflow

Delete entry from database using ajax and jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related