jQuery-UI Dialog

Question

I'm new to jQuery, and now I want to use jQuery-UI Dialog to show a nice message with long text to the user. The problem is that I want that every row in my Html table will have a "More details" link that will cause the jQuery Dialog window to open with the text from this specific row. What should I add to the code that came with the jQuery-UI Dialog example? :

            // Dialog           
            $('#dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function() { 
                        $(this).dialog("close"); 
                    }, 
                    "Cancel": function() { 
                        $(this).dialog("close"); 
                    } 
                }
            });

Thanks.

Answer 1

An alternative is to use the tiny jTruncate plugin.

http://blog.jeremymartin.name/2008/02/jtruncate-in-action.html

Answer 2

You're going to want to bind an event handler to each row (or, better, use ".delegate()" on the table), probably for "click":

$('#yourTable').delegate("tr", "click", function() {
  var $row = $(this);
  // setup code here, and then:
  $('#dialog').dialog('open');
});

In that handler, you'll want to pull stuff from the row and populate something in the dialog to reflect the table row contents.

edit — If you want only clicks in specific columns to bring up the dialog, you can just change the selector in the call to ".delegate()". For example, you might give the clickable <td> cells class "info", so that you could then do this:

 $('#yourTable').delegate("td.info", "click", function() {
   var $cell = $(this), $row = $cell.closest('td');
   // setup code ...
   $('#dialog').dialog('open');
 });