Javascript into Ajax context... Unusual problem, no eval() issues

[wenijah]

Hi everyone!

First thank you for reading this post and yes, you probably already see that kind of topic title somewhere but the problem I've got today might be different than the 100 topics I've seen so far that did not resolve my problem...

Environment and problem: I have a page A with Ajax.js and a <div id="ajx">Content</div> that changes when clicking on a link. Another page, page B, gets loaded into page A and (tries) to load a javascript. When I click on the page A's link, the page B gets loaded but the javascript doesn't load.

Specification: I tried several things to get it work (load the javascript with the XHR request, load the javascript from an <img src="" onload="javascript.js">, eval();, global.eval(); with var global = this; to force the script to start, I also tried the script from various topics I've seen...) but nothing worked. Well it did when I tried to load the js with the XHR request but it did not load properly and since I must load the js at the end of page B and not at the beginning so it doesn't work.

Here are my scripts samples:

Ajax.js

var loadedobjects=""
var rootdomain="http://"+window.location.hostname
 
function ajaxpage(url, containerid, tp, poststr){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(containerid).innerHTML='<img src="http://localhost/img/ld.gif">'
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
 
}
 
if (tp != 'POST'){
page_request.open('GET', url, true)
page_request.send(null)
} else {
page_request.open('POST', url, true);
page_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
page_request.setRequestHeader("Content-length", poststr.length);
page_request.setRequestHeader("Connection", "close");
page_request.send(poststr);
}
}
 
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
}
 
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
 

Page A

<a href="#" onclick="javascript:ajaxpage('up/load', 'ajx', 'GET'); loadobjs(alpha.js)">Upload</a>
<br>
<div id="ajx"></div>

Page B

<script>
var ext_allowed='<TMPL_VAR ext_allowed>';
var ext_not_allowed='<TMPL_VAR ext_not_allowed>';
var max_files=<TMPL_VAR max_files>;
var max_size=<TMPL_VAR max_size>;
var descr_mode=<TMPL_VAR enable_file_descr>;
</script>
 
##> Page design and information <###
 
<iframe src="javascript:false;" name="alpha" style="position:absolute;left:-9999px;"></iframe>
<script>InitSelector();</script>

So, for the page B, I need to load the first script with has no function but providing information and the InitSelector(); which is inside alpha.js. This is an atypic request but there must be something to solve it, init?

Thanks a lot in advance.. I've been chasing a solution for 20hours... dang! :-[

uNo! Weni

[acoder]

Split the JavaScript from the HTML. The HTML you can easily add. For the JavaScript, either use eval, or put in the head of the page.