Prototype Event.observe ne voit pas HTML retourné par AJAX

Question

J'essaye de créer un système de CMS basé sur AJAX en utilisant la bibliothèque de Prototype. Sur un chargement de page, j'ai le HTML, le titre de page et le Javascript additionnel pour la page retournée par l'intermédiaire de JSON, et je mets à jour le HTML sur la région principale. J'ai aussi un écouteur d'événements qui écoute certains ID sur lesquels cliquer.

L'auditeur travaille,

var TabMenu = { 
selectedTab: 'main', 
showTab: function(pid) { alert(pid); alert($(pid)); 
    $(pid).addClassName('selected'); this.selectedTab = pid; 
    $(this.defaultTab).removeClassName('selected'); 
}}; 

Après le chargement, je clique sur l'un des nouveaux onglets, et la première alerte « test » alertes avec succès l'ID de l'élément, mais la deuxième alerte ($ (pid)) renvoie null. Je ne peux que supposer que le HTML retourné par la requête AJAX n'est pas évalué et ajouté au DOM, sinon il alerterait [HTMLDivElement] au lieu de "null".

Voici l'appel AJAX pertinent:

 new Ajax.Request(url, { 
     onSuccess: function(t) { 
      data = t.responseText.evalJSON(); 
      Page.update(data.html, data.title, data.js); 
      Page.destroyLoader(); 
     } 
    }); 

Et voici la fonction de mise à jour:

update: function(data, title, js) { 
    document.title = Global.title + title; 
    if (title != "") { $('HEADING').update(title); } 
    $('MAIN').update(data); 
    if (js != "") { 
     var nuJS = new Element('script', { type: 'text/javascript' }).update(js); 
     $('MAIN').insert({ top: nuJS }); 
    } 
} 

Toutes les idées sur la façon dont je peux obtenir ce travail?

Answer 1

Quand la requête ajax est-elle déclenchée? Est-il déclenché lorsque vous cliquez sur l'onglet? Si c'est le cas, la fonction showTab est déclenchée avant que les données aient été insérées dans le DOM.

Si vous avez un firebug, essayez d'utiliser la console pour sélectionner les données html, une fois l'appel ajax terminé, pour voir ce que vous obtenez. Vous pouvez également utiliser l'onglet html de firebug pour voir si les données ont été insérées dans le DOM.

En outre, même si vous obtenez le paramètre pid défini sur une valeur, fait-il référence à un ID réel qui existe dans le DOM?

Answer 2

De votre code et du commentaire ci-dessus. Je pense que votre plan est de charger tous les onglets après le chargement immédiat de la page. Et cachez-les tous en utilisant le CSS. Attendez que l'utilisateur clique sur l'onglet, Afficher uniquement celui qui est "sélectionné", non?

C'est dire que vous devez changer:

$('MAIN').update(data); 

à quelque chose comme

$('MAIN').update({after: data}); 

Il ne remplacent pas celui existé. Et n'oubliez pas de déplacer le code pour document.title et eval js dans la fonction showTab.

javascript Pour l'évaluation, vous pouvez insérer les js dans data.html et utilisez plutôt:

$('MAIN').innerHTML.evalScripts();