Hi,
I just started playing around with the Jquery ui tabs. The content
of the Tabs consist mainly
of static content at the beginning.
Now some
of the content within the panels do have Links to some kind
of subcontent. So if the User clicks on a link in the panel I would like to replace the content
of the current panel with the content coming from the link.
So I used the script directly from the jquery ui tab documentation but I can't get it to
work. It is always opening the link directly, not within the panel. The code I use for testing is quite simple:
<div id="MyTabs">
<ul>
<li><a href="#TestTab1">TestTab</a></li>
<li><a href="#TestTab2">TestTab</a></li>
</ul>
<div id="TestTab1">
Lorem ipsum dolor. dumm di dumm
<a href="http://mywebserver/somelink">Test</a>
</div>
<div id="TestTab2">
Lorem ipsum dolor. dumm di dumm 2
<a href="http://mywebserver/somelink2">Test 2</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#MyTabs').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
});
Additionally, if I have the content
of the panel loaded using an AJAX call no link within the panel is working whatsoever.
Any idea what I`m doing wrong?
Help is really appreciated
Regards
Maik
Edit1:
OK, I got a bit further. I replaced the Javascript with the following snippet:
$(function() {
$("#MyTabs").tabs();
$("#MyTabs").bind('tabsshow', function(event, ui) {
AddClickHandler(ui);
});
});
function AddClickHandler(ui) {
$('a', ui.panel).click(function() {
MyAlert("AddClickHandler");
$(ui.panel).load(this.href, AddClickHandler(ui));
return false;
});
}
After this change all links on a panel will update the content
of the current panel. So far so good. Still one problem left. I can't get it to
work for subsequent links. I tried to do it with the second "AddClickHandler" for callback when the ajax call has finished. Using a different function with a simple alert showd it is actually been called when the content
of the panel has been updated. But I can't bind anything to the new links in that content. The "$('a', ui.panel)..." doesn't
work. What would be the correct selector for this?
Any hint?
Regards
Maik
