Unable to select jQuery UI Dialog child from parent element via class selectors
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>