将JSON编码的AJAX内容加载到jQuery UI标签中

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

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

来源

2010-05-07 pocketfullofcheese

你可以使用load（）事件吗？ – 2010-05-07 01:16:40

此解决方案适合您吗？它似乎不适合我。 – TheDelChop 2010-10-29 18:32:18

您可以使用Ajax调用的dataFilter选项来转换JSON响应您要在该选项卡的面板要插入的HTML。

事情是这样的：

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

如果JSON回应是这样的：

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

来源

2010-05-07 01:28:28 PetersenDidIt

我不得不添加：

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

来源

2011-11-14 06:21:49 ajf

我刚刚有同样的问题。添加dataTypes分配也适用于我。 – 2012-07-01 02:58:36

我被困这个问题最近，所以以防万一有人一直近来寻求与此类问题的帮助下，我认为这将是有益的重新开放这个讨论。我正在使用jQuery 1.8.2和jQuery UI 1.9.2。我发现使用最新版本的jQuery UI执行此操作的最佳方法是从beforeLoad事件处理函数返回false，并发送getJSON请求，并在相关选项卡中指定URL。

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中所定义的正常功能标签已禁用。但是，您仍然可以访问传递给beforeLoad处理程序的event和ui对象。你这个语法ui.ajaxSettings.url得到选项卡中的URL，然后显示在getJSON请求返回的数据如图所示Content via Ajax例如：

ui.panel.html(data.text);

对我来说，这是data.text因为JSON我检索包含两个属性header和text。

来源

2013-02-05 14:52:13 DavidHyogo

将JSON编码的AJAX内容加载到jQuery UI标签中

回答

相关问题