Laravel - Ajax and preventdefault

Question

I have a problem with getting items in cart, after I add an item into the cart, Ajax works perfect, then when i try to remove it from the list, first time it wont work with Ajax, if I reload the page it will work.

Ajax generate response like this:

1x ItemTitle X (remove)

When remove has /delete-from-cart/id/place_id

It only works when I reload the page, and also I have a button for coupons that is also managed to work with Ajax, but it only works after refresh.

$('.deletefromcart a').each(function(){
    $('#'+this.id).on('click',function(e) {
      e.preventDefault();
      var id = $(this).attr('data-del');
      var url = $(this).attr('href');
      var place = $(this).attr('data-place');
       $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      $.ajax({
         url: '/delete-from-cart/'+id+'/'+place+'',
         method: 'get',
         data: $(this).serialize(),
         success: function(data){
           toastr.warning('Uspešno ste obrisali iz korpe!', 'Korpa');
             $(".korpa").load(location.href + " #cartAll");
         },
         error: function(data){
           console.log(data);
         }

         });
     });
});

It seems like this function cant find any object to run it from ajax after I add to cart, after refresh it finds.

If you need live preview, i can make you an account.

This is the element: <a href="http://klopa.naprviklik.com/delete-from-cart/0/2" class="btn btn-danger btn-round" data-place="2" data-del="0" id="delete-0" role="button">x</a> — Nikola Ranisavljev
– Nikola Ranisavljev, Commented Jan 22, 2019 at 8:19
no need for each, because it's going to be triggered one at a time so if you write the click function without the each and try it might work — Kuru
– Kuru, Commented Jan 22, 2019 at 8:40

Ijas Ameenudeen · Accepted Answer · 2019-01-22 08:55:36Z

1

You should bind the click event handler on each 'delete' element as,

$('body').on('click', '.deletefromcart a', function (e) {
    e.preventDefault();
    var id = $(this).attr('data-del');
    var url = $(this).attr('href');
    var place = $(this).attr('data-place');

    $.ajax({
        url: '/delete-from-cart/' + id + '/' + place + '',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        method: 'get',
        data: $(this).serialize(),
        success: function (data) {
            toastr.warning('Uspešno ste obrisali iz korpe!', 'Korpa');
            $(".korpa").load(location.href + " #cartAll");
        },
        error: function (data) {
            console.log(data);
        }
    });
});

Note 1: Your method of binding will attach the event handler to all .deletefromcart a elements. But the one I suggested will bind the event handler to only one element, body. This will also work on dynamically added .deletefromcart a elements.

Note 2: You can include the header values as above too.

edited Jan 22, 2019 at 8:55

answered Jan 22, 2019 at 8:50

Ijas Ameenudeen

9,2794 gold badges44 silver badges55 bronze badges

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

1 Comment

Nikola Ranisavljev Over a year ago

Your methods works like a charm, but there is a delay, it tooks maybe 4-5 seconds to actually delete it from the cart. But i will keep it this way, and many thanks for this explanation. God bless you !

Collectives™ on Stack Overflow

Laravel - Ajax and preventdefault

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