Question

I have an image next to each radio button on a form. The number and content of radio buttons are fetched from a database. I’m trying to create a click event on those images, which provides a quick intro about the respective option.

$('#icon').click(function() {
    $('#dynamicid').dialog();
    return false;
});

I know how to create a dialog on click, but not how to create it from div whose id and content are fetched from DB using php. How can I do that?

P.S: I’m new to jQuery.

Answer 1

A lot of this depends on the surrounding factors. Like where exactly the dialog divs come from.

Let’s assume for a moment that regardless of other markup, you have your image to be clicked, and your dialog div is the next sibling in the markup:

<div id="wrapper">
  <input type="radio"> <!-- simplified; I didn't look up the actual markup syntax -->
  <img src="foo" class="clicky"/>
  <div class="dialog">This is the related dialog</div>

  <input type="radio"> <!-- simplified; I didn't look up the actual markup syntax -->
  <img src="bar" class="clicky"/>
  <div class="dialog">This is related to the previous image</div>
</div>
<div id="myDialog"></div> <!-- a container that can be reused; put it right before the body tag closes -->

You hide the dialog divs because you don’t need them visible until the click:

.dialog, #myDialog { display: none; }

Then you delegate or otherwise bind a click to this type of image. I like delegate:

$('#wrapper').delegate('img.clicky', 'click', function() {
  var theContent = $(this).next().html();
  $('#myDialog').html(theContent).dialog();
});

It’s that simple. The wrapper is listening for the click (this can be any ancestor that’s going to contain your clickable images), click is heard on the image (which is “this”). We use jQuery to traverse to the next sibling (the dialog div), add its contents to our container div, and call dialog() on it.

Updated fiddle: http://jsfiddle.net/txugb/3/

(Note that although jQuery UI is included, its CSS is not; the dialog won’t look right but it will appear.)

[update:]
In response to possible layout concerns with the way I proposed, I modified the function to reuse a single dialog container.

It occured to me after the poster’s comment that the initial suggestion might have been flawed all along. When jQuery UI hides the dialog, I believe it appends it to the body tag.