将JSON编码的AJAX内容加载到jQuery UI选项卡中

我们希望在我们的Web应用程序中的所有AJAX调用都能接收JSON编码的内容。 在大多数地方，这已经完成（例如在模态中）并且工作正常。

但是，当使用jQueryUI的选项卡（ http://jqueryui.com/demos/tabs/ ）及其ajaxfunction时，只能返回明文HTML（即从下面的a标签中指定的URL）。 如何让tabfunction识别每个选项卡上的单击，它将从指定的URL接收JSON编码的数据，并加载该JSON的.content索引？

$(function() { $('div#myTabs').tabs(); }); 
 
 
Tab one
 
Tab two
 
  

Answer 1

您可以使用ajax调用的dataFilter选项将您的json响应转换为您要插入到选项卡面板的html。

像这样的东西：

 $('#mytabs').tabs({ ajaxOptions: { dataFilter: function(result){ var data = $.parseJSON(result); return data.myhtml; } }, }); 

如果你的JSON响应看起来像这样：

 {"myhtml":"
hello<\/h1>"} 

Answer 2

我不得不补充：

 this.dataTypes=['html'] 

让这个工作。

在上下文中：

  ,ajaxOptions: { dataFilter: function(result,type){ var data = $.parseJSON(result); // Trick jquery to think that it's html this.dataTypes=['html'] return '
'+data.credential.id+'
'; } ,error: function( xhr, status, index, anchor ) { $( anchor.hash ).html( i18n.AJAXError + ' (' + status + ')' ); } } 

Answer 3

我最近遇到了这个问题，所以如果最近有人一直在寻找这类问题的帮助，我认为重新开启这个讨论是有用的。 我正在使用jQuery 1.8.2和jQuery UI 1.9.2。 我发现使用最新版本的jQuery UI执行此操作的最佳方法是从beforeLoad事件处理程序返回false ，并使用相关选项卡中指定的URL发送getJSON请求。

HTML标记：

  
 
 
Tab 1
 
Tab 2
 
Tab 3
 
 
 

标签调用代码：

  $(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的常规function。 但是，您仍然可以访问传递给beforeLoad处理程序的event和ui对象。 您可以使用此语法ui.ajaxSettings.url从选项卡中获取URL，然后显示getJSON请求返回的数据，如内容通过Ajax示例所示：

 ui.panel.html(data.text); 

在我的例子中，它是data.text，因为我正在检索的JSON包含两个属性header和text 。