How to reload all of javascripts after ajax request?
I have a page with a lot of javascripts. I have content and it has javascript effects. I want to change the content to another content (Of course with the same javascript effects) using ajax.
Here is my code for ajax request:
<head>
<script type="text/javascript">
function ajax(txt) {
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("MICROSOFT.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 & xmlhttp.status==200)
{
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "index.php?p="+txt, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="content">
...content...
</div>
<input type="button" onclick=ajax('2') value="click" />
</body>
The problem is the content is changed but the new content doesn't have any of the javascript effects. And I think t开发者_StackOverflow社区he javascripts need to be reloaded but how can I do it after an ajax request?
Thanks
You do not have to reload your javascript files. All you have to do is to make "effects" know that there is new content on your page. Usually you have to run again a function. In case of using jquery function is $(document.ready(...)). If your "effects" aren't wrapped in a function than wrap them and call this function when content is changed.
If reloading the Javascript files is the solution, you can try this function:
function inject(src, cb, target){
target = target || document.body;
var s = document.createElement('SCRIPT');
s.charset = 'UTF-8';
if(typeof cb === 'function'){
s.onload = function(){
cb(s);
};
s.onreadystatechange = function () {
(/loaded|complete/).test(s.readyState) && cb(s);
};
}
s.src = src;
target.appendChild(s);
return s;
};
And to use it:
inject('path/to/new.js');
or use the callback function if you want to trigger an action when the file is loaded:
inject('path/to/new.js', function(s){
//the file is loaded
});
Include JavaScript for effects inside old and new content block and rerun effect scripts after inserting new node with something like this:
/**
* Evaluates scripts included via innerHTML.
* @param {Node} node Node containing scripts.
* */
function evalScripts(node){
if (!node) return;
var st = node.getElementsByTagName('SCRIPT');
var strExec;
for (var i = 0; i < st.length; i++) {
strExec = st[i].text;
//st[i].parentNode.removeChild(st[i]);
st[i].text = '';
try {
var x = document.createElement('script');
x.type = 'text/javascript';
x.innerHTML = strExec;
document.getElementsByTagName('head')[0].appendChild(x);
}
catch (bug) {}
}
};
Also it can be good idea to delete old scripts from head somehow if you plan a lot of such operations.
加载中,请稍侯......
精彩评论