[英]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): 我使用以下代码将htmlbox-instance加载到我的页面上(此页面还加载了使用htmlbox的必要库,以在头部显示):
<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: 这是ajax_getEditor.html文件:
<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. 当我调用
showEditPnl()
方法时,我会在页面中看到文本区域和脚本。 but it seems like the script (loaded trough ajax) isn't executed. 但是似乎脚本(加载的ajax槽)没有执行。 When i copy the code from ajax_getEditor.html and place it in the container, all works fine.
当我从ajax_getEditor.html复制代码并将其放在容器中时,一切正常。 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. 正如评论
.innerHTML
,这是由于像现在一样使用.innerHTML
而导致的,此答案与该问题有点相切。
You can use .load()
here since you're already including jQuery to simplify things a bit. 您可以在这里使用
.load()
,因为您已经包含了jQuery来简化一些事情。 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. 在这种情况下,我还将对象传递给
.css()
以将其减少为一个调用而不是两个调用。
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.
仅使用innerHTML在页面内部加载脚本标记将不会执行其中的代码。 Thanks for pointing that out Pointy :)
感谢您指出Pointy :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.