Aggiungere elementi a un jQuery Accordion con jQuery

Question

Sto usando il plugin jQuery fisarmonica per fare una fisarmonica di alcuni dati. Poi voglio che l'utente sia in grado di aggiungere altri dati alla fisarmonica. Ho installato la fisarmonica per funzionare correttamente, quindi ho fatto una funzione che antepone un "elemento della lista" per la fisarmonica che corrisponde la semantica di fisarmonica.

E 'possibile "aggiornare" la fisarmonica in modo che funzioni con l'elemento appena aggiunto, senza salvare i nuovi dati al database e aggiornare la pagina?

Qualcosa di simile a questo:

.accordion('refresh')

O qualcosa di simile l'evento dal vivo aggiunto in jQuery 1.3, nessuno ha un indizio?

Answer 1

Non ho ancora testato, ma questo dovrebbe probabilmente funzionerà: Dire che avete la vostra fisarmonica con id #accordion

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

In sostanza, solo distruggere e ricreare la fisarmonica.

UPDATE:

Dal momento che questa risposta è stato scritto un metodo di aggiornamento () è stato aggiunto al widget fisarmonica. Essa può essere invocata chiamando:

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

Si può leggere di più su questo metodo qui

Answer 2

Per aggiungere una nuova sezione, e mantenere il vecchio attiva:

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

Come sopra menzionato da Shahzad, jQuery UI 1.10 ha reso questo facile; vedi la documentazione .

Answer 4

Si potrebbe desiderare di guardare il plugin LiveQuery: http://plugins.jquery.com/project / livequery

E 'consente di aggiungere eventi e vincolante dopo che il DOM è stato caricato.

Answer 5

Da quando ho bisogno di un lavoro aggiungere / modificare / eliminare gli elementi vor fisarmonica ho inciso questo piccolo funzioni javascript per questo scopo

http://jsfiddle.net/Sd6fC/

h3 e hanno bisogno di un div id unico che va sotto il seguente convenzione

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

il div corrispondente bisogno del seguente

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

campione fisarmonica blocco di codice

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

divertirsi forse aiuta alcuni ppl là fuori!