Question posted in
You can find the official documentation here.

Jquery ajax hide element on success request

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?

Tags:

2

Answers


  1. 0

    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,
    });
})
    Login or Signup to reply.
  2. 0

    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,
});


})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search