Jquery ajax hide element on success request

Question

I am trying to hide a button that i clicked on to upload a image after succesfull upload.

this is my code:

$(document).on('click', '.upload-image-click', function() {
    var token =  $('input[name="csr"]').attr('value');


    var formData = new FormData();
    formData.append('image_file',  $(this).siblings('input[name=image_file]')[0].files[0]);

    $.ajax({
    url: '/image-upload-ajax/',
    data : formData,
    method : 'POST',
    headers: {
                'X-CSRFToken': token 
            },
    success: function (data) {
        $(this).hide();
        console.log(data);
    },
    error: function (data) {
        console.log('error');
    },
    contentType:false,
    cache: false,
    processData:false,
});


})

You may noticed, on success block, i have added this line $(this).hide(); but it is not working.

Everything is working great except hiding the button. Can anyone help me to get it done?

Just use the selector in the hide: `$(''.upload-image-click'').hide()` — Abraham Labkovsky, Aug 24 '20 at 17:47
This is answered here: https://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working — Abraham Labkovsky, Aug 24 '20 at 17:49

PeterKapenaPeter · Answer 1 · 2020-08-24T18:04:59.077

Instead, use the element selector. the scope of this changes once you are in the success function scope. This should work:

$(document).on('click', '.upload-image-click', function () {
    var token = $('input[name="csr"]').attr('value');
    let element = $('#' + $(this).attr('id'))

    var formData = new FormData();
    formData.append('image_file', $(this).siblings('input[name=image_file]')[0].files[0]);

    $.ajax({
        url: '/image-upload-ajax/',
        data: formData,
        method: 'POST',
        headers: {
            'X-CSRFToken': token
        },
        success: function (data) {
            element.hide();
            console.log(data);
        },
        error: function (data) {
            console.log('error');
        },
        contentType: false,
        cache: false,
        processData: false,
    });
})

Set a breakpoint at the line right after the success function and troubleshoot. If in any way you really want to be using the class selector, which I wouldn't recommend if you want one single element to be monitored in this code, then I have readjusted my response. — PeterKapenaPeter, Aug 24 '20 at 18:04

ikiK · Accepted Answer · 2020-08-24T18:01:30.963

Your Ajax callback can not use this anymore. Instead create a unique class on clicked image and also save it to variable:

  i="0";
      $(this).addClass("clicked"+(++i)); 
        var clicked="clicked"+i;

Then use that variable to delete that image:

$("."+clicked).hide();

Example of unique class:

i="0";

$(document).on('click', '.upload-image-click', function() {

  $(this).addClass("clicked"+(++i)); 
    var clicked="clicked"+(i); 
    
console.log(clicked);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-image-click">div 1</div>
<div class="upload-image-click">div 2</div>

SO your code should be:

i="0";

$(document).on('click', '.upload-image-click', function() {
    var token =  $('input[name="csr"]').attr('value');

  $(this).addClass("clicked"+(++i)); 
    var clicked="clicked"+(i); 

    var formData = new FormData();
    formData.append('image_file',  $(this).siblings('input[name=image_file]')[0].files[0]);

    $.ajax({
    url: '/image-upload-ajax/',
    data : formData,
    method : 'POST',
    headers: {
                'X-CSRFToken': token 
            },
    success: function (data) {
        $("."+clicked).hide();
        console.log(data);
    },
    error: function (data) {
        console.log('error');
    },
    contentType:false,
    cache: false,
    processData:false,
});


})

Jquery ajax hide element on success request

2 Answers2