side note: if you use jquery to hide help_dialog the clone will also be
hidden
here's fix if use jquery to hide on page load
$(this).next(".help_dialog").clone().show().appendTo("#dialog");
don't seem to need to do this ( in FF anyway) if use css to hide with
display:none
you can easily
recycle the same dialog for all your class links and
only use one dialog for all of them
$(".help_link").click(function () {
$('#dialog').empty();
$(this).next(".help_dialog").clone().appendTo("#dialog");
$('#dialog').dialog('open');
});
Lyza Danger Gardner 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
-~----------~----~----~----~------~----~------~--~---
|
