how to access the $(this) inside sweet alert, inside AJAX success

Question

I want to delete the parent of clicked element. I use a sweet alert to get alert first and after I call an AJAX function and I want to get the element in the success function:

This is my function:

 function removeImage(id) {  
        var element = $(this).closest('.dropzone');

    swal({   
      title:"Delete",   
      text: "delete",  
      type: "warning",   
      showCancelButton: true,   
      confirmButtonColor: "#DD6B55",   
      confirmButtonText: "Yes !",   
      cancelButtonText: "No, cancel",   
      closeOnConfirm: false,   closeOnCancel: false 
    }, function(isConfirm){
      if (isConfirm) {
        $.ajax({
          type: "POST", 
          data: {id: id},
          url:'ajax/deleteimage.php',
          success : function(data){ 
            if(data == 'ok'){
                    swal({   
                title:"Delete",   
                text: "delete",  
                type: "success",    
                confirmButtonColor: "#AEDEF4",
                confirmButtonText: "Ok",   
                closeOnConfirm: true,   
              }, function(isConfirm){
                    $.when($('.dropzone').find("#"+id).parent().fadeOut())
                                       .done(function() {
                          $('.dropzone').find("#"+id).parent().remove();
                      });
                      var n_div = $('.dz-image-preview').length-1;
                          if (n_div === 0) {
                             $('.dz-message').css("opacity",'1');
                          }
              });
            }else{
              swal("Error, try again", "", "error");  
            }  
               }
        }); // end ajax call 

      } else {     
        swal("Cancel", "", "error");   
      } 
    }); 


  }

I can't change the $('.dropzone') in the success function with the variable element.

Possible duplicate of [How to access the correct \`this\` / context inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — Mike Cluck, Aug 11 '16 at 22:38
It's not clear what the clicked element is. The function accepts `id` but you also attempt to use `this`, as if the function was the click handler. — Roamer-1888, Aug 11 '16 at 23:48

score 1 · Accepted Answer · edited May 12 '17 at 20:09

I faced same issue in jQuery. The main problem is that ajax can't directly access this context inside swal. So, we need to pass this context to ajax. For that first we store this context in a variable then assign that context inside ajax.

$(".delete_category").click(function () {
    var call_url = $(this).val();
    var this_context = $(this);
    swal({
        title: "Are you sure?",
        text: "Your may not be able to recover!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    },
        function () {
            $.ajax({
                context: this_context,
                method: "POST",
                url: call_url,
                success: function (response) {
                    if (response == "success") {
                        swal("Deleted!", "Record deleted successfully.", "success");
                        $(this).closest('.delete_row').hide();
                    } else {
                        swal("Error!", response, "error");
                    }
                }
            });

        }
    );
});

how to access the $(this) inside sweet alert, inside AJAX success

1 Answers1