Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Code only returns my div sporadic

Status
Not open for further replies.

Phara0h

Programmer
Aug 1, 2004
18
0
0
NO
My script failes to execute all lines of code sporadic.

My situation:
I am trying to develop an dynamic solution to microsofts new update to IE6, where all flash objects will need activation to remove an border. I develop an CMS solution so the script needs to be as dynamic as possible.

The goals:
1. I need to load the external script at runtime.
2. I need to be able to check if the file has been loaded.
3. I need to output an div
4. I need to use DOM to append children to that div.

The problem:
When using this with IE I only sporadic get it to display the wanted text in this test.

The suspect:
I suspect it to be the document.writeln in the getContainer function in jsflash.js. I had a problem with IE not loading the external script before calling writeNewDivWithContent so I added the pausecomp function to make it wait a little.

The code:
Sourceview: The testscript: (Refresh this multiple times in IE and it will only display the wanted text sporadic.

The code:
test_jsflash.php:
Code:
<html>
 <head>
 </head>

 <body>
   <script language="Javascript" type="text/javascript">
   if(window.jsflash_is_loaded){

   }
   else {
   	var skript = document.createElement('script');
   	skript.setAttribute('src','jsflash.js');
   	skript.setAttribute('type','text/javascript');
   	document.getElementsByTagName("head")[0].appendChild(skript);
   }

   function pausecomp(millis)
	{
		date = new Date();
		var curDate = null;

		do { var curDate = new Date(); }
		while(curDate-date < millis);
	}

	pausecomp(150);
   </script>
   <script language="Javascript" type="text/javascript">
   writeNewDivWithContent('testbox','Text to display');
   </script>
 </body>
</html>

jsflash.js:
Code:
var jsflash_is_loaded = true;

function writeNewDivWithContent(id,text){
	newid = CreateContainer(id,text);
	var container = document.getElementById(newid);
	container.appendChild(document.createTextNode(text));

}

/*
	Checks for existance of this id in document, and prints a div with a uniqe id.
*/
function CreateContainer(ContainerID){

	if(document.getElementById(ContainerID)){
		return CreateContainer(ContainerID + "_1");
	}
	else {
		document.writeln('<div id="' + ContainerID + '"></div>');
		return ContainerID;
	}

}
 
There you go ;)

I am a newbie to javascript, so I did not think of it. I primearly work in PHP.

It is possible to append multiple onloadcalls inside the <body>?

The reason I ask is that I may need to call the function multiple times for one page. and not in the same place in the html.
 
You can have multiple onlaod calls. In HTML:

Code:
<body onload="func1(); func2(); func3();">

In JS:

Code:
window.onload = function() {
   func1();
   func2();
   func3();
}

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Ok, the script gets loaded, but now it complaines about "container has no properties" (FireFox JavaScript-console message)
It's in jsflash.js:
Inside writeNewDivWithContent
Code:
var jsflash_is_loaded = true;

function writeNewDivWithContent(id,text){
	newid = CreateContainer(id);
	var container = document.getElementById(newid);
	container.appendChild(document.createTextNode(text));

}

/*
	Checks for existance of this id in document, and prints a div with a uniqe id.
*/
function CreateContainer(ContainerID){

	if(document.getElementById(ContainerID)){
		return CreateContainer(ContainerID + "_1");
	}
	else {
		document.writeln('<div id="' + ContainerID + '"></div>');
		return ContainerID;
	}

}

Now my php/html-file looks like this:

Code:
<html>
 <head>
 </head>

 <body>
   <script language="Javascript" type="text/javascript">
   if(window.jsflash_is_loaded){

   }
   else {
   	var skript = document.createElement('script');
   	skript.setAttribute('src','jsflash.js');
   	skript.setAttribute('type','text/javascript');
   	document.getElementsByTagName("head")[0].appendChild(skript);
   }

   </script>
   <script language="Javascript" type="text/javascript">
	window.onload = function() {
	   writeNewDivWithContent('testbox','Text to display');
	}
   </script>
 </body>
</html>
 
That is because document.write(ln) works differently after the document has loaded than before.

Try replacing this line in your CreateContainer function:

Code:
document.writeln('<div id="' + ContainerID + '"></div>');

with these:

Code:
var theBody = document.getElementsByTagName('body')[0];
var newDiv = document.createElement('div');
newDiv.id = ContainerID;
theBody.appendChild(newDiv);

This, of course, assumes you're OK with the div element being put right at the end of the body.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Thanx, this solved that problem, I still had problems with the function not being defined. I guess when adding script to head at runtime, the onloadmethod does not wait for it.

Anyway, if you do not have any other suggestion I will load the script in all pages created by the CMS, since its so small it will not be a problem.
 
You get that error because of this bit of code:
Code:
   if(window.jsflash_is_loaded){

   }
   else {
       var skript = document.createElement('script');
       skript.setAttribute('src','jsflash.js');
       skript.setAttribute('type','text/javascript');
       document.getElementsByTagName("head")[0].appendChild(skript);
   }
The above code is not in a function so the browser tries to run the code even before the rest of the page has finished loading and therefore all of the items it tries to use may not yet exist. Just put the code within a function that gets called with onload or put the call to the function at the top of one of the functions that IS called by onload.


Paranoid? ME?? Who wants to know????
 
There is something weird going on here now...

The browser gets disconnected before the page is rendered complete. All scripts are run, but the it complaines about being cut off(not sure what the errormessage is in english since I have norwegian text)


Se sources at
Firefox is OK, this is ONLY in IE.
 
I just got it working right now :)

Don't know what did it, but now it works! :)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top