Passing parameters from href to jquery dialog - jquery-ui

Question

I have several delete href on a page.
</i>
When a user clicks on this link I'm showing a jquery box to ask if he is sure to delete.
Until now everything is working fine, but I can't the window.location.href with the parameters from data-key to work. Some help would much appreciated.
I have followed this example: http://jsfiddle.net/yayh3/3/
<script>
$(".delete").click(
function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:170,
modal: true,
buttons: {
"Verwijder": function() {
var me = $(this),
data = me.data('key');
window.location.href = "pagina_delete.php?id_record="+data.param1+"&id_table="+data.param2+"&table="+data.param3+"&paginanaam="+data.param4+"&template="+data.param5+"&lang="+data.param6;
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
}
);
});
</script>

Answer 1

You need to capture the context of the clicked element.
Directly within the click event handler, you can store the current value of this (which will refer to the clicked element), and then you can use this variable within the nested dialog methods/options.
In this case, you would just use var data = $(self).data('key') within the dialog method.
$(".delete").click(function () {
var self = this;
$("#dialog-confirm").dialog({
resizable: false,
height: 170,
modal: true,
buttons: {
"Verwijder": function () {
var data = $(self).data('key');
window.location.href = "pagina_delete.php?id_record=" + data.param1 + "&id_table=" + data.param2 + "&table=" + data.param3 + "&paginanaam=" + data.param4 + "&template=" + data.param5 + "&lang=" + data.param6;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});