ui dialog -- Ajax not working in loaded page

ui dialog -- Ajax not working in loaded page


I have a page called fungo.php that opens a dialog using some example
code -- This part works ok:
<?php
require_once("/var/www/config.php");
$tc=array('Joe', 'Biff');
?>
<!doctype html>
<html>
    <meta charset="utf-8">
    <title>Loading a page into a dialog</title>
    <link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-
ui.css">
    <style type="text/css">
    #tire-specs {
        border-collapse: collapse;
    }
    #tire-specs th,
    #tire-specs td {
        padding: 2px 5px;
        border: 1px solid #000;
    }
    </style>
<script type="text/javascript" src="<?php echo $js_JQuery; ?>"> </
script>
<script type="text/javascript" src="<?php echo $js_form; ?>"></script>
<script type="text/javascript" src="<?php echo $js_ajax; ?>"></script>
<script type="text/javascript" src="<?php echo $js_livequery; ?>"></
script>
<link type="text/css" href="http://192.168.1.100/apps/ctracker/
library/js/Jqtheme/development-bundle/themes/redmond/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.resizable.js"></script>
<script type="text/javascript" src="js/ui.dialog.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#tire-specs th a').each(function() {
            var $link = $(this);
            var $dialog = $('<div></div>')
                .load($link.attr('href') + ' #content')
                .dialog({
                    autoOpen: false,
                    title: $link.attr('title'),
                    modal: true,
                    width: 600
                });
            $link.click(function() {
                $dialog.dialog('open');
                return false;
            });
        });
    });
    </script>
    <script type="text/javascript">
$(document).ready(function()
{
$('a.ajaxify').livequery(function(){
$(this).ajaxify({
     target: '#container'
});
});
});
</script>
</head>
<body>

This is an example from the Nemikor Blog article <a href="http://
blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/">Loading a
page into a dialog</a>.


<h2>Michelin Primacy MXV4</h2>
<?php foreach ($tc as $t) { ?>
<table id="tire-specs">
    <thead>
        <tr>
            <th>Size</th>
            <th><a href="drops.php?name=<?php echo $t; ?>" title="Uniform Tire
Quality Grade">Uniform Tire Quality Grade</a></th>
            <th>Max Load</th>
            <th>Max Inflation Pressure</th>
            <th>Tread Depth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>205/65R15</td>
            <td>620 A A</td>
            <td>1477 lbs.</td>
            <td>44 psi</td>
            <td>11/32"</td>
        </tr>
    </tbody>
</table>

<?php } ?>
</body>
</html>
It loads the contents of this page into the dialog:
<?php
require_once("/var/www/config.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div id="content">
<a class="ajaxify" href="content.php">Click</a>
</div>
<div id="container"></div>
</body>
</html>
The linked content will not load inside the dialog box -- nothing
happens. If I move the <div>
<div id="container"></div>
to the initial page the ajax works but does not load inside the dialog
box.
How do I get the content of the content.php page to load inside the
dialog box?
Thanks,
SW