How to use $(this) on AJAX success?

debugcn Published at Dev

Shota

There are buttons in the each rows of the table. When user click it, a sweetalert is fired to display confirmation window. If user click yes, then an AJAX is executed to post the row values.

The post process is working, but I am unable to change the button attribute and a label text after AJAX success call. This is my script.

$("#tbl_list_pemenuhan tbody").on('click','.btn_memo', function() {                 

    var no_penuh    = $(this).closest('tr').find("td:eq(1)").text();
    var no_minta    = $(this).closest('tr').find("td:eq(2)").text();

    var data        = 'no_pnh='+no_penuh+'&no_mnt='+no_minta;


    swal({
        title               : "Apa anda yakin?",
        type                : "warning",
        showCancelButton    : true,
        confirmButtonColor  : "#0C0",
        confirmButtonText   : "Ya!",
        cancelButtonText    : "Batal",
        closeOnConfirm      : true
    },function(){

        var elem = $(this);

        $.ajax({
            type    : "POST",
            url     : "<?php echo site_url('con_atk/buat_memo_direct'); ?>",                        
            data    : data,                     
            success : function(data){   
                elem.attr('disabled','disabled');
                elem.closest('tr').find('label').text('SENT');

                alert("SUCCESS");
            }
        });             
    });     
});

note: in the AJAX success, the alert is executed but not the elem

connexo

Cause of the problem

Functions declared the way you did have their own this, so using $(this) no longer gets you the element that triggered the event.

Solution 1

Define var elem = $(this); outside the inner function() (the one containing the ajax call).

Solution 2

bind this at the end of the function() { ... }.bind(this).

Solution 3 (ES6)

Arrow functions do not have their own this so replacing function() by ()=> also does the job, but will only work if you run it in an ES6 capable browser (or if you're using a transpiler like Babel).

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-08-9

Comments

0 comments

From Dev

Related Related

Article