JSON kodlu AJAX içeriğini jQuery UI sekmeleri içine yükleme

Question

JSA kodlu içerik almak için web uygulamasındaki tüm AJAX çağrılarını istiyoruz. Çoğu yerde, bu zaten yapıldı (örneğin, modalarda) ve iyi çalışıyor. Ancak, jQueryUI sekmelerini (http://jqueryui.com/demos/tabs/) ve ajax işlevlerini kullanırken, yalnızca düz metin HTML'si döndürülebilir (diğer bir deyişle, aşağıdaki etiketlerde belirtilen URL'lerden). Sekme işlevini, her sekmenin tıklamasında, belirtilen URL'den JSON kodlu veri aldığını ve bu JSON'un .content dizinine yükleneceğini nasıl anlarım?

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

Sen sekmesinin paneline giriş eklenmesini istediğiniz html için json yanıtını dönüştürmek için ajax çağrısı dataFilter seçeneğini kullanabilirsiniz. Böyle

şey:

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

Eğer JSON yanıtı şuna benziyordu:

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

Answer 2

ben eklemek zorunda:

this.dataTypes=['html'] 

bu işe almak için. bağlamda

:

 ,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

yüzden her ihtimale karşı birisi daha yakın zamanda konunun bu tür yardım arayan olmuştur, son zamanlarda bu sorunla saplanıp, ben yararlı yeniden açmak olacağını düşündüm bu tartışma JQuery 1.8.2 ve jQuery UI 1.9.2 ile çalışıyorum. JQuery UI'nin en son sürümü ile bunu yapmanın en iyi yolunu false numaralı beforeLoad olay işleyicisinden döndürmek ve ilgili sekmede belirtilen URL ile bir getJSON isteği göndermek oldu.

HTML işaretleme:

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

Sekmeler çağırma kodu:

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

beforeLoad işleyicisi false döndürür, tanımlanan URL'den alınan HTML görüntüleme normal işlevselliği sekme devre dışı. Bununla birlikte,ve beforeLoad işleyicisine iletilen ui nesnelerine erişebilirsiniz. Bu sözdizimi ui.ajaxSettings.url ile sekmesinden URL almak ve Content via Ajax örnekte görüldüğü gibi daha sonra getJSON isteği tarafından döndürülen verileri görüntülemek: Benim durumumda

ui.panel.html(data.text); 

, bu data.text JSON çünkü alınırken ediyorum bulunuyor header ve text iki özellik içerir.