web-dev-qa-db-fra.com

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

J'utilise le plugin d'accordéon jQuery pour créer un accordéon de certaines données. Ensuite, je veux que l'utilisateur puisse ajouter plus de données à l'accordéon. J'ai configuré l'accordéon pour qu'il fonctionne correctement, puis j'ai créé une fonction qui ajoute un "élément de 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 dans la base de données et rafraîchir la page?

Quelque chose comme ça:

.accordion('refresh')

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

ajaxjquery-uijquery-ui-accordion
46
espenhogbakk

Je ne l'ai pas testé, mais cela devrait probablement fonctionner: disons que vous avez votre accordéon avec l'ID #accordion

$('#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 de recréer l'accordéon.

MISE À JOUR:

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

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

Vous pouvez en savoir plus sur cette méthode ici

100
Jimmy Stenke

Pour ajouter une nouvelle section et garder l'ancienne 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});
8
Wesley

Comme mentionné ci-dessus par Shahzad, jQuery UI 1.10 a rendu cela plus facile; voir la documentation .

6
Mark D.

Comme j'avais besoin d'un ajout/modification/suppression d'éléments d'accordéon pour travailler, j'ai piraté ces petites fonctions javascript à cet effet

http://jsfiddle.net/Sd6fC/

h3 et div ont besoin d'un identifiant unique conforme à la convention suivante

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

le div correspondant a besoin des éléments suivants

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

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

amusez-vous peut-être que cela aide certains ppl là-bas!

0
Tak0r

Vous voudrez peut-être regarder 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.

0
jfrobishow