charge jquery htmlbox avec ajax

Question

J'utilise ce code pour charger une htmlbox instance sur ma page (cette page charge également les bibliothèques nécessaires pour utiliser htmlbox dans la section de tête):

<div id="container"></div> 

<script language="Javascript" type="text/javascript"> 

function showEditPnl() { 
    var pnl = document.getElementById("container"); 

    if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } else { 
    // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
    pnl.innerHTML = xmlhttp.responseText; 
    } 
    }; 
    xmlhttp.open("GET","ajax_getEditor.html",true); 
    xmlhttp.send(); 
} 
</script> 

Voici le ajax_getEditor .html fichier:

<textarea id='ha'></textarea> 
<script language="Javascript" type="text/javascript"> 
$("#ha").css("height","100%").css("width","100%").htmlbox({ 
    toolbars:[["link","unlink","image"]], 
skin:"blue" 
}); 
</script> 

Quand j'appelle la méthode showEditPnl() je vois le textarea et le script dans la page. mais il semble que le script (load ajax ajax) n'est pas exécuté. Quand je copie le code d'ajax_getEditor.html et le place dans le récipient, tout fonctionne bien. Je suis sûr que c'est un problème très basique, mais je ne sais pas comment le résoudre ..

Answer 1

Comme l'état des commentaires, c'est le résultat de l'utilisation .innerHTML comme vous êtes actuellement, cette réponse est un peu tangentielle au problème.

Vous pouvez utiliser .load() ici puisque vous avez déjà inclus jQuery pour simplifier un peu les choses. Vous souhaitez remplacer votre fonction actuelle avec ceci:

function showEditPnl() { 
    $("#container").load("ajax_getEditor.html"); 
} 

Ou, vous pouvez exécuter votre script dans la fonction de rappel au lieu de chargement de la page demandée, comme ceci:

function showEditPnl() { 
    $("#container").load("ajax_getEditor.html", function() { 
    $("#ha").css({height:"100%", width: "100%"}).htmlbox({ 
     toolbars:[["link","unlink","image"]], 
     skin:"blue" 
    }); 
    }); 
} 

Dans ce cas, je passe également un objet à .css() pour le réduire à un appel au lieu de deux.

Answer 2

ressemble à ce que j'étais un cul bête à nouveau. les scripts doivent être chargés dans la page d'appel. Le simple chargement de balises de script dans votre page avec innerHTML n'exécutera pas le code à l'intérieur. Merci de signaler cela Pointy :)