Ajax Tabs and Datepicker or Accordion
Hi Everyone,
I am new to jQuery and am working through some of the examples, and
trying to test some features for my application.
Basically I would like to create a tab set, and then dynamically load
the tab content. This content may contain HTML, or it may (most
likely) will contain things like forms and accordions. I have tried
this in a simplified way, but it has not worked successfully.
Any help would be greatly appreciated.
I am including the source code below.
index.html
<html>
<head>
<style type="text/css" media="screen,projection">
.ui-tabs-hide { display: none; }
</style>
<link rel="stylesheet" href="themes/flora/flora.all.css" type="text/
css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.tabs.js"></script>
<script type="text/javascript" src="ui/ui.accordion.js"></script>
<script type="text/
javascript">
// we will add our javascript code
here
$(document).ready(function() {
$("#container > ul").tabs({ ajaxOptions:{ dataType:'html'
}
});
});
</
script>
</
head>
<body>
<p/>
<div id="container" class="flora">
<ul>
<li><a href="frame1.html"><span>Content 1</span></a></li>
<li><a href="#fragment2"><span>Content 2</span></a></li>
<li><a href="#fragment3"><span>Content 3</span></a></li>
</ul>
<div id="fragment2">
Testing Tab 2
</div>
<div id="fragment3">
Testing Tab 3
</div>
</div>
</
body>
</html>
The frame1.html file is as such:
<ul id="example" class="ui-accordion-container" style="width:200px;
height: 450px;">
<li> <a href='#'>Test 1</a>
<div> Test Content</div>
</li>
<li>
<a href='#'>Test 2</a>
<div> Test Content 2</div>
</li>
</ul>
<script>
$('#example').accordion();
</script>
Thank you in advance for all of the help.
-John