it-swarm.com.de

Dynamisches Hinzufügen und Aktualisieren von Elementen zum Accordion-Widget in der jQuery-Benutzeroberfläche

MehrereFragen verweisen hier auf SO auf diese jQuery-UI-Funktionsanforderung öffnen für die Fähigkeit, Panels dynamisch zum Accordion-Widget hinzuzufügen bzw. daraus zu entfernen. Das Ticket selbst ist markiert (Closed Feature: Fixed) und aus dem, was ich von den Unit-Tests ablesen kann und einem Pull aus ihrem Git-Repository, scheint es in der neuesten Version implementiert zu sein.

Wenn ich jedoch versuche, ein div hinzuzufügen, wie im obigen Gerätetest:

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

Ich kann es nicht zum Laufen bringen.

Jedoch diese Methode funktioniert:

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

Aber ich möchte das Akkordeon nicht "zerstören", ich möchte nur ein Element anhängen (oder voranstellen) und es aktualisieren.

Ein Blick auf das Div, das ich im Inspektor von Chrome hinzugefügt habe, zeigt, dass das von mir hinzugefügte Element nicht das gleiche CSS-Styling wie der Rest des Akkordeons hat:

enter image description here

13
Jack

unibasil ist richtig, dass die jQuery-Benutzeroberfläche 1.10.0 die Methode refresh aktualisiert hat, um dieses Verhalten nun zuzulassen.

Hier ist der 1.10.0 changelog Hinweis zum Update. 

Die Aktualisierungsmethode erkennt jetzt hinzugefügte Bedienfelder oder entfernt werden. Dies bringt Akkordeon in Einklang mit Tabs und anderen Widgets dass das Markup analysiert, um Änderungen zu finden.

Konfiguration

<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>
</div>
<div>
    <button id="addAccordion">Add Accordion</button>
</div>

Javascript

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('.questions').append(newDiv)
    $('.questions').accordion("refresh");        
});

Beispiel 

jsFiddle zeigt, dass Sie im Handumdrehen neue Akkordeons hinzufügen können, ohne das alte zu zerstören. 

30
Jerry

Dank an Jarek ! In meinem Fall ist es funktionsfähig, ohne div einzuschließen. Das div bewirkt, dass das nächste Akkordeon entsteht. 

$('#addAccordion').click( function() {
  var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
  $('.questions').append(newDiv)
  $('.questions').accordion("refresh");
});    
5
Plch

Tatsächlich besprochenes Verhalten wurde in jQuery UI 1.10.0 (gerade veröffentlicht ) aufgenommen und funktioniert für mich einwandfrei.

1
unibasil