Question

I am using the jQueryUI dialog widget in a website I’m developing. Basically, the page lists a list of friends and a link to send a message to each. Here’s a snippet of the html.

...
<td><?php echo $realname; ?></td>
<td><?php echo $username; ?></td>
<td><a href="#" id="opener">Send Message</a></td>
...

My javascript looks like:

$(document).ready(function() {
 var $dialog = $('#dialog')
  .dialog({
   autoOpen: false,
   resizable: false,
   modal: true,
   height: 350,
   dialogClass: 'no-close',
   draggable: false
 });
 $("#opener").click(function() {
   $dialog.dialog('open');
   return false;
 });
 $('#closedialog').click(function() {
   $dialog.dialog("close");
   return false;
 });
});

And lastly, at the bottom of my html, it goes:

<div id="dialog" title="Send a message"><form action="<?php echo $currURL; ?>">
 <p>To: {would want for something like "RealName (username)" to appear here}</p>
  <div align="center">
  <textarea cols="40" rows="10"></textarea>
  </div>
 <p align="right"><span class="button" style="text-align: right;">
  <input type="submit" value="Submit" /><button id="closedialog">Cancel</button>
 </span></p>
</form></div>

Let’s say the first person on your friends list is John Smith (johnsmith) and the next one is Jane Smith (janesmith). Would it be possible to pass the values of $realname and $username just for that table row so it would be printed out as well in the jQuery dialog widget? – Or – Do you have suggestions on how to do this better/efficiently?

Answer 1

• Put some place-holders in your dialog, find them and store a reference to them.
• Change your id="opener" to class="opener"
• Whenever a .opener link is clicked, look in the TDs around it for the values you’re after and write them into your referenced place-holders

Demo
http://jsfiddle.net/uHXbV/5/

This could be further enhanced by using data- attrs or something similar, but the demo has as little as possible impact on the original code in order to keep it easy to understand.