Les DOM, Jquery et Accordions

J'ai une page qui fait une requête AJAX, et retourne des données de la base de données, une fois qu'elle est retirée, j'essaye de l'ajouter à un div et de faire un accordéon, mais tout ce que je reçois sont les données en arrière et pas accordéon voici mon code source une fois que l'AJAX a été exécuté. (extrait)Les DOM, Jquery et Accordions

<script type="text/javascript"> 

$(document).ready(function() { 
    //accordians for when the AJAX loads the content 
    // hides the main_menu as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('#main_menu').hide(); 
    // shows the slickbox on clicking the noted link 
    $('h3#show-menu a').click(function() { 
      $('#main_menu').toggle('slow'); 
      return false; 
    }); 
    //try and hide the left content when it is null 
    $("#left-content:empty").hide(); 
    //style up the scroll bar 
    $('#left-content').jScrollPane(); 
    //do some AJAX to call the method instead of the browser 
    $("a.navlink").click(function (ev) { 
     $(this).toggleClass("active"); 
     ev.preventDefault(); 
     var id = $(this).attr("id") 
     if ($(this).hasClass("active")) { 
      $("."+id).remove(); 
     } else { 
      //$(this).toggleClass("active"); 
      var url = $(this).attr("href"); 
      $.ajax ({ 
       url: url, 
       type: "POST", 
       success : function (html) { 
        $("#accordion").append(html); 
        $('#accordion').accordion({ 
         active: 0, 
         header:'h2.Blog' 
        }); 
       //alert(accordion()) 
       } 
      }); 
      } 
     }); 
     }); 
</script> 
</head> 
<body> 
<div style="left: -100em; position: absolute; width: 100em;"/> 
<div id="wrapper"> 
<h3 id="show-menu"> 
</h3> 
<div id="main_menu" style="display: block;"> 
</div> 
<div id="left-content-holder"> 
</div> 
<div id="right-content"> 
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist"> 
<h2 class="Blog ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0"> 
</h2> 
<div class="Blog ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 16px;" role="tabpanel">Hello World</div> 
</div> 
</div> 
</div>

Comme vous pouvez le voir les données se joint en annexe au <div id="accordion"> et toutes les classes apropriate se donne aux éléments devrait lui donner la fonctionnalité d'accordéon mais je n'ai rien. Devrais-je créer l'accordéon à partir du DOM et théoriquement les données sont retournées ne sont pas dans le HTML et si oui, comment pourrais-je faire cela?

Merci

Source

2009-12-10 Udders

semble que l'accordéon n'aime pas les choses étant ajoutées sur elle. En supposant que vous avez déjà initié l'accordéon, essayez de détruire l'accordéon avant de lui ajouter le html dans votre fonction de succès.

$('#accordion').accordion('destroy'); 

    before 

$('#accordion').append(html);

Puis vous pouvez le réinitialiser comme vous le faites déjà.

Source

2009-12-10 23:43:17 munch

Vous génial absolu, je pourrais vous embrasser !!!! – Udders

Facile là. Vous allez devoir me courtiser d'abord, haha. Content que cela fonctionne;) – munch

Les DOM, Jquery et Accordions

Répondre

Questions connexes