jQuery Acordeón y carga de contenido a través de AJAX.

Me gustaría cargar el contenido debajo de cada encabezado de acordeón jQuery utilizando el comando de carga jQuery. Actualmente, he configurado esto como el siguiente

$(function() { $("#accordion").accordion({ header: "h2", active: false }); $("h2", "#accordion").click(function(e) { var contentDiv = $(this).next("div"); contentDiv.load($(this).find("a").attr("href")); }); }); 

y el HTML ( fragmento relevante )

  

Ahora bien, todo esto funciona bien, pero hay un problema en que la carga de contenido de esta manera interrumpe la animación deslizante del complemento de acordeón en algunos navegadores (IE6) y en otros (FF), la animación deslizante no ocurre.

Estoy pensando que necesitaría evitar que se produzca la animación deslizante hacia abajo hasta que el contenido se haya cargado (usando la función de callback de carga) pero no estoy seguro de cómo conectar esto al complemento de acordeón.

Cualquier idea muy apreciada!

Sólo un rápido heads up.

Ninguna de estas respuestas funcionará como se esperaba con la última API, ya que, desde jQuery UI 1.9, los eventos change y el change changestart se ha modificado para ” activar ” y “antes de activar ” respectivamente.

Espero que le salve a alguien unos minutos.

Esto debería resolver tu problema:

  $('#accordion').accordion({ changestart: function(event, ui){ var clicked = $(this).find('.ui-state-active').attr('id'); $('#'+clicked).load('/widgets/'+clicked); } }); 

El truco es que el acordeón cambia las clases del contenedor en vivo, por lo que puede usar .find () para localizar el acordeón activo y realizar una acción en él.

Me encuentro con el mismo problema al intentar cargar el acordeón en las tabs ajax con la interfaz de usuario de Jquery. El acordeón no se puede inicializar antes de que lo destruyas.

Aquí hay un ejemplo de código javascript:

  $("#navigation").tabs({ show: function(ui) { $('#browse').accordion('destroy').accordion({autoHeight: false, collapsible: true , active: false, header: 'h3'}); } }); 

Acabo de hacer algo similar y descubrí que el truco consistía en cargar el contenido de una solicitud ajax tan pronto como el DOM esté listo y habilitar el acordeón en la función de callback de la solicitud.

Intenté hacerlo con la función de carga de jquery, pero tuve problemas, terminé usando la función ajax en su lugar.

En su caso con múltiples llamadas ajax, supongo que podría anidar cada una en la función de callback de la anterior. Lo que realmente es una forma horriblemente ineficiente de hacerlo, pero si son solo pequeños archivos de texto, debería estar bien.

ejemplo de la siguiente manera:

 $.ajax({type:"get",url:"https://stackoverflow.com/questions/646415/jquery-accordion-and-loading-content-through-ajax/home.htm",success: function(data){ $("#homeDiv").html(data); $.ajax({type:"get",url:"https://stackoverflow.com/questions/646415/jquery-accordion-and-loading-content-through-ajax/products.htm",success: function(data){ $("#productsDiv").html(data); $("#accordion").accordion(); } }); }}); 

Deberias hacer eso…

Esta es la forma más sencilla y fácil de hacerlo.

     $ ("# acordeón"). acordeón ({
                 activo: falso,
                 cambio: función (evento, ui) {
                     if (ui.newContent.html () == "") {
                         ui.newContent.load (ui.newHeader.find ('a'). attr ('href'));
                         }
                 }
                 autoHeight: falso
             });

He hecho esto antes, déjame copiarlo y pegarlo aquí.

 
{section name=cat_loop loop=$cats}

{print id=$cats[cat_loop].subcat_title}

{include file='include/section_profile_fields.stpl'}
{section}

El contenido de {} contiene scripts del lado del servidor y es básicamente un bucle para imprimir contenido para varios acordeones. Aquí está el javascript:

 jQuery('.accordion').accordion({ changestart: function(event, ui){ var $activeCord = jQuery(this).find('.ui-state-active'); var contentDiv = $activeCord.next("div"); contentDiv.load('ajax_member_profile_edit.aspx?cat_id='+$activeCord.attr('data-id')); } }); 

