jquery changement d'accordéon manquant newContent

Question

J'utilise l'accordéon jQuery UI pour la première fois et je pense qu'il me manque quelque chose ici. J'ai écrit le code suivant:

<div id="theAccordion"> 
     <h2><a href="#">Header1</a></h2> 
     <div>old content 1</div> 
     <h2><a href="#">Header2</a></h2> 
     <div>old content 2</div> 
     <h2><a href="#">Header3</a></h2> 
     <div>old content 3</div> 
     <h2><a href="#">Header4</a></h2> 
     <div>old content 4</div> 
     <h2><a href="#">Header5</a></h2> 
     <div>old content 5</div> 
    </div> 
<script type="text/javascript"> 
    var map = { 
     Header1: function(jqObj) { jqObj.append("<p>new content 1</p>"); }, 
     Header2: function(jqObj) { jqObj.append("<p>new content 2</p>"); }, 
     Header3: function(jqObj) { jqObj.append("<p>new content 3</p>"); }, 
     Header4: function(jqObj) { jqObj.append("<p>new content 4</p>"); }, 
     Header5: function(jqObj) { jqObj.append("<p>new content 5</p>"); } 
    }; 
    function accordionChange(event, ui) { 
     ui.newContent.empty(); 
     eval("map." + ui.newHeader.text() + "(ui.newContent)"); 
    } 
    $(function() { 
     $("#theAccordion").accordion({ 
      change: function(event, ui) { accordionChange(event, ui); } 
     }); 
    }); 
</script> 

Le code fonctionne comme prévu, il déclenche les fonctions de carte, mais pas de code est ajouté au contenu de l'accordéon parce que l'objet newContent semble être tout le temps vide. Je le déboguais avec les outils de débogage IE8 et jqObj.length est zéro donc aucune modification n'est apportée dans le nouveau contenu. avez-vous une idée de ce qui se passe ici?

Merci à l'avance

Answer 1

En fait - vous avez eu du mal parce qu'il ya un bug dans le widget accordéon . J'ai fait un patch tout à l'heure: http://dev.jqueryui.com/ticket/4469#comment:4

Answer 2

Il pourrait avoir quelque chose à voir avec la liaison, mais je ne suis pas sûr. Avez-vous essayé de mettre le code de fonction actuel dans l'initialisation d'accordéon. Notez que j'ai également changé append() à html() puisque votre contenu d'origine n'a pas été enveloppé dans un p.

var map = { 
    Header1: function(jqObj) { jqObj.html("new content 1"); }, 
    Header2: function(jqObj) { jqObj.html("new content 2"); }, 
    Header3: function(jqObj) { jqObj.html("new content 3"); }, 
    Header4: function(jqObj) { jqObj.html("new content 4"); }, 
    Header5: function(jqObj) { jqObj.html("new content 5"); } 
}; 

$(function() { 
    $("#theAccordion").accordion({ 
     change: function(event, ui) { 
      ui.newContent.empty(); 
      eval("map." + ui.newHeader.text() + "(ui.newContent)"); 
     } 
    }); 
}) 

Answer 3

Est-ce parce que vous le videz avant de l'utiliser? i.e.:

ui.newContent.empty(); 
eval("map." + ui.newHeader.text() + "(ui.newContent)"); 

Essayez de remplacer le rappel accordionChange à ceci:

function accordionChange(event, ui) { 
    var text = ui.newContent.text(); 
    ui.newContent.empty(); 
    eval("map." + ui.newHeader.text() + "(text)"); 
} 

Answer 4

trouvé la solution!

Ajout d'un paragraphe dans le contenu résolu le problème, de sorte que le code modifié est ce

<div id="theAccordion"> 
    <h2><a href="#">Header1</a></h2> 
    <div><p>old content 1</p></div> 
    <h2><a href="#">Header2</a></h2> 
    <div><p>old content 2</p></div> 
    <h2><a href="#">Header3</a></h2> 
    <div><p>old content 3</p></div> 
    <h2><a href="#">Header4</a></h2> 
    <div><p>old content 4</p></div> 
    <h2><a href="#">Header5</a></h2> 
    <div><p>old content 5</p></div> 
</div> 

Merci à tous pour votre aide