Getting a php variable and passing it to a jQueryUI dialog

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?

JAAulde · Accepted Answer · 2011-11-21 04:42:14Z

2

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.

edited Nov 21, 2011 at 4:42

answered Nov 21, 2011 at 4:25

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MikeS Over a year ago

I actually have 3 more dialogs that needed fixing. You answered everything with this. I am just grateful. Thanks, again.

MikeS Over a year ago

JAAulde, is there a way I can echo the value of $username to a form? Let's say <input type="hidden" name="uid" value="{echo the value of $username}"/>

JAAulde Over a year ago

Sure, you can always do: <input type="hidden" name="uid" value="<?php echo htmlentities($username); ?>"/>. But if you mean to relate that to your original question, I'll need you to be more specific.

davidethell · Accepted Answer · 2011-11-21 04:18:49Z

0

Rather than binding click to #opener you should have an onclick handler on you anchor tag that calls a function with those arguments. That function will then set the contents of your dialog elements that are used by the dialog function. Maybe something like this:

<td><a onclick="openDialog('<?= $realname; ?>','<?= $username; ?>');">Send Message</a></td>

Then your function would be:

function openDialog(realname, username) {
    // set the contents of you dialog elements.
    $('#messageRealname').text('realname');
    $('#messageUsername').text('username');
    // now open the dialog
    $dialog.dialog('open');
}

Then

answered Nov 21, 2011 at 4:18

davidethell

12.1k6 gold badges47 silver badges67 bronze badges

6 Comments

davidethell Over a year ago

Note, I realize many don't favor php shorttags so substitute <?php echo if that is your preference.

shesek Over a year ago

Please don't use the onclick attribute, there's no reason to mixup HTML and JavaScript together. Put the username in a place that's convinient to access from JavaScript (like custom data- attributes) and bind to the click event from JavaScript. If you are going to do itlike that, make sure to properly encode it with json_encode for usage in js code and htmlspecialchars for usage as an HTML attribute.

JAAulde Over a year ago

I will second the plea to avoid using the onclick attr--especially since jQuery is available and in use.

davidethell Over a year ago

Interesting. Why not mix them? What is the advantage to avoiding onclick? What purpose does it serve to avoid using onclick and instead bind all your clicks?

andyb Over a year ago

@davidethell It is analogous to moving in-line CSS into an external file, thereby separating presentation and structure. In this case, separating presentation and behaviour offers greater encapsulation of JavaScript logic, it does not pollute the mark-up - enabling smarter browser caching of the JavaScript, since it is in an external file. The downside is that it could become difficult to track which elements have bound events without well structured JavaScript.

|

Collectives™ on Stack Overflow

Getting a php variable and passing it to a jQueryUI dialog

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related