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

时间:2010-05-07 01:06:33

标签: jquery json jquery-ui jquery-ui-tabs

我们希望我们的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>

3 个答案:

答案 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处理程序的uibeforeLoad个对象。您可以使用此语法ui.ajaxSettings.url从标签中获取网址,然后显示getJSON请求返回的数据,如Content via Ajax示例所示:

ui.panel.html(data.text);

就我而言,它是data.text,因为我正在检索的JSON包含两个属性headertext