iframe and jquery ui tabs
I am testing a web page that uses an iframe to call a page that uses jquery ui tabs and ajax to load content. The page works fine in chrome and firefox, but not in internet explorer inside the iframe. It will work in IE when it is not in an iframe. Does anyone know why and how to solve it?
The child:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.4.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
<script src="../../ui/jquery.bgiframe-2.1.2.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="/findhousing/property_details_demo.asp?ID=108">Preloaded</a></li>
<li><a href="/findhousing/gallery_demo.asp?ID=108">Tab 1</a></li>
<li><a href="ajax/content2.html">Tab 2</a></li>
<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
</div>
</div><!-- End demo -->