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.
我想调用一个回调方法,该方法可能会也可能不会在由jQuery选项卡作为Ajax内容加载的页面中实现。换句话说,我有一组jQuery选项卡,用于加载在JSP文件中呈现的内容。其中一些文件中包含其他Ajax内容,有些则没有。
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 drawbacks - 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
但这有一些缺点 - 所有回调必须在我的主标签页中嵌入的脚本中声明,以及它们可能依赖的任何东西 - 不优雅!另外,我希望能够调用相同的回调,以避免逐页if / else语句。总之,我想有类似的东西
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.
遗憾的是,我无法弄清楚如何调用内容中声明的脚本函数。如其他线程所述,jQuery不会加载Javascript。
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(); ?
如果设置了选项并加载了JS,我将如何访问这些函数?它是ui.panel.funcname(); ?
Thanks, ES
1 个解决方案
#1
2
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.
JQuery不会加载位于通过AJAX加载的文档标题中的脚本内容,但它会从正文加载脚本内容。如果您不希望主页上的代码(使用实时处理程序)处理此问题,最简单的方法是让主页加载任何选项卡所需的任何外部脚本文件,并使每个选项卡的内容包含“回调”加载选项卡时需要执行的操作的机制。您需要小心,意识到所有选项卡可能会立即加载到DOM中,需要在选项卡之间命名区别,并且可能限定任何选择器以使它们相对于选项卡容器,但它是可行的。
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>
#1
2
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.
JQuery不会加载位于通过AJAX加载的文档标题中的脚本内容,但它会从正文加载脚本内容。如果您不希望主页上的代码(使用实时处理程序)处理此问题,最简单的方法是让主页加载任何选项卡所需的任何外部脚本文件,并使每个选项卡的内容包含“回调”加载选项卡时需要执行的操作的机制。您需要小心,意识到所有选项卡可能会立即加载到DOM中,需要在选项卡之间命名区别,并且可能限定任何选择器以使它们相对于选项卡容器,但它是可行的。
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>