Actualizar el contenido de la pestaña al hacer clic en las pestañas de la IU de JQuery

Question

El contenido de TAB1 es cargado por ajax desde la URL remota. Cuando se selecciona TAB1, tengo que cambiar a TAB2 y luego de vuelta a TAB1 para actualizar el contenido cargado.

¿Cómo hacer que TAB1 actualice el contenido cargado al hacer clic en su pestaña?

Editar: código HTML es la siguiente

<div id="tabs"> 
    <ul> 
     <li><a href="url1">Tab1</a></li> 
     <li><a href="url2">Tab2</a></li> 
    </ul> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $tabs = $("#tabs").tabs({ 
      select: function(event, ui) { 
       $('a', ui.tab).click(function() { 
        $(ui.panel).load(this.href); 
        return true; 
       }); 
      } 
     }); 
}); 
</script> 

Answer 1

En el "éxito" de la llamada jQuery, puede reemplazar el código HTML con el nuevo formato html.

No ha publicado ningún código por lo que quizás ya esté haciendo esto pero;

success: function(msg) { 
    $('.TabOne').html(msg); 
} 

lo anterior funciona si devuelve html. Si devuelve un objeto, es posible que necesite hacer un trabajo extra, pero en general, lo anterior debería funcionar.

Editar Debo mencionar también que .TabOne es un nombre de clase. Por lo tanto, el titular del contenido de la pestaña debe tener una clase de TabOne para que funcione el código anterior.

Recuerde que el nombre de la clase no tiene que existir realmente como un estilo para que esto funcione tampoco.

Editar 2

Hmmm, ver lo que está tratando de hacer ahora y estoy en un poco de una pérdida. Hará algunas pruebas y podría ser capaz de responderle.

Lo siento.

Answer 2

Tuve el mismo problema con el contenido de algunos ajax en una pestaña jQuery.

La pestaña carga un gráfico de flot pero funcionaría solo cuando fuera la pestaña que cargó primero.

Lo arreglé con un tipo de trabajo cursi pero fue efectivo.

Me tomó todo el código de mi flot js y lo tiró en un archivo .js separada y la puso en una función

function doFlotGraph(data){ 
    $.plot({plotcode}); 
}; 

que a continuación hizo lo siguiente dentro de la pestaña

$.getScript('url/doFlotGraph.js',function(){ 
    doFlotGraph(data); 
}); 

Este permitió que flot hiciera su trabajo, ya que el documento listo en la pestaña ya había terminado cuando se activó ajax $ .getScript.

Luego puede poner el ajax dentro de un clic para esa pestaña.

Answer 3

1) Al definir las pestañas que cargan contenido ajax, asegúrese de usar un atributo de título, que pone ese valor en la identificación del div cargado. En mi caso, el título era "pestaña de alerta".De lo contrario el jQuery generada div tiene un id arcano:

<li><a href="/alert/index" title="alert-tab">Alert</a></li> 

2) Ahora usa esto dentro de cualquier evento que desea volver a cargar la pestaña:

var href = "/alert/index/"; 
$("#alert-tab").load(href); 

Answer 4

Para hacer esto bien sólo tiene que guardar enlace mundial durante la creación:

ui_tabs = $("#tabs").tabs(); 

Después de todo lo que implica puede utilizar la API de carga

Por ejemplo : Transformar todos los enlaces en las secciones de la página de pestañas

$('#tabs .paging a').click(function(e){ 
    var selected = ui_tabs.tabs('option', 'selected'); 
    ui_tabs.tabs('url', selected, e.target.href); 
    ui_tabs.tabs('load', selected); 
    return false; 
}) 

Answer 5

Otra forma sencilla de actualizar una pestaña en jQuery es utilizar el método de carga:

$('#my_tabs').tabs('load', 0); 

El valor numérico es el índice de base cero de la pestaña que desea actualizar

Answer 6

Así es como lo hice. Una cosa a tener en cuenta es que he encontrado que los identificadores asignados a los DIVs que asignan el contenido de cada pestaña tienen un nombre bastante predecible, y que siempre se corresponden con el href del delimitador en la pestaña seleccionada. Esta solución depende de que ese sea el caso, por lo que podría ser criticado como "demasiado frágil", supongo. El formulario del que estoy sacando el código es una especie de control reutilizable que puede o no estar alojado dentro de una pestaña, por eso compruebo el valor de parentID antes de hacer el .each().

