jquery-ui .tabs ajax加载页面的特定内容?
问题描述:
我想使用jQuery UI的.tabs()通过AJAX获取内容,但默认行为是获取整个页面的内容。 我将如何获取特定#id和/或多个#号的内容?jquery-ui .tabs ajax加载页面的特定内容?
我有一种感觉,我会需要使用load:
事件(http://docs.jquery.com/UI/Tabs#event-load),但我需要帮助搞清楚了这一点。
实施例:
页与被获取和显示选项卡式内容的选项卡。我已经在第一个#the_tabs链接之后放置#content来尝试获取内容的特定区域,但整个页面仍然被加载。
<div id="tabs">
<div id="tabs_display">
</div>
<ul id="the_tabs">
<li><a href="testcontent.html#content" title="tabs display"><span>1</span></a></li>
<li><a href="testcontent2.html" title="tabs display"><span>2</span></a></li>
<li><a href="testcontent.html" title="tabs display"><span>3</span></a></li>
<li><a href="testcontent2.html" title="tabs display"><span>4</span></a></li>
</ul>
</div><!-- /#tabs -->
页是由一标记检索:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Remote HTML Page Example</title>
</head>
<body>
<div id="content">
I want this content
</div>
<div id="other_stuff">
Not this content
</div>
</body>
</html>
的JS(用于安装目的):
$(document).ready(function(){
/* Tabs
--------------------*/
$(function() {
var $tabs = $('#tabs').tabs({
});
});
});
答
在jquery-UI 1.9中,“ajaxOptions”被折旧;所以不是下面的代码为我工作: (参考:http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event)
$(function() {
$("#the_tabs").tabs({
beforeLoad: function(event, ui) {
ui.ajaxSettings.dataType = 'html';
ui.ajaxSettings.dataFilter = function(data) {
return $(data).filter("#content").html();
};
}
});
});
答
$(文件)。就绪(函数(){
/* Tabs
--------------------*/
var $tabs = $('#the_tabs').tabs({
ajaxOptions: {
dataFilter: function(data, type){
return $(data).filter("#content").html();
}
}
});
});
解决方案道具Supavisah在#jquery irc.freenode.net上
答
我一直在使用.find有运气,而不是.filter。像这样:
$(document).ready(function(){
$('#the_tabs').tabs({
ajaxOptions: {
cache : true,
dataFilter: function(data){
return $(data).find('#content');
},
}
});
});
感谢保持此最新消息! – tester 2013-03-08 18:08:03
更新: 返回$(data).find('#content');在我的情况下也工作得更好。 是否使用过滤器或查找,似乎取决于HTML返回的结构: http://*.com/questions/4245231/how-do-i-filter-the-returned-data-from-jquery-阿贾克斯 – 2013-03-11 10:46:23