Unable to select jQuery UI Dialog child from parent element via class selectors

Unable to select jQuery UI Dialog child from parent element via class selectors


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>