Hinzufügen von Elementen zu einem jQuery Akkordeon mit jquery

Question

Ich bin mit der jQuery Akkordeon-Plugin ein Akkordeon einiger Daten zu machen. Dann möchte ich die Benutzer in der Lage sein, mehr Daten zu dem accordian hinzuzufügen. Ich habe die Akkordeon-Setup richtig funktionieren kann, dann habe ich gemacht eine Funktion, die ein „Listenelement“ auf das Akkordeon prepends, die Akkordeon Semantik entspricht.

Ist es möglich, „update“ das Akkordeon so dass es mit dem neu hinzugefügte Elemente arbeitet, ohne die neuen Daten in der Datenbank zu speichern und die Seite aktualisieren?

So etwas wie folgt aus:

.accordion('refresh')

oder so etwas wie das Live-Ereignis hinzugefügt in jQuery 1.3, bekam jemand eine Ahnung?

Answer 1

Ich habe es nicht getestet, aber dies sollte wahrscheinlich funktionieren: Sagen Sie, dass Sie Ihr Akkordeon mit id #accordion haben

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

Im Grunde genommen nur zerstören und neu erstellen, das Akkordeon.

UPDATE:

Da diese Antwort geschrieben wurde eine Methode refresh () wurde das Akkordeon-Widget hinzugefügt. Es kann durch den Aufruf aufgerufen werden:

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

Sie können mehr über diese Methode lesen hier

Answer 2

Um einen neuen Abschnitt hinzuzufügen und die alten aktiv:

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

Wie bereits erwähnt von Shahzad, jQuery UI 1.10 hat dies erleichtert; finden Sie unter der Dokumentation .

Answer 4

Sie können an der Livequery-Plugin aussehen wollen: http://plugins.jquery.com/project / livequery

Es ermöglicht Ihnen, Ereignisse hinzufügen und verbindlich, nachdem das DOM geladen wird.

Answer 5

Da ich brauchte ein Arbeits Hinzufügen / Bearbeiten / Löschen von Elementen vor Akkordeon gehackt ich diese kleinen Javascript-Funktionen für diesen Zweck

http://jsfiddle.net/Sd6fC/

h3 und div brauchen eine eindeutige ID, die durch die folgende Konvention

geht

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

das entsprechende div benötigen die folgende

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

Probe Akkordeon Codeblock

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

Spaß haben vielleicht ist es da draußen einige ppl hilft!