Dynamic Dialog using jQuery

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.

if you don't know php, then you'll need to spend some time learning php. — zzzzBov
– zzzzBov, Commented Oct 26, 2011 at 4:03
did you have a chance to do the hidden div with content behind each image? Then dialog() can be populated with the hidden div description — Anatoly
– Anatoly, Commented Oct 26, 2011 at 4:06
There are a million ways to skin this cat. Do you have a #dynamicid corresponding to each image? If so, is it worth considering retrieving that dialog text via Ajax instead? Or instead of creating all the divs, storing all that data in a JavaScript array or other data store for later retrieval? — Greg Pettit
– Greg Pettit, Commented Oct 26, 2011 at 4:11
@GregPettit - I thought about using Ajax. But since the number of options will be less than 5 and content is not too big, serving them statically seemed like a better option.. — vidit
– vidit, Commented Oct 26, 2011 at 4:18

Greg Pettit · Accepted Answer · 2011-10-26 04:58:26Z

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.

edited Oct 26, 2011 at 4:58

answered Oct 26, 2011 at 4:25

Greg Pettit

10.8k5 gold badges57 silver badges73 bronze badges

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

5 Comments

vidit Over a year ago

Thanks, it works. But when I add another image and try opening and closing it 2-3 times, its messing up the layout.

Greg Pettit Over a year ago

I'd have to see a live example to be able to help troubleshoot what's going on. How is the new image being added? Or if you mean adding a new image to the fiddle, it's not entirely unexpected. The jQuery UI classes are all missing; it was just meant to be a hyper-quick demonstration.

vidit Over a year ago

Here it is.. jsfiddle.net/txugb/2 Open and close the dialogue 2-3 times on both images and you'll see weird effects.

vidit Over a year ago

This works great.. Thanks Greg. Seems like there's lot more to learn in jQuery.

Greg Pettit Over a year ago

Glad it's working; I think in this case it's more a case of jQuery UI's quirks than jQuery Core. It's the UI component that is programmed to append the dialog div to body; seems like an odd approach, but the end result is actually more efficient anyhow; even if it worked the way I originally thought, "recycling" the dialog div is more efficient in terms of DOM manipulation.

Collectives™ on Stack Overflow

Dynamic Dialog using jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related