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 -~----------~----~----~----~------~----~------~--~---
