0

enter code hereI have a list of items from a database displayed thanks to a for-loop in Django. I have a "save button" next to each one to save them to a favorite database thanks to an AJAX call. Everything works like a charm.

But I want the "save button" to .hide() whenever the AJAX call is a "success". But if I do so, every "save button" from the page is hidden. So I tried to use .parent() or .closest() to select only the <div> where my "save is button" with no luck.

My HTML:

{% for sub_product in products %}

    <div class='sub_button'>            
                    <form class="add_btn" method='post'>{% csrf_token %}
                    <button class='added btn' value= '{{product.id }} {{ sub_product.id }}' ><i class=' fas fa-save'></i></button>              
    </div>

{% endfor %}

My AJAX:

$(".added").on('click', function(event) {
    event.preventDefault();     
    var product = $(this).val();   
    var url = '/finder/add/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
            'product': product,            
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success'])
          $(this).parent('.sub_button').hide();                       
        }
    }); 
});
Toto Briac
  • 908
  • 9
  • 29

1 Answers1

1

Your code failing because you are in different scope, $(this) will refer to the success function you are calling, not the element clicked, you should have a reference to the button once you execute the click event listener, the following should work for you:

$(".added").on('click', function(event) {
    let addedBtn = $(this); // Here is a reference
    event.preventDefault();     
    var product = $(this).val();   
    var url = '/finder/add/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
            'product': product,            
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success'])
          addedBtn.parent('.sub_button').hide();                       
        }
    }); 
});
ROOT
  • 11,363
  • 5
  • 30
  • 45
  • It does work but doesn't work for the first button of my list... – Toto Briac May 04 '20 at 06:56
  • for the code snippet you posted it should work but if you have other buttons, you should have included them, what happens if you replace it with `.parents().find('.sub_button').hide()`, not sure but this might hide buttons you want to have them shown. – ROOT May 04 '20 at 07:01
  • I have no other buton. It is just that with ```addedBtn.parent('.sub_button').hide();``` the first button of my item in the list doesn't ```hide()```. With ```addedBtn.parents().find('.sub_button').hide();``` they all ```hide()```. – Toto Briac May 04 '20 at 07:10
  • are you getting errors? maybe `success` function is not running, its the only thing coming to my mind for this issue. – ROOT May 04 '20 at 07:15
  • success runs. I don't get it. – Toto Briac May 04 '20 at 07:31