load jquery htmlbox with ajax

Question

I use this code to load a htmlbox-instance to my page (this page also loads the necessary libraries to use htmlbox in the head-section):

<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>

Here is the ajax_getEditor.html-file:

<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>

When i call the showEditPnl() method i see the textarea and the script in the page. but it seems like the script (loaded trough ajax) isn't executed. When i copy the code from ajax_getEditor.html and place it in the container, all works fine. I'm sure this is a very basic problem, but i don't know how to solve it..

Answer 1

looks like i was a dumb ass again. scripts need to be loaded in the calling page. Just loading script-tags inside your page with innerHTML won't execute the code inside. Thanks for pointing that out Pointy :)

Answer 2

As the comments state, this is a result of using .innerHTML like you are currently, this answer is a bit tangential to the problem.

You can use .load() here since you're already including jQuery to simplify things a bit. You'd replace your current function with this:

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

Or, you can run your script in the callback instead of loading it from the fetched page, like this:

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

In this case I'm also passing an object to .css() to reduce it to one call instead of two.