Reputation: 26341
Often I have a table or a list, and I want to create an event when a given row is clicked, and do something specific to the clicked row. To do so, I have been defining data() within click(). Sometimes I just send a piece of data and other times I send the entire row.
Is the way I am doing this the best way, or is there a better way? Is it best to send just the required data to the dialog, or send the entire object over (i.e. row in my case) and extract data within the dialog?
Thanks
$("#someTable tbody").on("click", "a.doIt", function() {
$("#dialog").data('id',$(this).parent().parent().attr('data-id')).dialog("open");
//$("#dialog").data('id',$(this).parent().parent()).dialog("open");
return false;
});
$("#dialog").dialog({
open : function() {
alert($(this).data('id')+' is available.');
//alert($(this).data('row').attr('data-id')+' is available.');
},
buttons : [
{
text : 'CLOSE',
"class" : 'gray',
click : function() {
alert($(this).data('id')+' is available.');
//alert($(this).data('row').attr('data-id')+' is available.');
$(this).dialog("close");
}
}
]
});
<table id="someTable">
<tbody>
<tr data-id="123"><td><a href="javascript:void(0)" class="doIt">aaa</a></td><td>bbb</td></tr>
<tr data-id="321"><td><a href="javascript:void(0)" class="doIt">ccc</a></td><td>ddd</td></tr>
<tr data-id="111"><td><a href="javascript:void(0)" class="doIt">eee</a></td><td>fff</td></tr>
</tbody>
</table>
Upvotes: 1
Views: 3568
Reputation: 3015
You can pass the data for ui-dialog like this
document.getElementById('dialog-modal').innerHTML = '<span style="font-family:sans-serif;font-size:18px">'+str+'</span>';
$( "#dialog-modal" ).dialog({
height: 120,
modal: true,
resizable:false,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
$(".ui-dialog-titlebar").hide();
You can change the innerHTML of the id you want and then open the dialog box.
UPDATED:
$("#someTable tbody").on("click", "a.doIt", function() {
$("#dialog").html($(this).parent().parent().attr('data-id').html());
$("#dialog").dialog({
height: 120,
modal: true,
resizable:false,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});});
Upvotes: 1