Untested, but this should work:
$('.boxButton').each(function() {
var dialog = $(this).next('.boxDialog').dialog({
autoOpen: false,
bgiframe: true,
modal: true
});
$(this).click(function() {
dialog.dialog('open');
});
});
On Apr 2, 2:58 pm, Andrew <[email protected]> wrote:
> ENVIRONMENT: jQuery 1.3.2, jQuery UI 1.7.1 Core + Dialog
>
> I have been trying to create some generic jQuery preparation functions
> that would setup buttons to open different modal dialog boxes on a
> page. Rather than hard coding the logic or dynamically generating the
> necessary logic, I thought I came up with a clever way.
>
> I have an element with the class "boxParent" which contains a <div>
> with the class "boxDialog". The "boxParent" element will also contain
> a button with the class of "boxButton". Whenever the "boxButton" is
> clicked, I want to open the "boxDialog" contained within the same
> "boxParent". I planned on doing this by traversing up to "boxButton"
> parent with the "boxParent" class and then find its child with
> "boxDialog". Everything was working up to the part of finding
> "boxDialog" and I stumbled upon why.
>
> Whenever I tried to find my <div> as a child of its container, it
> seems it was removed from the inner HTML all together. This explains
> why my logic could not find it. However, I still want to tie together
> dialogs and buttons relationally rather than hard code or dynamically
> create logic to prepare them.
>
> Could anyone give a hand? Thanks!
> Andrew
>
> <?xml version="1.0" encoding="UTF-8" ?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
> <head>
> <script type="text/javascript"
> src="jquery-1.3.2.min.js"></script>
> <script type="text/javascript"
> src="jquery-ui-1.7.1.custom.min.js"></script>
> <link type="text/css"
> href="smoothness/jquery-ui-1.7.1.custom.css"
> rel="Stylesheet" />
> <script type="text/javascript">
>
> $(function() {
>
> $('.boxParent').each(function() {
> alert("Pre-Dialog Box Parent
> HTML: " + $(this).html());
> });
>
> $('.boxDialog').each(function() {
> $(this).dialog({ bgiframe:
> true, autoOpen: false, modal: true });
> });
>
> $('.boxParent').each(function() {
> alert("Post-Dialog Box Parent
> HTML: " + $(this).html());
> });
> });
>
> </script>
> </head>
> <body>
> <form>
> <table>
> <tr>
> <td>SOME DESCRIPTION:</td>
> <td class="boxParent">
> <button type="button"
> class="boxButton">Should open dialog in parent</buton>
> <div class="boxDialog"
> title="Sample dialog box">
> This is a
> random dialog box that should show up as a
> child of
> boxParent
> </div>
> </td>
> </tr>
> <tr>
> <td>SOME DESCRIPTION:</td>
> <td class="boxParent">
> <button type="button"
> class="boxButton">Should open dialog in parent</buton>
> <div class="boxDialog"
> title="Sample dialog box">
> This is ALSO a
> random dialog box that should show up
> as a child of
> boxParent
> </div>
> </td>
> </tr>
> </table>
> </form>
> </body>
> </html>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
