Trouble deleting a tr with ajax call

Question

I'm trying to delete a table row, my button works and my product deletes from the database, however it doesn't delete on the page until a refresh and I always get "It Failed" even tho it worked... What am I doing so wrong? seems like the "success" isn't being called.

$(".deleteProduct").click(function(){
   var id = $(this).data("id");
   var token = $(this).data("token");
   $.ajax(
           {
               url: "/eventlineitem/"+id,
               type: 'DELETE',
               dataType: "JSON",
               data: {
                   "id": id,
                   "_method": 'DELETE',
                   "_token": token
               },
               success: function ()
               {
                   console.log("it Work");
               }
           });

   console.log("It failed");
 });

Here is my html

<tr class="item{{$item->id}}">
  <td class="align-center" scope="row">{{$item->product->id}}</td>
  <td class="align-center">{{$item->quantity}}</td>
  <td><a href="/products/{{$item->product->id}}">{{$item->product->name}}</a></td>
  <td class="align-center">{{$item->warehouse_id}}</td>
  <td class="align-center">{{$item->product->location}}</td>
  <td><div class="switch">
  <label><input type="checkbox"><span class="lever switch-col-green"></span></label>
  </div></td>
  <td><i class="material-icons deleteProduct" data-id="{{ $item->id }}" data-token="{{ csrf_token() }}">delete</i></td>
</tr>

Yeah I guess lol when I press my the row deletes from the database — DevJustin, Mar 18 '17 at 03:00
Learn something new I guess, https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.7 — Waxi, Mar 18 '17 at 03:05
I just read that, what exactly am I supposed to be learning?? I get a status OK/200 and it DOES delete from the database — DevJustin, Mar 18 '17 at 03:10
Sorry, was merely meant for people like myself who weren't aware of that type. See my answer below. — Waxi, Mar 18 '17 at 03:19
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Igor Raush, Mar 18 '17 at 04:17
maybe it is but thats A LOT of info to take in for a newcomer... — DevJustin, Mar 18 '17 at 04:29
`console.log("It failed");` will always be executed on delete click as per the current code. So even if it works, it will display it failed — Paras, Mar 18 '17 at 05:31

stackoverfloweth · Answer 1 · 2017-03-18T02:56:41.237

0

I don't know how you expected the html to know you deleted the row?

I think you should create a variable before the Ajax call

var target = $(this).parents("tr");

And then in the ajax.success call

target.remove()

edited Mar 18 '17 at 02:56

answered Mar 18 '17 at 02:49

stackoverfloweth

6,669
5
38
69

I think target is here. Though we can do target.parents('tr').remove() – Kuldeep Singh Mar 18 '17 at 02:55
I tried this, still the same issue as before. it gets deleted from the database I get a status "OK" / 200 – DevJustin Mar 18 '17 at 03:04

score 0 · Answer 2 · answered Mar 18 '17 at 02:50

0

Change your success function like this

success: function ()
               {
                   $(".item"+id).remove();
                   console.log("it Work");
               }

answered Mar 18 '17 at 02:50

Kuldeep Singh

696
10
25

Waxi · Answer 3 · 2017-03-18T04:10:39.700

0

success: function() {
    $(this).parent().parent().remove();
    console.log("it Work");
}

By the way, if console.log is being fired here then you know success worked.

edited Mar 18 '17 at 04:10

answered Mar 18 '17 at 03:17

Waxi

1,641
2
14
20

I still get "it failed", still deletes from database and when the page is refreshed, the row is gone. – DevJustin Mar 18 '17 at 03:26
Is the console logging anything? Have you confirmed success is being fired? – Waxi Mar 18 '17 at 03:34
console logs "it failed" and the status i get back is OK/200 (useing laravel devtools) – DevJustin Mar 18 '17 at 03:36
It will always say fail because you have it outside of the ajax call. Are you getting back the 'it worked' one? – Waxi Mar 18 '17 at 03:37
Doesn't seem like you're returning any data because you're running `type:delete` and my guess is success will only fire if it has received something. If you're confident it's going to work every time then you could just remove the row outside the ajax, otherwise I think you need to return something in order for it to fire the success. – Waxi Mar 18 '17 at 04:09
I think laravel is returning a status but i did however add a flash message. I know you might not understand, but what im getting at is that laravel does return something even when i force something. I'll add the laravel tag to see if anyone finds an error with laravel. – DevJustin Mar 18 '17 at 04:18
Try `dataType: "html"` – Waxi Mar 18 '17 at 13:18

Alok · Answer 4 · 2017-03-18T09:25:03.680

0

Can you try with the below code:

$(".deleteProduct").click(function(){
    var _selector = $(this);
    var id = _selector.data("id");
    var token = _selector.data("token");

    $.ajax({
        url: "/eventlineitem/"+id,
        type: 'DELETE',
        dataType: "JSON",
        data: {
            "id": id,
            "_method": 'DELETE',
            "_token": token
        },
        success: function (){
            console.log("it Work");
            _selector.parents('tr.item' + id).remove();
        }
    });
});

Let me know if its work for you.

edited Mar 18 '17 at 09:25

answered Mar 18 '17 at 05:18

Alok

297
3
13

No this code does not work, YES my product deletes from the database but does not remove it from the dom. I got it to work with manually returing a message from laravel instead of using status code then using your remove – DevJustin Mar 18 '17 at 20:22

Trouble deleting a tr with ajax call

4 Answers4