Question

I am generating an HTML table with PHP (using the codeigniter framework) and I’m trying to add a link that will open a jquery dialog with some information that is specific to that row. Sort of a ‘More Info’ type link that simply opens the dialog.

When I add the dialog div to that row and encapsulate the required information in it, it breaks the table (cannot have a div in the table).

Plus, it seems I would need to add an unknown amount of jquery dialog functions declared… I’m assuming some sort of a function is needed and the ID of the element that opens the dialog as well as the ID for the dialog would be passed to the function. But, it seems there should be something built into jQuery for something like this.

Am I missing something, and if so does anybody have any tips to get me pointed in the right direction?

Answer 1

Embed the information as metadata on the row, a la…

<tr data-foo="additional data here" data-bar="even more data">…</tr>

And in your javascript, a little magic called .live():

$('#your_table .show_dialog').live('click', function(){
  var data_for_dialog = {
    foo: $(this).closest('tr').attr('data-foo'),
    bar: $(this).closest('tr').attr('data-bar')
  }

  show_dialog(data); // your own code to show the dialog
});

Where you have an <a> tag with the class “show_dialog”. Note that this isn’t very efficient if you have a lot of attributes or any of them contain data that needs to contain newlines. You could improve this by iterating over each attribute defined on that <tr> and automatically including the attributes starting with data-. That’s out of the scope of this question though.

As far as showing the dialog, something like this would be sufficient:

function show_dialog(data) {
  var $dialog = $('#dialog');
  for(var attr in data) {
    $dialog.find("." + attr).html(data[attr]);
  }
  $dialog.show();
}

<div id="dialog">
  <p class="data-foo"></p>
  <p class="data-bar"></p>
</div>

That’s untested, but should illustrate what’s happening well enough.

Note: You can define custom attributes in HTML5 so long as they are prefixed with “data-“, hence that showing up everywhere above.