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

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.

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

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?

但是，当使用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>

3 个解决方案

#1

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.

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

Something like this:

像这样的东西：

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

If you JSON response looked like this:

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

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

#2

I had to add:

我不得不补充：

this.dataTypes=['html']

to get this to work.

让这个工作。

In context:

在上下文中：

      ,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 + ')' );
    }
  }

#3

I got stuck with this problem recently, so just in case someone has been looking for help with this kind of issue more recently, I thought it would be useful to re-open this discussion. I'm working with jQuery 1.8.2 and jQuery UI 1.9.2. I found the best way to do this with the latest version of jQuery UI was to return false from the beforeLoad event handler and send a getJSON request with the URL specified in the relevant tab.

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

HTML markup:

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>

Tabs invocation code:

标签调用代码：

    $(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                var url = ui.ajaxSettings.url;
                $.getJSON(url, function (data) {
                    ui.panel.html(data.text);
                });
                return false;
            }
        });
    });

When the beforeLoad handler returns false, the normal functionality of displaying the HTML retrieved from the URL defined in the tab is disabled. However, you still have access to the event and ui objects passed to the beforeLoad handler. You get the URL from the tab with this syntax ui.ajaxSettings.url and then display the data returned by the getJSON request as shown in the Content via Ajax example:

当beforeLoad处理程序返回false时，将禁用显示从选项卡中定义的URL检索的HTML的常规功能。但是，您仍然可以访问传递给beforeLoad处理程序的事件和ui对象。您可以使用此语法ui.ajaxSettings.url从选项卡中获取URL，然后显示getJSON请求返回的数据，如内容通过Ajax示例所示：

ui.panel.html(data.text);

In my case, it's data.text because the JSON I'm retrieving contains two properties header and text.

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

#1