Ajouter des éléments à un accordéon jQuery avec jQuery

Question

Je suis à l'aide de l'accordéon jQuery plugin pour faire un accordéon de certaines données. Ensuite, je veux que l'utilisateur soit en mesure d'ajouter plus de données à l'accordéon. J'ai d'installation de l'accordéon pour fonctionner correctement, puis j'ai fait une fonction qui ajoute un "élément de la liste" à l'accordéon qui correspond à l'accordéon sémantique.

Est-il possible de "mise à jour" de l'accordéon, de sorte qu'il fonctionne avec le nouvel élément ajouté, sans enregistrer les nouvelles données de la base de données et l'actualisation de la page?

Quelque chose comme ceci:

.accordion('refresh')

Ou quelque chose comme l'événement en direct, ajouté en jQuery 1.3, quelqu'un a un idée?

Answer 1

Je n'ai pas testé, mais cela devrait probablement de travail: Dire que vous avez votre accordéon avec l'id #accordéon

$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion();

Fondamentalement, il suffit de détruire et recréer de l'accordéon.

Mise à JOUR:

Depuis cette réponse a été écrit une méthode refresh() a été ajouté le widget accordéon. Il peut être invoquée par l'appelant:

$( ".selector" ).accordion( "refresh" );

Vous pouvez en savoir plus sur cette méthode ici

Answer 2

Pour ajouter une nouvelle section et conserver l'ancienne section active:

 var active = $('#accordion').accordion('option', 'active');
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion({ active: active});
 

Answer 3

Comme mentionné plus haut par Shahzad, jQuery UI 1.10 a facilité cette tâche; voir la documentation .

Answer 4

Vous voudrez peut-être consulter le plugin LiveQuery: http://plugins.jquery.com/project/livequery

Il vous permet d'ajouter des événements et des liaisons après le chargement du DOM.

Answer 5

Depuis que j'ai besoin d'un travail ajouter/modifier/supprimer vor accordéon articles que j'ai piraté ce peu de fonctions javascript à cette fin

http://jsfiddle.net/Sd6fC/

h3 et div besoin d'un id unique qui va par la convention ci-après

<h3 id="divname_hitm_<uniquenumber>"><h3>

le correspondant div besoin de ce qui suit

<div id="divname_ditm_<samenumber as h3"></div>

l'échantillon de l'accordéon bloc de code

<div id="divname">
    <h3 id="divname_hitm_1><a href="#">Section 1</h3>
    <div id="divname_ditm_1>
        <p>Section 1 Payload</p>
    </div>
    <h3 id="divname_hitm_2><a href="#">Section 2</h3>
    <div id="divname_ditm_2>
        <p>Section 2 Payload</p>
    </div>
</div>

amusez-vous peut-être cela aide certains ppl!