0

Ajax is not working I have to reload the page to make it work. Because of ajax was not reloading i used location.reload but I don't want this so please anyone can help me out how to make ajax function work. Its removing data but I need to refresh the page to see

        $(document).ready(function() {
        $('.headertrash').click(function(e){
         e.preventDefault();
         var trashcartid = this.id;
         var splittrash = trashcartid.split('-');
         var cartdelid = splittrash[1];
        //Ajax Request

        $.ajax({
        url: 'delusing.php',
        type: 'POST',
        data: { id:cartdelid },
        success: function(response){    

        // Remove row from HTML Table
         $(this).closest('li').fadeOut(300,function(){
        $(this).closest('li').remove();     
         });
        //I uses location.reload as alternative 
       // location.reload();     
        }});
         e.preventDefault();
     });
Azeez
  • 368
  • 2
  • 10
  • Are you getting a success status code if you look at the network tab on dev tools? – Armand Jun 10 '20 at 11:50
  • Why do you use ajax when you want to whole page to reload? The use of ajax is so that the page doesn't need to reload. If you want to force a reload, then you need `location.reload` when using ajax. If not, you could just use a form to submit the data to the server which will reload the page. – user663976 Jun 10 '20 at 11:53
  • Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – Ivar Jun 10 '20 at 11:54
  • i dont want to reload the page but because of ajax was not working i have to do that and yes status is showing 200 I mean success – Azeez Jun 10 '20 at 11:54
  • I see. I misunderstood your question. – user663976 Jun 10 '20 at 11:55
  • The `this` in your `$(this).closest('li')...` is referring to the `this` of the success callback. Not the element that you clicked. – Ivar Jun 10 '20 at 11:56
  • My question is regarding ajax this is working in my code but ajax is not loading data – Azeez Jun 10 '20 at 11:56
  • try `var self = $(this);` in your click function, and use self, in the success callback. so you will be doing `self.closest('li').remove()` – user663976 Jun 10 '20 at 11:57
  • thanks ivar and user663976 Its working – Azeez Jun 10 '20 at 12:00
  • sweet glad that helped – user663976 Jun 10 '20 at 12:01

1 Answers1

1

I am going to assume that your request is working and returns success.

From your code and question I am deducing that the actual issue is not with ajax not working but with the li not fading and disappearing.

The issue you are experiencing is due to the this you are using, the way you are using this it means the ajax request, but your intent is to get the element associated with $('.headertrash') to fix your issue:

$(document).ready(function() {
    $('.headertrash').click(function(e){
        e.preventDefault();
        var trashcartid = this.id;
        var splittrash = trashcartid.split('-');
        var cartdelid = splittrash[1];
        var clickedElement = $(this);

        //Ajax Request
        $.ajax({
            url: 'delusing.php',
            type: 'POST',
            data: { id:cartdelid },
            success: function(response) {    
                // Remove row from HTML Table
                clickedElement.closest('li').fadeOut(300,function() {
                    clickedElement.closest('li').remove();     
                });
            }
        });
    }); 
});

See: Ajax (this) not working for more details

Armand
  • 9,847
  • 9
  • 42
  • 75