web-dev-qa-db-fra.com

Ajout dynamique et rafraîchissement d'éléments au widget Accordéon dans l'interface utilisateur de jQuery

Plusieursquestions ici sur SO référencent ceci ouvrez la demande de fonctionnalité de l'interface utilisateur jQuery pour la possibilité d'ajouter/de supprimer de manière dynamique des panneaux du widget Accordion. Le ticket lui-même est marqué (fonctionnalité fermée: corrigé) et d'après ce que je peux dire des tests unitaires et d'un extrait de leur référentiel Git, il semble être implémenté dans la dernière version.

Cependant, si j'essaie d'ajouter une div comme ils l'ont fait dans le test unitaire ci-dessus:

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

Je n'arrive pas à le faire marcher.

Cependant cette méthode fonctionne:

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

Mais je ne veux pas "détruire" l'accordéon, je veux juste ajouter (ou ajouter) un élément et le rafraîchir.

L'examen de la division que j'ai ajoutée dans l'inspecteur de Chrome montre que l'élément ajouté n'a pas le même style CSS ajouté que le reste de l'accordéon:

enter image description here

jqueryjquery-uiaccordionjquery-ui-accordion
13
Jack

unibasil a raison de dire que jQuery UI 1.10.0 a mis à jour la méthode refresh pour autoriser désormais ce comportement.

Voici le 1.10.0 changelog note sur la mise à jour. 

La méthode d'actualisation reconnaîtra maintenant les panneaux qui ont été ajoutés ou enlevé. Cela aligne l'accordéon sur les onglets et autres widgets qui analysent le balisage pour rechercher les modifications.

Installer

<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");        
});

Exemple 

jsFiddle montrant que vous pouvez ajouter de nouveaux accordéons à la volée sans avoir à détruire l'ancien. 

30
Jerry

Merci à Jarek ! Dans mon cas, est-il fonctionnel sans inclure div. La div provoque la création de l'accordéon suivant. 

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

Le comportement réellement discuté a été inclus dans jQuery UI 1.10.0 (juste publié ) et fonctionne bien pour moi.

1
unibasil