Am I over dynamic?

[ZooLee]

I have some code that uses AJAX to dynamically load some content into a div tag while the page remains there still, no reload flickering. Let's say that content is some JavaScript code. How can I run the code itself from the loader page?

Just to demonstrate it via a simple example what do I need to do to display the 'vazze' variable's value?

Sample code for loading page (loader.html) -----------------

<script src="/pulltree.js"></script>
...
<table cellpadding=0 cellspacing=0 border="0">
<tr><td><input type="radio" name="CP" value="0" onfocus="showTree('')" checked><%=getMessage("AccessAll","CompanyName")%></td></tr>
<tr><td><input type="radio" name="CP" value="1" onfocus="showTree(1)"><%=getMessage("SelectGroupAcc")%><div id="txtTreeLocation"></div>
<script language=javascript>
<!--
document.write(vazze);
//-->
</script>
...
Code for pulltree.js -----------------------------

var xmlHttp

function showTree(str)
{
if (str.length==0)
{
document.getElementById("txtTreeLocation").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="gettree.asp";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtTreeLocation").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Code for gettree.asp -----------------------------
...
<p>This is the text I can see</p>
<script language=javascript>
var vazze = 1111;
</script>
...

There is a simple document.write there that breaks the code, because vazze is not there yet, otherwise I can see the text I pull in. Maybe I need to find a way to check if the innerHTML stuff is already loaded and then I can run the document.write or? What do you guys think?

 

[dwarfthrower]

I'd skip the document.write altogether and simply set the innerHTML property of the element directly.

function populateInformation(){
 if(vazze != null){
  document.getElementById("yourDivIDHere").innerHTML = vazze;
 }
}
[code]

Then call that function from the onload event of your document.

[b][i][sub][COLOR=#AAAAAA]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/color][/sub][/i][/b]
[url=http://www.enableapps.com.au]Enable Apps[/url]

 

[theniteowl]

I am not sure if the javascript code loaded after the fact is instantiated into the page or if that can only happen when the page itself loads.

If it CAN be done by loading it into the div and your intent is to execute the function after it has loaded from the xmlHTTP request then you could try just having the function call immediately after the function:

myfucntion() {
  do something;
}
myfunction;

I really do not know if that will work or not.

The other method and probably the safer one in any case is to monitor the xmlHTTP request so that you know when it has completed by monitoring a change in it's readyState. This way you know when the response has been returned and you can then execute the function from there.


At my age I still learn something new every day, but I forget two others.

 

[ZooLee]

I have already tried to put the JavaScript after but that does not work. I'll test what dwarfthrower suggested and let you guys know.

 

[ZooLee]

None of these work. It says 'vazze' is undefined. The problem is that the page gettree.asp loads last.
What would help - I think - if we could find some event (onload innerHTML something?) that triggers the code AFTER it loaded gettree.asp page into the DIV tag. But I do not know how to do that.

 

[theniteowl]

I think that the javascript functions have to be there when the page is rendered by the browser in order for you to be able to call them.

What is your need to load code after the page has rendered?
Can you just put all of the functions used from that page into one library loaded when the page loads?

Another approach may be to have a function already established that you can pass your newly loaded javascript code to and have it create the new function with the function constructor.
Look at these links:

http://www.devguru.com/Technologies/ecmascript/quickref/function_object.html

http://www.permadi.com/tutorial/jsFunc/

At my age I still learn something new every day, but I forget two others.