CODEWITHSUNDEEP
phpjquerycodeigniter
iddimu
iddimu

Reputation: 99

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

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?

Upvotes: 1

Views: 2448

Answers (2)

coreyward
coreyward

Reputation: 80041

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.

Upvotes: 2

Kumu
Kumu

Reputation: 2406

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

Upvotes: 1

Related Questions