Sorry; moving this to jQuery UI General Discussion list.
On Apr 2, 1:30 pm, Andrew <[email protected]> wrote:
> I have done a little more work by boiling down the situation to just
> the basics and have confirmed that once a <div> becomes a dialog box
> that it is removed from the inner HTML of its parent container /
> entity. This should explain why the parent does not know about it. I
> don't know if this is by design or what, but it would be helpful to
> detect dialog boxes aside from selecting every one of them. Here is
> some sample code to illustrate the situation better; requires jQuery
> 1.3.2 and jQuery UI 1.7.1 with Core and Dialog minimum.
>
> I would really appreciate any insight into solving this problem!
> 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, height: 500,
> width: 500, 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">
> <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">
> <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>
>
> On Apr 2, 8:27 am, Andrew <[email protected]> wrote:
>
> > PROBLEM: Unable to find jQuery UI Dialog <div> amongst children of a
> > tag.
> > ENVIRONMENT: jQuery 1.3.2, jQuery UI 1.7.1 Core + Dialog
>
> > Let me explain the sample code below. I have some page with multiple
> > modal dialogs that I initialize with the first anonymous function in
> > the <script> block; modal dialogs have a class of "modal". Each
> > dialog will have a corresponding button that triggers when the dialog
> > is opened; these buttons have a class of "modalButton". Finally, a
> > modal dialog and its button are contained within some entity with a
> > class of "modalParent".
>
> > After I initialize all of the modal dialogs, I attempt to assign modal
> > buttons their onClick events. I attempt to do this by finding all
> > "button.modalButton", traversing to each button's parent, and then
> > look for the entity with the "modal" class within the parent. My
> > logic works to the point of finding the modal dialog, but that is when
> > jQuery cannot find it. I tried experimenting with what the problem
> > could be. If I disable the initial setup of modal dialogs, then
> > jQuery can find the <div> element(s).
>
> > SAMPLE CODE:
>
> > <html>
> > <head>
> > <link type="text/css" href="css/smoothness/jquery-
> > ui-1.7.1.custom.css" rel="Stylesheet" />
> > <script type="text/javascript" src="scripts/
> > jquery-1.3.2.min.js"></script>
> > <script type="text/javascript" src="scripts/jquery-
> > ui-1.7.1.custom.min.js"></script>
> > <script>
>
> > $(function() {
>
> > $('.modal').each(function() {
> > $(this).dialog({ bgiframe: true, autoOpen: false,
> > height: 500, width: 500, modal: true });
> > });
>
> > $("button.modalButton").click(function() {
> > $(this).parent(".modalParent").children(".modal").each
> > (function() {
> > $(this).dialog("open");
> > });
> > });
> > });
>
> > </script>
> > </head>
> > <body>
> > <table>
> > <tr valign="top">
> > <td>Counties/Parishes:</td>
> > <td class="modalParent" colspan="6">
> > <button class="modalButton" type="button">Select
> > counties / parishes</button>
> > <br />
> > <span id="descriptions"></span>
> > <div class="modal" title="Select counties /
> > parishes">
> > <input type="checkbox" id="countyABCD"
> > name="counties" value="ABCD" />
> > <label for="countyABCD">County ABCD</label>
> > ...
> > </div>
> > </td>
> > </tr>
> > </table>
> > </body>
> > </html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" 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-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
