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

Question

J'utilise le plugin jQuery accordéon pour faire un accordéon de certaines données. Ensuite, je veux que l'utilisateur soit en mesure d'ajouter des données à la accordian. J'ai installé l'accordéon pour fonctionner correctement, alors je l'ai fait une fonction qui prepends un « élément de la liste » à l'accordéon qui correspond à la sémantique de l'accordéon.

Est-il possible de « mettre à jour » l'accordéon pour qu'il fonctionne avec l'élément nouvellement ajouté, sans enregistrer les nouvelles données à base de données et de rafraîchir la page?

Quelque chose comme ceci:

.accordion('refresh')

Ou quelque chose comme l'événement en direct ajouté dans jQuery 1.3, tout le monde a un indice?

Answer 1

Je ne l'ai pas testé, mais cela ne devrait probablement travailler: Dites que vous avez votre accordéon avec id #accordion

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

En fait, tout détruire et recréer l'accordéon.

Mise à jour:

Depuis cette réponse a été écrit une méthode refresh () a été ajouté au widget accordéon. Elle peut être invoquée en appelant:

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

Vous pouvez en savoir plus sur cette méthode

Answer 2

Pour ajouter une nouvelle section, et de garder l'ancien actif:

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é ci-dessus par Shahzad, jQuery UI 1.10 a fait de cette plus facile; voir la documentation .

Answer 4

Vous pouvez regarder le plugin livequery: http://plugins.jquery.com/project / livequery

Il vous permet d'ajouter des événements et la liaison après le DOM est chargé.

Answer 5

Depuis que je avais besoin d'un travail ajouter / modifier / supprimer des éléments vor accordéon i piraté ce petit fonctions javascript à cette fin

http://jsfiddle.net/Sd6fC/

h3 et div ont besoin d'un identifiant unique qui va par la convention suivante

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

div correspondant besoin des éléments suivants

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

échantillon bloc de code accordéon

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

vous amuser peut-être il aide certains ppl là!