jquery Tab - Open Link in current panel does not work
- by Maik Koster
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
