0

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);
	}
4
Contributors
13
Replies
18
Views
6 Years
Discussion Span
Last Post by MMSWEBSD
0

Why do you have 2 <body> tags? :O

<body onload="hidefield()">

I have tried having only one as you suggest but it does not work. I feel that the problem is there because the AJAX script reads only the contents inbetween the <body> </body> element. The javascript is inbetween the <html> and the <body> elements at the start of the page, because of which it is not read and so not available. How to read this entire page is my question?

0

Can't you just put the script in a .js file and call it then?

For example:

<script type="text/javascript" src="jquery.js"></script>

Put this in the <body> tag?

I really think you should take out the other <body> tag though. If you need to do server side calls on page load then you can use the first <body> tag. If it's not working there's probably a problem with your ajax call or your server side code.

Debug - Comment out piece by piece until you find the problem. Make a test page and do a basic version of what you're trying to do then once you get it, add the bells and whistles afterwards.

0

Can't you just put the script in a .js file and call it then?

For example:

<script type="text/javascript" src="jquery.js"></script>

Put this in the <body> tag?

I really think you should take out the other <body> tag though. If you need to do server side calls on page load then you can use the first <body> tag. If it's not working there's probably a problem with your ajax call or your server side code.

Debug - Comment out piece by piece until you find the problem. Make a test page and do a basic version of what you're trying to do then once you get it, add the bells and whistles afterwards.

I tried, but it does not work. Is there any other alternative to body onload. I came across window onload and tried it, but that also did not work.

0

body onload should work fine... you don't wanna have a pile of mess for code so what I recommend you do, is make a new blank file and run a simple body onload function (which will definitely work) - then just grow it from there so you know what's causing the problem...

0

body onload should work fine... you don't wanna have a pile of mess for code so what I recommend you do, is make a new blank file and run a simple body onload function (which will definitely work) - then just grow it from there so you know what's causing the problem...

The code that I have pasted above is functional and will display the pages. Can you try and see what is going on? I dont think anything is working for me. I did some changes to the ajax script, but that does not seem to work either.

0

body onload should work fine... you don't wanna have a pile of mess for code so what I recommend you do, is make a new blank file and run a simple body onload function (which will definitely work) - then just grow it from there so you know what's causing the problem...

Take a look at the link below. This is exactly what is going on with my script.

http://www.interaktonline.com/Support/Knowledgebase/Technote/Details/251/17/JavaScript+OnLoad+events+do+not+work+with+AJAX+panels.html

0

Well ya, you can call it from your current onload function or you can just use multiple functions in the body onload that you've got. i.e:

<body onload="function1(); function2(); function3();">
0

Well ya, you can call it from your current onload function or you can just use multiple functions in the body onload that you've got. i.e:

<body onload="function1(); function2(); function3();">

so where should these functions be written? coz when the body loads they should be available. So I imagine they should be inbetween <html> and <body> tags of a HTML page. If I do that then they will not work. Can you take my HTML page and modify it and post it? Remember, it has to load upon AJAX call.

Edited by raghujosh: n/a

0

lol no... if you don't like coding then don't do it?

I did not say that I dont like coding. All I wanted was to know if you could modify the HTML to display the functions as you suggest. If you surely know how to go about,then post otherwise its a waste of my time.

Edited by raghujosh: n/a

0

were you ever able to solve this? I'm having a similar issue with using ajax to load page content into a <div> tag... and if the content contains javascript e.g. <script..> it won't display

0

hi goldentuna were you able to resolve this ..?exact same problem to me ...very very urgent...

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.