Hello,
I'm try to load an external page 1 into a ui-tab (this is not the hard part), but next i want to load automatically a 2nd-level page into a DIV of page 1.
So, i've got 3 html pages: - index.html - external1.html - external1A.html
The index.html jQuery will load external1.html into the div 'tabcontent' and then load external1A.html into a div 'content' defined into external1.html (all jQueries should defined in the main index.html).
When you click at the links defined in external1.html, an other external1B.html will get loaded into the DIV 'content' defined in external1.html. When i load tab-2, i will load external2.html and so on...
So, load index.html and load the first tab content (external1.html), and next load external1A.html into DIV 'content' defined in external1.html.
My pages looks like:
index.html
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script src="js/myscripts.js" type="text/javascript"></script>
</head>
<body>
<div id="tabs">
<ul class="ui-tabs-content">
<li><a href="external1.html" title="tabcontent"><span>external 1</span></a></li>
<li><a href="external2.html" title="tabcontent"><span>external 2</span></a></li>
</ul>
</div>
<div id="tabcontent"></div>
</div>
</body>
</html>
external1.html
<div class="menu">
<a href="#" id="external1A">external 1A</a> |
<a href="#" id="external1B">external 1B</a> |
<a href="#" id="external1C">external 1C</a>
</div>
<div class="content"></div>
external1B.html
<form name="form1">
<input type="text" value="" name="name="">
<input type="submit" value="submit" name="Submit">
</form>
Finally it should looks like the next image:
Normally i try to keep the page levels flat, but in this case i have to load it in this direction.
Do you have an idea how the jQuery looks like?
Many thanks!