Question

I have a list of objects. Each object has its own values. On webpage they are presented as rows. What I want to do is to add JQuery dialog that pops up when a link on a specific row is clicked. What is the best way to do that? Is is better to define a dialog in every row or just use one? Problem is I can’t reach elements inside dialog to fill them with row data. Is there any good example concerning this? Thank you

Answer 1

Just use one dialog, it should be initially hidden anyway:

<div id="rowDialog" style="display:none">
  <div id="rowDialogDiv">in here we are
  </div>
  <button id="rowDialogButton>Custom button</div>
</div>

initialize dialog, not showing it at first:

$('#rowDialog').dialog({ autoOpen: false });

put in an event handler for the row:

$("tr").click(function(){
  var rowClicked = $(this);
  $('#rowDialogDiv).text('In the dialog, show we clicked row:' + rowClicked.index());
  $('#rowDialog").dialog("open");
});

Strongly suggest you give the table and ID and then access the table rows from that for speed and, just in case you have multiple tables etc.

You can also have event handlers for the dialogs elements:

$('#rowDialogButton').click(function(){
//do button stuff
});