Pass JQuery context $(this) to another function and retrieve context data

Question

I'm using Metronic bootstrap admin them, which comes with sweetalert - which is an alert library

What I'm trying to do is to do a confirm alert on attempting to delete a record from the table , each row has a delete button

now Metronic has gone and did a little bit of extension on it, so you can now use html 5 "data" attributed to declaratively to declare title, button types etc.

in my MVC app, the following Razor code iterates and adds the button, note that I'm adding the data-id attribute to it - the idea being that I can extract it when the button is clicked to get the id to delete it

e.g.

<button data-id="@u.Id" type="button" class="btn btn-xs btn-circle red btn-delete mt-sweetalert" data-title="Are you sure?" data-type="warning" data-allow-outside-click="true" data-show-confirm-button="true" data-show-cancel-button="true" data-cancel-button-class="btn-danger" data-cancel-button-text="Cancel" data-confirm-button-text="Proceed" data-confirm-button-class="btn-info">
                                    <i class="fa fa-times"></i>
                                </button>

the following is the Metronic JS extension file - I have added a few lines of code to it, so it calls a custom function on clicking the confirm option.

the idea being that I can leave the additions by Metronic Theme intact and call a custom function on the page where I need it

note that I'm also passing in the $(this) context to my custom function

var SweetAlert = function () {

return {
    //main function to initiate the module
    init: function () {
        $('.mt-sweetalert').each(function(){
            var sa_title = $(this).data('title');
            var sa_message = $(this).data('message');
            var sa_type = $(this).data('type'); 
            var sa_allowOutsideClick = $(this).data('allow-outside-click');
            var sa_showConfirmButton = $(this).data('show-confirm-button');
            var sa_showCancelButton = $(this).data('show-cancel-button');
            var sa_closeOnConfirm = $(this).data('close-on-confirm');
            var sa_closeOnCancel = $(this).data('close-on-cancel');
            var sa_confirmButtonText = $(this).data('confirm-button-text');
            var sa_cancelButtonText = $(this).data('cancel-button-text');
            var sa_popupTitleSuccess = $(this).data('popup-title-success');
            var sa_popupMessageSuccess = $(this).data('popup-message-success');
            var sa_popupTitleCancel = $(this).data('popup-title-cancel');
            var sa_popupMessageCancel = $(this).data('popup-message-cancel');
            var sa_confirmButtonClass = $(this).data('confirm-button-class');
            var sa_cancelButtonClass = $(this).data('cancel-button-class');

            $(this).click(function(){
                //console.log(sa_btnClass);
                swal({
                  title: sa_title,
                  text: sa_message,
                  type: sa_type,
                  allowOutsideClick: sa_allowOutsideClick,
                  showConfirmButton: sa_showConfirmButton,
                  showCancelButton: sa_showCancelButton,
                  confirmButtonClass: sa_confirmButtonClass,
                  cancelButtonClass: sa_cancelButtonClass,
                  closeOnConfirm: sa_closeOnConfirm,
                  closeOnCancel: sa_closeOnCancel,
                  confirmButtonText: sa_confirmButtonText,
                  cancelButtonText: sa_cancelButtonText,
                },
                function(isConfirm){
                   //action function on click
                    if (isConfirm){
                        swal(sa_popupTitleSuccess, sa_popupMessageSuccess, "success");


                        //custom function call added by me
                        //------------------------------------------
                        if(typeof onConfirmClick === "function")
                            onConfirmClick.call(this);
                        //------------------------------------------


                    } else {
                        swal(sa_popupTitleCancel, sa_popupMessageCancel, "error");
                    }
                });
            });
        });    

    }
}

}();

jQuery(document).ready(function() {
    SweetAlert.init();
});

The function in my page:

<script type="text/javascript">
    function onConfirmClick() {
        alert($(this).data('id'));
        //make Ajax call here
    }
</script>

Now the problem is, I'm getting the ($this) but not able to get the id or any attribute from the button for that matter

if I print $(this) in console

and just "this"

The question here is:

1. how can I get the data-id attribute in my function ? if I try $(this).data('id') - I get undefined
2. Is this the correct approach design wise ? I want to be able to call a custom function on confirm but not disrupt Metronic extensions on sweetalert ?

Answer 1

To pass the id from the button's data-id to the onConfirmClick() function... I would try to make it transit via a variable.

So on click of a .mt-sweetalert, a SweetAlert is triggered.

Nothing stops you to have another click handler to store the id in a variable accessible by the function.

var sweetAlertId;
$(".mt-sweetalert").on("click", function(){
  sweetAlertId = $(this).data("id");
});

Then in the function:

function onConfirmClick() {
    alert(sweetAlertId);
    //make Ajax request using sweetAlertId here!
}

In short, the id is not forced to transit via SweetAlert!
;)