Caricamento del contenuto AJAX con codifica JSON nelle schede dell'interfaccia utente jQuery

Question

Vogliamo che tutte le nostre chiamate AJAX nella nostra app Web ricevano contenuti con codifica JSON. Nella maggior parte dei posti questo è già stato fatto (ad esempio nelle modali) e funziona bene.

Tuttavia, quando si utilizzano le schede di jQueryUI (http://jqueryui.com/demos/tabs/) e la relativa funzionalità ajax, è possibile restituire solo HTML in chiaro (ad esempio dagli URL specificati nei tag di seguito). Come ottengo la funzione di tabulazione per riconoscere che su ogni clic della scheda, riceverà i dati codificati JSON dall'URL specificato e per caricare l'indice .content di quel JSON?

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

È possibile utilizzare l'opzione DATAFILTER della chiamata AJAX per convertire la vostra risposta JSON per il codice HTML che si desidera essere inseriti al pannello della scheda.

Qualcosa di simile a questo:

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

Se la risposta JSON si presentava così:

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

Answer 2

ho dovuto aggiungere:

this.dataTypes=['html'] 

per arrivare a questo lavoro.

Nel contesto:

 ,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

sono rimasto bloccato con questo problema da poco, quindi nel caso in cui qualcuno è alla ricerca di aiuto con questo tipo di problema, più di recente, ho pensato che sarebbe stato utile per riaprire questa discussione. Sto lavorando con jQuery 1.8.2 e jQuery UI 1.9.2. Ho trovato che il modo migliore per farlo con l'ultima versione di jQuery UI era di restituire false dal gestore di eventi beforeLoad e inviare una richiesta getJSON con l'URL specificato nella scheda pertinente.

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 Codice invocazione:

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

Quando il gestore beforeLoad restituisce false, la normale funzionalità di visualizzare il codice HTML recuperato dal URL definito nel la scheda è disabilitata. Tuttavia, si ha ancora accesso agli oggetti event e ui passati al gestore beforeLoad. È possibile ottenere l'URL dalla scheda con questa sintassi ui.ajaxSettings.url e quindi visualizzare i dati restituiti dalla richiesta getJSON come mostrato nella Content via Ajax esempio:

ui.panel.html(data.text); 

Nel mio caso, è data.text perché il JSON sto recuperando contiene due proprietà header e text.