I have a page which does an AJAX call and loads an entire page. The page that gets loaded has some Javascript. The javascript works on page by itself when loaded, but when its gets loaded by AJAX, the Javascript does not work. I dont know what I am missing.
The code of the loaded page, the loading page and the AJAX JS files are mentioned.
The code for Page that gets loaded
<?php
session_start();
$name = $_SESSION['valid_user'];
echo "Welcome $name Lets start creating an App. You can create HTML elements for your form incrementally<br>";
?>
<html>
<script type="text/javascript">
function showfield(name){
if(name=='lstbox')document.getElementById('div1').style.display="block";
else document.getElementById('div1').style.display="none";
}
function hidefield() {
document.getElementById('div1').style.display='none';
}
</script>
<head>
</head>
<body>
<form action = "test2.php" method = "post">
Please enter a name for the App <input type = "text" name = "name">
<table border = "1"><tr><th>Choose a Label</th><th>Choose an element</th></tr>
<tr><td><input type = "text" name = "label1" /></td> <td> <body onload="hidefield()">
<select name = "elementtype1" id="elementtype1" onchange="showfield(this.options[this.selectedIndex].value)">
<option value = 'select'> Select </option>
<option value='txtbox'>Text Box</option>
<option value='lstbox'>List Box</option>
<option value='chkbox'>Check Box</option>
<option value='radio'>Radio Button</option>
</select></td><td><div id="div1">Enter Listbox options: <input type="text" name="whatever1" /></div></td></tr>
</table>
<input type = "submit" value = "Submit">
</form>
</body>
</html>THE PAGE THAT LOADS THE other Page(This is a php page with HTML. HTML section has the AJAX calls
<?php
#grab name from previous form
$name = $_POST['name'];
$var1= $_POST['label1'];
$ele1 = $_POST['elementtype1'];
if($ele1 == 'txtbox')
{
$element1 = "$var1";
$element1 .= "<input type='text' name='tb1'><br><br>";
}
else if ($ele1 == 'lstbox')
{
$options1 = $_POST['whatever1'];
$token = explode( ",", $options1);
for ($i = 0; $i<count($token); $i++)
{
$var2 = "$var".$i;
$var2= $token[$i];
echo "$var2";
}
$element1 = $var1."<select>
<option value = ''> </option>
<option value='LI1'>$token[1]</option>
<option value='LI2'>$token[2]</option>
<option value='LI3'>$token[3]</option>
<option value='LI4'>$token[4]</option>
</select><br><br>";
}
else if ($ele1 == 'chkbox')
{
$element1 = $var1."<input type = 'checkbox' name = 'cb1'><br><br>";
}
else if ($ele1 == 'radio')
{
$element1 = $var1."<input type = 'radio' name = 'rb1'><br><br>";
}
else
{
header("http://resolv.org.s110820.gridserver.com/applications/Raghu/login/test1.html");
}
#set up HTML template data
$HTML = "<html><head><title>$name</title></head><body><h1>Hello Here is your App $name</h1><p>Nice to meet you!</p>
$element1 </body></html>";
$PATH = $_SERVER['DOCUMENT_ROOT']; #get server path
$save_path=$PATH.'/applications/Raghu/login/newfiles/'; #define target path
$temp='file.txt'; #define temporary target name
$dest="$name.html"; #define final destination target name, dynamically generated by user's name
$fp = fopen($save_path.'/'.$temp, "w", 0); #open for writing
fputs($fp, $HTML); #write all of template data to our opened file
fclose($fp); #close the file
$finalpath = $save_path.'/'.$dest;
#rename tmp file to dest file
rename($save_path.'/'.$temp,$save_path.'/'.$dest);
?>
<html>
<head>
</head>
<body>
<a href = "logout.php">Logout</a>
<script src="ajax.js" type="text/javascript"></script>
<script src="responseHTML.js" type="text/javascript"></script>
<div id="storage" style="display:none;">
</div>
<div id="displayed">
<FORM name="ajax" method="POST" action="">
<p>
<INPUT type="BUTTON" value="Get the Panel" ONCLICK="loadWholePage('appcreator.php')">
</p>
</FORM>
</div>
</body>
</html>The ajax.js file
function createXHR()
{
var request = false;
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (err2) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (err3) {
try {
request = new XMLHttpRequest();
}
catch (err1)
{
request = false;
}
}
}
return request;
}The responseHTML.js file
function getBody(content)
{
test = content.toLowerCase(); // to eliminate case sensitivity
var x = test.indexOf("<body");
if(x == -1) return "";
x = test.indexOf(">", x);
if(x == -1) return "";
var y = test.lastIndexOf("</body>");
if(y == -1) y = test.lastIndexOf("</html>");
if(y == -1) y = content.length; // If no HTML then just grab everything till end
return content.slice(x + 1, y);
}
/**
Loads a HTML page
Put the content of the body tag into the current page.
Arguments:
url of the other HTML page to load
id of the tag that has to hold the content
*/
function loadHTML(url, fun, storage, param)
{
var xhr = createXHR();
xhr.onreadystatechange=function()
{
if(xhr.readyState == 4)
{
//if(xhr.status == 200)
{
storage.innerHTML = getBody(xhr.responseText);
fun(storage, param);
}
}
};
xhr.open("GET", url , true);
xhr.send(null);
}
/**
Callback
Assign directly a tag
*/
function processHTML(temp, target)
{
target.innerHTML = temp.innerHTML;
}
function loadWholePage(url)
{
var y = document.getElementById("storage");
var x = document.getElementById("displayed");
loadHTML(url, processHTML, x, y);
}
/**
Create responseHTML
for acces by DOM's methods
*/
function processByDOM(responseHTML, target)
{
target.innerHTML = "Extracted by id:<br />";
// does not work with Chrome/Safari
//var message = responseHTML.getElementsByTagName("div").namedItem("two").innerHTML;
var message = responseHTML.getElementsByTagName("div").item(1).innerHTML;
target.innerHTML += message;
target.innerHTML += "<br />Extracted by name:<br />";
message = responseHTML.getElementsByTagName("form").item(0);
target.innerHTML += message.dyn.value;
}
function accessByDOM(url)
{
//var responseHTML = document.createElement("body"); // Bad for opera
var responseHTML = document.getElementById("storage");
var y = document.getElementById("displayed");
loadHTML(url, processByDOM, responseHTML, y);
}