Calling a function defined in a content page loaded by jQuery tabs
I want to call a callback method that may or may not be implemented in pages being loaded as Ajax content by jQuery tabs. In other words, I have a set of jQuery tabs that load content rendered in JSP files. Some of these files have additional Ajax content in them, some don't.
What I could do is:
$(document).ready(function() {
$("#menu").tabs( {
cache: false,
ajaxOptions: {cache: false},
load: function(event, ui) {
if (ui.index == index_of_tab_with_additional_content) {
//call code defined in other places and embedded using <script> tags
}
}
});
});
But that has a few dr开发者_如何学Pythonawbacks - all the callbacks must be declared in scripts embedded in my main tabs page, along with anything they may depend on - not elegant! Also, I would like to be able to call the same callback, so as to avoid a page by page if/else statement. In short, I would like to have something like
load: function(event, ui) {
callback(); //Each tab would implement this differently, or not at all
}
}
Sadly, I could not figure out how to call script functions declared in the content. As noted in other threads, Javascript is not loaded by jQuery.
Apparently an option must be set for this, but I could not find out which.
And if the option was set and JS loaded, how would I access the functions? Would it be ui.panel.funcname(); ?
Thanks, ES
JQuery will not load script content located in the header of the document being loaded via AJAX, but it will load script content from the body. The easiest way to handle this if you don't want the code on the main page (using live handlers) is to have your main page load any external script files required by any tabs and have the content for each tab contain the "callback" mechanism for what needs to be done when the tab is loaded. You need to be careful, realizing that all tabs may be loaded in the DOM at once necessitating naming distinctions between tabs and, perhaps, qualifying any selectors so that they are relative to the tab container, but it is doable.
Ex.
<html>
<head>
...
<script type="text/javascript">
// I'm not going to be loaded via AJAX
</script>
</head>
<body>
<div id="homeTab" class="tab-content">
...
<a href="#" class="clickable button">Click Me</a>
...
</div>
<script type="text/javascript">
$(function() {
// here be stuff which runs when the tab is loaded
var $tab = $('#homeTab');
$('a.button',$tab).click( function() {
...do something...
return false;
});
});
</script>
</body>
</html>
加载中,请稍侯......
精彩评论