我们希望我们的Web应用程序中的所有AJAX调用都能接收JSON编码的内容。在大多数地方,这已经完成(例如在模态中)并且工作正常。
但是,当使用jQueryUI的标签(http://jqueryui.com/demos/tabs/)及其ajax功能时,只能返回明文HTML(即从下面a标签中指定的URL)。如何让tab功能识别出每个标签的点击,它将从指定的URL接收JSON编码的数据,并加载该JSON的.content索引?
$(function() {
$('div#myTabs').tabs();
});
<div id="mytabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top"><a href="/url/one">Tab one</a></li>
<li class="ui-state-default ui-corner-top"><a href="/url/two">Tab two</a></li>
</ul>
</div>
答案 0 :(得分:17)
您可以使用ajax调用的dataFilter选项将您的json响应转换为您想要插入到选项卡面板的html。
这样的事情:
$('#mytabs').tabs({
ajaxOptions: {
dataFilter: function(result){
var data = $.parseJSON(result);
return data.myhtml;
}
},
});
如果您的JSON响应如下所示:
{"myhtml":"<h1>hello<\/h1>"}
答案 1 :(得分:4)
我不得不补充道:
this.dataTypes=['html']
让这个工作。
在上下文中:
,ajaxOptions: {
dataFilter: function(result,type){
var data = $.parseJSON(result);
// Trick jquery to think that it's html
this.dataTypes=['html']
return '<p>'+data.credential.id+'</p>';
}
,error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html( i18n.AJAXError + ' (' + status + ')' );
}
}
答案 2 :(得分:4)
我最近遇到了这个问题,所以如果最近有人一直在寻找这类问题的帮助,我认为重新开启这个讨论是有用的。我正在使用jQuery 1.8.2和jQuery UI 1.9.2。我发现使用最新版本的jQuery UI执行此操作的最佳方法是从false
事件处理程序返回beforeLoad
,并使用相关选项卡中指定的URL发送getJSON
请求。
HTML标记:
<div id="tabs"> <ul> <li><a href="/json/tab1.json">Tab 1</a></li> <li><a href="/json/tab2.json">Tab 2</a></li> <li><a href="/json/tab3.json">Tab 3</a></li> </ul> <div>
标签调用代码:
$(function () {
$("#tabs").tabs({
beforeLoad: function (event, ui) {
var url = ui.ajaxSettings.url;
$.getJSON(url, function (data) {
ui.panel.html(data.text);
});
return false;
}
});
});
当beforeLoad
处理程序返回false时,将禁用显示从选项卡中定义的URL检索到的HTML的常规功能。但是,您仍然可以访问传递给event
处理程序的ui
和beforeLoad
个对象。您可以使用此语法ui.ajaxSettings.url
从标签中获取网址,然后显示getJSON
请求返回的数据,如Content via Ajax示例所示:
ui.panel.html(data.text);
就我而言,它是data.text,因为我正在检索的JSON包含两个属性header
和text
。