load jquery htmlbox with ajax
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=functio开发者_如何转开发n() {
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..
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.
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 :)
精彩评论