Cargando Contenido AJAX codificado en JSON en las pestañas de la IU jQuery

Question

Queremos que todas nuestras llamadas AJAX en nuestra aplicación web reciban contenido codificado en JSON. En la mayoría de los lugares esto ya está hecho (por ejemplo, en modales) y funciona bien.

Sin embargo, al usar las pestañas de jQueryUI (http://jqueryui.com/demos/tabs/) y su funcionalidad ajax, solo se puede devolver el texto sin formato HTML (es decir, desde las URL especificadas en las etiquetas a a continuación). ¿Cómo hago para que la función de tabulación reconozca que en el clic de cada pestaña, recibirá datos codificados en JSON de la URL especificada y cargará el índice .content de ese 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

Usted puede utilizar la opción dataFilter de la llamada AJAX para convertir su respuesta JSON para el HTML que desea ser insertado en el panel de la ficha.

Algo como esto:

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

Si la respuesta JSON se veía así:

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

Answer 2

he tenido que añadir:

this.dataTypes=['html'] 

a conseguir que esto funcione.

En contexto:

 ,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

me quedé atrapado con este problema hace poco, por lo que sólo en caso de que alguien ha estado buscando ayuda con este tipo de problema, más recientemente, pensé que sería útil para volver a abrir esta discusión Estoy trabajando con jQuery 1.8.2 y jQuery UI 1.9.2. Encontré que la mejor manera de hacerlo con la última versión de jQuery UI era devolver false desde el controlador de eventos beforeLoad y enviar una solicitud getJSON con la URL especificada en la pestaña correspondiente.

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

aquí código de invocación:

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

Cuando el manejador beforeLoad devuelve falso, la funcionalidad normal de mostrar el código HTML recuperado de la URL definida en el la pestaña está deshabilitada Sin embargo, todavía tiene acceso a los objetos event y ui pasados ​​al controlador beforeLoad. Se obtiene la URL de la pestaña con esta sintaxis ui.ajaxSettings.url y luego mostrar los datos devueltos por la solicitud getJSON como se muestra en la Content via Ajax ejemplo:

ui.panel.html(data.text); 

En mi caso, es data.text porque el JSON que estoy recuperando contiene dos propiedades header y text.