AJAX Tabs and Dialog won't work alongside one-another, work fine separately,,,
When researching my problem, most of the links I find are people trying to put tabs inside a dialog box. I'm not trying to do that, this is more straightforward... I can get tabs to load remote content via AJAX, and the dialog to function as a logout menu, but only separately. My problem is the dialog stops working when the AJAX tabs are introduced. If the tabs simply load div content, as the example on the JQuery UI example page does, it all works fine. I am using the pepper-grinder theme.
My firebug reports this error:
$("#dialog").dialog is not a function
WTF!? If I remove the tabs, it works...
Here is relevant code:
<script type="text/javascript">
$(function(){
$('#tabs').tabs({
fx: {
opacity: 'toggle',
duration: 'slow'
}
});
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$('#dialog').dialog({
autoOpen: false,
width: 600,
show: 'explode',
buttons: {
"Yes": function() {
document.location = 'logout.php';
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
---------------------------------
<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>LOGOUT</a></p>
<div id="dialog" title="Are you sure you wish to logout?"></div>
<div id="tabs">
<ul>
<li><a href="contacts.php"><span>Contacts</span></a></li>
<li><a href="pingmonitor.php"><span>Ping Monitor</span></a></li>
<li><a href="colosensors.php"><span>Colosensors</span></a></li>
<li><a href="urlmonitor.php"><span>URL-Monitor</span></a></li>
<li><a href="admin.php"><span>Admin</span></a></li>
</ul>
</div>
Thanks in advance for any help!