Esto debería resolver el problema de cargar el acordeón antes de activarlo:

   

¡Esto es en realidad mucho más fácil de lo que estás haciendo!

En su función doc ready:

 $('#accordion').accordion(); $("#accordion").click(function(e) { $('.ui-accordion-content-active').load('/path/to/content'); }); 

y tu html

 

Click me

Loading....

Or even click me!

Loading...

Etc..

Loading

Solo pensando fuera de la caja por un momento, ¿hay alguna razón por la que esté utilizando ajax para cargar el contenido? Parece, al menos en su ejemplo, como si el contenido se pudiera cargar inicialmente y terminar con él.

En cuanto a tu pregunta, ¿has intentado algo como esto?

 var contentDiv = $(this).find("div"); 

¿O exploró alguna otra forma en la que su carga pudiera estar interfiriendo con la visión del acordeón del árbol DOM? (por ejemplo, tratando de cargar un div más profundamente nested)?

Tal vez esto no sea totalmente igual a lo que se habla aquí, pero muchos de estos fragmentos me ayudaron a hacer que mi solución funcione, así que pensé en compartirlo en caso de que alguien más tenga que hacer (¡exactamente!) Lo que tenía que hacer.

Quería cargar fragmentos de contenido externo en un acordeón, pero conseguir que se redimensionara correctamente, etc. fue fiddley, aquí está mi solución:

 $(document).ready(function () { //All the content is loaded at page load which means you dont get screwy animations $('#accordion').accordion({ autoHeight: false, // set to false incase theres loads more in one panel than the others create: function (event, ui) { $('div#accordion > div').each(function () { //for each accordion panel get the associated content from external file and load it in. var id = $(this).attr('id'); $(this).load('ajax_content.html #' + id, function () { $('#accordion').accordion('resize'); }); }); } }); }); 

Espero que esto ayude a alguien =)

Ah, y debería haber mencionado que, obviamente, en el archivo ajax_content.html hay un div con la misma ID que cada uno de los paneles de acordeón para que sepa qué poner dónde.

He estado lidiando con este problema, usando jquery 1.4 y aquí es cómo lo resolví. El objeto “ui” tiene dos propiedades importantes “newContent” y “newHeader”. Usé newContent y puse una identificación en el div que contendrá el contenido. También tengo una etiqueta de entrada oculta para guardar los datos importantes, simplemente se sintió más limpio.

  $("#accordion").accordion({ disabled: false, autoHeight: false, collapsible: true, active: false, header: 'h2', animated: 'bounceslide', changestart: function (event, ui) { var location = ui.newContent.find('input:hidden[name=location]').val(); ui.newContent.find('#data').load(location); } }); 

Creo que esta es la respuesta más simple que aún no se ha dado, y cumple con todos los requisitos del OP … Cargas ANTES de que se muestre el div, y de forma dinámica de acuerdo con el href de la etiqueta a:

 $("#accordion").accordion({ active: false, clearStyle: true, changestart: function(event, ui){ var href = $(ui.newHeader.find("a")).attr("href"); $.post(href, function(data) { ui.newHeader.next("div").html(data); }); } }); 

Estaba buscando una respuesta a la misma pregunta y probé un par de ejemplos aquí. Sin embargo, estaba obteniendo un valor indefinido usando el ejemplo con ui-state-active:

 var clicked = $(this).find('.ui-state-active').attr('id'); 

También quería asegurarme de que la función .load solo se llamaba la primera vez que se expandía cada panel de acordeón. Al combinar un par de respuestas de otros pósters obtuve el resultado que quería:

 $('#accordion').accordion({ changestart: function(event, ui){ if(ui.newContent.html() == ""){ var id = ui.newContent.attr("id"); ui.newContent.load("[your url]" + id); } }); 
 $( "#accordion" ).bind( "accordionchange", function(event, ui) { if (ui.newHeader.text()=="LaLaLa"){ do here .... } });