//I get the parentID of the div hosting my form and then use it to find the appropriate anchor. 
var parentID = '#' + $('#tblUserForm').parent().attr('id'); 
//Trying to enable click on an already selected tab. 
if(parentID == '#ui-tabs-3') //The value of var parentID 
{ 
    $('#tabs a').each(function() { 
      if($(this).attr('href') == parentID) 
      { 
       $(this).bind('click', function() { 
        $(parentID).load(your_URL_here); 
       }); 
      } 
    }); 
} 

Answer 7

tuvieron problemas con este tema porque las pestañas parecen matar clic acontecimientos ... por lo que acabo de utilizar mousedown.

$("#tabs ul.ui-widget-header") 
.delegate("li.ui-tabs-selected","mousedown",function(){ 
    $tabs.tabs("load",$(this).index()); 
}); 

esta pregunta se publicó hace un tiempo, pero espero que ayude a alguien.

Answer 8

Ok cosas armando tengo esto para el evento de clic de las lengüetas de jQuery, el div que rodea tiene un id de pestañas, así:

<div id="tabs"> 

La siguiente será ejecutado en la función de lista de documentos:

$('#tabs > ul > li > a').each(function (index, element) { 
    $(element).click(function() {   
     $('#tabs').tabs('load', index); 
    }); 

Se registra para cada pestaña del evento clic, con el índice de la lengüeta gracias a Scott Pier

también tengo esto en mi documento listo para prevenir almacenamiento en caché

$("#tabs").tabs({ 
    ajaxOptions: { 
     cache: false, 
     error: function (xhr, status, index, anchor) { 
      $(anchor.hash).html(
     "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
     "If this wouldn't be a demo."); 
     } 
    } 
}); 

Answer 9

Sé que este enlace es antiguo, pero me encontré con la misma situación. Traté de comprender e incorporar todo lo que se dijo aquí, pero todavía no estaba funcionando o arruinaría lo que tengo.

que tienen un diálogo modal con 4 pestañas, índice de valores 0,1,2,3 y quería abrir en la ficha 1 por lo que en mi código no es la línea siguiente:

$("#tabs").tabs('select',1); 

y la ficha 1 siempre contendría los datos de las pantallas anteriores (contenido html ajax) hasta que haga clic en una pestaña diferente (por ejemplo, en la pestaña 2) y luego en la parte posterior (en la pestaña 1) ...así que hice lo siguiente:

// this forces tab content update 
    $("#tabs").tabs('select',1); 
    $("#tabs").tabs('select',2); 
    $("#tabs").tabs('select',1); 

y funcionó :)

Answer 10

Usted puede simplemente eliminar el contenido de la ficha que se ha hecho clic y recargarlo con el mismo contenido (o lo que quieras). Por ejemplo:

$("#tabs").tabs({                 
    activate:function(event,ui){ 
    //Remove the content of the current tab 
    ui.newPanel.empty(); 
    //load the file you want into current panel 
    ui.newPanel.load('content'+(ui.newTab.index()+1)+'.php');             
    }                   
}); 

En este caso, por ejemplo, si se hace clic en la segunda pestaña, el panel se vacía y se vuelve a cargar con content2.php

Answer 11

Dado que esta pregunta ha sido contestada muchas veces durante un largo período de tiempo, no estaría de más publicar una actualización para versiones más recientes de jquery. Estoy usando jquery-ui 1.10.3 y las suposiciones que hizo Trevor Conn ya no parecen ser válidas. Sin embargo, su enfoque me ayudó con algunas modificaciones. Digamos que la pestaña Deseo refrescar se llama "Tab_1" (id del elemento de la lista)

<div id="tabs" class="tabs"> 
    <ul> 
     <li id="tab_1"> 
      <a href="my_link">tab one</a> 
     </li> 
     ...(other tabs)... 
    </ul> 
</div> 

En mi método javascript para actualizar el contenido pestaña, escribo (usando jQuery):

var tab = $('#tab_1'); 
var id = tab.attr('aria-controls'); 
var url = $('a',tab).attr('href'); 
$("#"+id).load(url); 

El atributo "aria-controls" contiene el id del div que contiene el contenido de la pestaña. "control de área" podría haber sido un nombre más lógico, pero como fanático de la ópera, no me quejo. :-)

Answer 12

Encontré una solución a este problema. Después de probar todos estos métodos, ninguno de ellos funcionó para mí. Así que por simplicidad, se me ocurrió esta solución y aunque no es la manera más elegante, todavía hace el trabajo.

Primero, establezca el foco en una pestaña diferente y luego devuelva el foco a la pestaña que desea actualizar.

$("#myTabs").tabs("option", "active", 0); 
$("#myTabs").tabs("option", "active", 1);