Hey Lyza,
The problem is that when you initialize a dialog it gets moved to the
end of the body to ensure proper z-index in IE. Something like this
should work:
$(document).ready(function() {
$('div.help_dialog').each(function() {
// store reference to link before creating dialog
var link = $(this).prev('div.help_link');
var dialog = $(this).dialog( {autoOpen: false});
link.click(function() {
dialog.dialog('open');
});
});
});
On Jun 11, 1:59 am, Lyza Danger Gardner <[email protected]> wrote:
> Hi There,
>
> Long time jQuery core user, first time jQuery UI user, so please
> forgive me if I am being daft.
>
> I am trying to work the UI Dialog element into a page. Specifically I
> want to use it in a way to provide tool-tip-like dialogs for some
> elements on the page. In this particular case the client wishes for a
> click-to-show tool-tip instead of a more typical hover-driven deal.
> Long story. Anyway.
>
> My markup looks like--or at least I would like it to look like--this:
>
> <div class="help_link">[help icon/fallback text]</div><div
> class="help_dialog">[A bunch of help text and markup, for the dialog]</
> div>
> [...]
> <div class="help_link">[help icon/fallback text]</div><div
> class="help_dialog">[A bunch of help text and markup, for the dialog]</
> div>
> [...]
>
> The desired effect is for clicks on div.help_link elements to open the
> dialog in the next-most div.help_dialog. Using jQuery metaphors, it
> feels like this should work (I'm even using .each() to be extra
> explicit here):
>
> $(document).ready(function() {
> $('div.help_dialog').each(function() {
> $(this).dialog( {autoOpen: false});
> });
> $('div.help_link').click(function() {
> $(this).next('div.help_link').dialog('open');
> });
>
> });
>
> This doesn't even sort of work, however. I've tried noodling around a
> bit. If I don't do the initialization bit and call dialog() on each
> click, e.g.
>
> $(document).ready(function() {
> $('div.help_link').click(function() {
> $(this).next('div.help_link').dialog();
> });
>
> });
>
> the dialog works once but not on subsequent clicks. This is not
> terribly surprising as the docs indicate the initialize should only be
> performed once.
>
> If I take an ID-based approach, such that my markup looks like:
>
> <div class="help_link" id="this_particular_help_link">[help icon]</
> div><div class="help_dialog" id="this_particular_help_dialog">[A bunch
> of help text and markup, for the dialog]</div>
>
> and:
>
> $(document).ready(function() {
> $("div#this_particular_help_dialog").dialog({ autoOpen: false });
> $("div#this_particular_help_link").click(function() {
> $("div#this_particular_help_dialog").dialog('open');
> });
>
> });
>
> it totally works. But what ugliness to have to use IDs like this. I
> feel like I'm missing something singular and obvious that is keeping
> me from being able to figure out how to use a class-based approach.
> Any help much appreciated.
>
> Cheers,
> Lyza Danger Gardner
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
