Données ajoutées ne semble pas dans le balisage lors de la visualisation source

Question

J'ai un site Web avec AJAX dessus, essentiellement les utilisateurs cliquent sur un lien, et AJAX va et tire une méthode qui renvoie du code HTML comme montré ci-dessous, comme le title dit que les données retournées ne semblent pas aller dans le HTML, est-ce la raison pour laquelle mes accordéons ne sont pas faits? C'est étrange car les résultats sont renvoyés parce qu'ils ont été placés sur mon écran.

$(document).ready(function() { 
    // 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: "GET", 
         success : function (html) { 
          $("#accordion").append(html); 
          $('#accordion').accordion({ 
           active: 0, 
           header:'h2' 
          }); 
          //alert(accordion()) 
         } 
        }); 
      } 
     }); 
    }); 

Comme je suis sûr que vous pouvez recueillir à partir du code, le code HTML renvoyé est ajouté à la <div id="accordion> puis il est « tourné » en accordéon, mais cela ne se produit pas, tout ce que je reçois sont les classes obtenir ajouté à la div qui donnerait la fonctionnalité d'accordéon, mais je n'ai pas de véritable fonctionnalité.

J'ai remarqué que lorsque je regarde la source si AJAX a tiré ou non, il n'y a pas de contenu dans <div id="accordion> même si je peux voir les données retournées, comment puis-je faire fonctionner l'accordéon?

======= Ce qui est retourné par le ====== AJAX

?php 
if(isset($content)) { 
// var_dump($content); 
    foreach($content as $row) { 
     print "<h2 class='$row[category_name]'><a href='#'>$row[category_name]</a></h2>"; 
     print "<div class='$row[category_name]'>$row[content_title]</div>"; 
    } 
} 
?> 

========= Lorsque le html AJAX va ====== ===

<div id="right-content"> 
    <div id="accordion"></div> 
</div> 

Answer 1

Afficher la source affiche le code source du fichier téléchargé par votre machine, c.-à-d. le fichier AVANT tout AJAX change. Peu importe ce que vous faites en Javascript, rien ne changera jamais dans la source de vue (à moins bien sûr que vous alliez à une nouvelle page).

Si vous voulez voir comment le DOM actuel recherche votre page, vous devez utiliser un outil comme Firebug ou la barre d'outils IE Developer.

Answer 2

En fait vous n'avez pas besoin de Firebug de Firefox mais firebug est un outil fantastique. Sélectionnez le champ que vous pensez devoir changer, faites un clic droit et sélectionnez "View Selection Source" (Firefox uniquement).