jQuery Accordion et chargement de contenu via AJAX

Juste un petit heads-up.

Aucune de ces réponses seront comme prévu avec la dernière API depuis l'INTERFACE utilisateur de jQuery 1.9 les événements change et changestart ont été modifiés pour ' activer " et " beforeActivate ' respectivement.

Espoir qui sauve quelqu'un en quelques minutes.

J'ai exécuté le même problème en essayant de charger l'accordéon à l'ajax onglets avec Jquery UI.
L'accordéon ne peut pas être initialisé avant de le détruire.

Ici est un exemple de code javascript:

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

Ici est la plus simple et la meilleure façon de le faire

 $("#accordéon").accordéon({ 
active:false, 
modification:function(event, ui) { 
si(ui.newContent.html()==""){ 
l'interface utilisateur.newContent.de la charge(de l'interface utilisateur.newHeader.find('a').attr('href')); 
} 
}, 
autoHeight: faux 
}); 

Ce qui devrait résoudre le problème de chargement de l'accordéon avant qu'il soit activé:

<script type="text/javascript">//<![CDATA[
$(document).ready(function() {

  $("#accordion").children("div").each( function() {
    var a = $(this).find("a");
    var ref = $(a).attr("href");
    $(a).attr("href", "#");
    $(this).find("div").load(ref);
  });

  $("#accordion").ajaxStop(function() {
    $(this).accordion({
      header: "h2",
      active: false,
      collapsible: true,
      clearStyle: true
    });
  });

})
//]]></script>
<div id="accordion">
  <div><h2><a href="home.htm">Home</a></h2><div></div></div>
  <div><h2><a href="products.htm">Products</a></h2><div></div></div>
</div>

Peut-être que ce n'est pas tout à fait la même que ce qui est en train de parler ici, mais beaucoup de ces extraits m'ont aidé à obtenir ma solution de travail alors je voulais le partager au cas où quelqu'un d'autre doit le faire (exactement!) ce que je devais faire.

je voulais charge externe des fragments de contenu en accordéon, mais le faire pour redimensionner correctement etc a été fiddley, voici ma solution:

$(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');
                });
            });
        }
    });
});

Espère que cela aide quelqu'un =)

Oh, et je devrais avoir mentionné que, bien évidemment, dans le ajax_content.html fichier il y a un div avec le même id que chacun de l'accordéon panneaux de sorte qu'il sait ce qu'il faut mettre où!

J'Ai eu affaire à ce problème, à l'aide de jquery 1.4 et voici comment je l'ai résolu. Le "ui" objet a deux importantes propriétés "newContent" et "newHeader". J'ai utilisé newContent et de mettre un id sur la div qui contiendra le contenu. J'ai aussi caché balise d'entrée pour contenir les données importantes, C'était un peu plus propre.

 $("#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);


         }

     });

Je cherchais une réponse à la même question, et j'ai essayé quelques exemples ici. Cependant, j'ai été prendre une valeur non définie à l'aide de l'exemple avec ui-state-active:

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

Je voulais aussi assurez-vous que l' .la fonction de charge a été appelé le premier temps de chaque panneau accordéon a été élargi. En combinant un couple de d'autres affiches des réponses que j'ai obtenu le résultat que je voulais:

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