Laden von JSON-codierten AJAX-Inhalten in jQuery UI-Registerkarten

Question

Wir möchten, dass alle unsere AJAX-Aufrufe in unserer Webanwendung JSON-codierte Inhalte empfangen. In den meisten Orten ist dies bereits getan (z. B. in Modals) und funktioniert gut.

Wenn Sie jedoch jQueryUIs Tabs (http://jqueryui.com/demos/tabs/) und ihre Ajax-Funktionalität verwenden, kann nur HTML im Klartext zurückgegeben werden (d. H. Von den in den a-Tags angegebenen URLs). Wie bekomme ich die Tab-Funktion, um zu erkennen, dass bei jedem Klicken der Registerkarte JSON-codierte Daten von der angegebenen URL empfangen und in den .content-Index dieser JSON geladen werden?

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

Answer 1

können Sie verwenden, um die dataFilter Option des Ajax-Aufruf Ihre Json Antwort auf die html Sie sich in das Panel auf der Registerkarte eingefügt werden soll konvertieren.

Etwas wie folgt aus:

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

Wenn Sie JSON-Antwort sah wie folgt aus:

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

Answer 2

ich hinzufügen musste:

this.dataTypes=['html'] 

zu bekommen dies funktioniert.

Im Kontext:

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

Answer 3

ich mit diesem Problem vor kurzem stecken geblieben, so nur für den Fall jemand mit dieser Art von Problem um Hilfe gesucht, in jüngster Zeit, dachte ich, es wäre nützlich, wieder zu öffnen diese Diskussion. Ich arbeite mit jQuery 1.8.2 und jQuery UI 1.9.2. Ich fand den besten Weg, dies mit der neuesten Version von jQuery UI zu tun war false aus dem beforeLoad Event-Handler und senden Sie eine getJSON Anfrage mit der URL in der entsprechenden Registerkarte angegeben.

HTML-Markup:

<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 Aufrufcode:

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

Wenn der beforeLoad Handler false zurückgibt, wird die normale Funktionalität der HTML-Code aus dem in der angegebenen URL abgerufen Anzeige Registerkarte ist deaktiviert. Sie haben jedoch weiterhin Zugriff auf die Objekte event und ui, die an den Handler beforeLoad übergeben werden. Sie erhalten die URL aus der Registerkarte mit dieser Syntax ui.ajaxSettings.url und dann die Daten von der getJSON Anforderung zurück anzuzeigen, wie im Content via Ajax Beispiel gezeigt:

ui.panel.html(data.text); 

In meinem Fall ist es data.text weil die JSON Ich Abrufen enthält zwei Eigenschaften header und text.