Delete confirmation - pass data from html when modal popup is opened

Question

I have a delete confirmation popup which is opened on click of delete link.

My HTML:

<div id="deleteModal">
        <p>Are you sure ? </p>
 </div>

<ul data-bind="foreach: activList">
<li class="icn add" data-bind="click: function () { $root.deleteFileAsset('Image', $data); }">
<a data-bind="click: function () { $root.deleteImage('Image', $data); }">
<img src="../../CSS/images/DeleteCross.png" />
</a>
<b data-bind="text: title"></b>
</li>
</ul>

In my JS file (as soon as I click on delete, the below method is called):

var _deleteImage = function (koList, data) {
        window.event.cancelBubble = true;
        $('#deleteModal').dialog("open");
    }

//Modal popup is opened with the below code which is in ready function
//Ready Function//
$('#deleteModal').dialog({
            autoOpen: false,
            modal: true,
            width: 628.73,
            height: 328.38,
            buttons: {
                'Submit': function () {
                    _deleteFile(koList, data);
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

//This function is called in the submit click of modal popup
_deleteFile(koList, data)
{
 // code for deletion goes here
}

Now what happens here is,

1. The popup is opened when clicked on delete.
2. In the popup when I click on submit, it throws error: koList is úndefined' .

I need the data and KoList to be passed on confirmation of delete click. Because that particular data is used in delete method.

Answer 1

You need to store somewhere the data you want to pass, as koList and data variables are local.

You could try adding this line in _deleteImage which uses jQuery to store the data on the DOM node of the modal:

$('#deleteModal').data('_tmpData', { koList: koList, data: data });

and modify submit callback:

function () {
var tmpData = $(this).data('_tmpData');
_deleteFile(tmpData.koList, tmpData.data);
$(this).dialog("close");
}