How can I add a jQuery Dialog for each row in an HTML table

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?

Why don't you create just one dialog on demand and fill it with the correct information based on the relevant row? Creating _x_ dialogs like this seems very inefficient. — Lightness Races in Orbit, Jan 07 '11 at 02:58
Could you give a screenshot or url example of what you think of when you say dialog? — Matrym, Jan 07 '11 at 03:03

score 2 · Accepted Answer · edited May 23 '17 at 11:47

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.

Will there be a problem with this working in non-HTML 5 browsers? — iddimu, Jan 07 '11 at 14:37
Not at all. Most of HTML5's actual spec-changes document existing functionality in browsers and standardize behavior. This is one of those areas. You are free to use any attributes you like, but the data-prefixed ones are going to be safe from changes in behavior in the future. — coreyward, Jan 07 '11 at 15:50
That works great! Took a few slight modifications, but works perfect after that...thanks!! — iddimu, Jan 07 '11 at 18:29

Kumu · Answer 2 · 2011-01-07T03:19:59.540

1

I agree with Tomalak's comment to use one box and change the content in it. If you wanted to do what I think you are trying to do(without seeing your code) it seems that you might be putting the dialog div in the <table> tag instead of a <td> tag, that would be the first thing to check.

Secondly to open the dialog you can just reference the div next to the link:

<table>
  <tr>
    <td>
      <span class="MoreInfo">More info</span>
      <div>stuff for dialog</div>
    </td>
  </tr>
</table>

$(document).ready(function(){
    $('.MoreInfo').next().dialog({ autoOpen: false })
    $('.MoreInfo').click(function(){
         $(this).next().dialog('open');
    });
});

Edit: Sorry messed up the Jquery I am assuming you are using the JqueryUI Dialog

edited Jan 07 '11 at 03:19

answered Jan 07 '11 at 03:14

Kumu

2,386
2
13
9

Thanks Kumu, I think this will work exactly like I need...but, something is wrong with the .click(function(){ ... I know it's setting the dialog correctly in the previous statement because if I set autoOpen to True it fires when the page is finished loading. But, I cannot figure out why the dialog won't open on click. If I put an alert in there it fires on ('MoreInfo').click, so I know it's capturing the event. Any suggestions? – iddimu Jan 07 '11 at 05:09
Oh, and yes I am using the jQueryUI Dialog – iddimu Jan 07 '11 at 05:16
I don't recommend doing this. You're initializing potentially hundreds of jQuery UI dialogs on document ready, which is going to have performance implications. Not to mention, it's not very graceful. – coreyward Jan 07 '11 at 09:26
Yeah - I did notice a definite lag in load time when the dialogs were getting initialized. I'm not a jQuery or Javascript guru at all and couldn't figure out how to get the technique in your answer to work. I'll give it another shot tonight. – iddimu Jan 07 '11 at 14:35

How can I add a jQuery Dialog for each row in an HTML table

2 Answers2