将JSON编码的AJAX内容加载到jQuery UI选项卡中 [英] Loading JSON-encoded AJAX content into jQuery UI tabs

问题描述

我们希望我们的Web应用程序中的所有AJAX调用都可以接收JSON编码的内容.在大多数地方，这已经完成了(例如，在模态中)，并且效果很好.

但是，当使用jQueryUI的标签时( http://jqueryui.com/demos/tabs/ )及其ajax功能，只能返回纯文本HTML(即从下面的a标签中指定的URL).如何获取标签功能以识别每个标签的单击，它将从指定的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>

解决方案

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

类似这样的东西:

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

如果您的JSON响应如下所示:

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

We want all of our AJAX calls in our web app to receive JSON-encoded content. In most places this is already done (e.g. in modals) and works fine.

However, when using jQueryUI's tabs (http://jqueryui.com/demos/tabs/) and their ajax functionality, only plaintext HTML can be returned (i.e. from the URLs specified in the a tags below). How do I get the tab function to recognize that on each tab's click, it will be receiving JSON-encoded data from the specified URL, and to load in the .content index of that JSON?

$(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>

解决方案

You can use the dataFilter option of the ajax call to convert your json response to the html you want to be inserted in to the panel of the tab.

Something like this:

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

If you JSON response looked like this:

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

这篇关于将JSON编码的AJAX内容加载到jQuery UI选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！