Topic awaiting preservation: calling functions onload and the DOM

I have a series of js functions which are built to accomplish certain 'markup enhancing functions' ala ALA's Table Ruler and Zebra Tables, etc.
Each function has its own file and is included on each page like this:
<script type='text/javascript' src='functionName.js'></script>

The entire website is dynamically created w/ php and a db...a db table links pages with the appropriate js files needed for that page, thus they are included in the head of the document when php creates the page.

Anyway, what I want to do is include a js function on every page. The function will loop through all the script tags, pull out the value of the src attribute, parse out the function name, and call the function.

function doTheLoop()

{

	var functions = document.getElementsByTagName("script");



	for(i=0; i<functions.length; i++)

	{

		var scriptTag = functions[i];

		var JsSrc = new String(scriptTag.src);

		if(JsSrc == '')

		{

	

		}

		else

		{

			var JsSrcFolders = JsSrc.split("/");

			var j = JsSrcFolders.length - 1;

			var JsFileName = new String(JsSrcFolders[j]);

			var JsFileName = JsFileName.split(".");

			JsFunctionName = JsFileName[0];

			JsFunctionName+='()';

			eval(JsFunctionName);

		}

	}

}

window.onload=function()

	{

		doTheLoop();

	}

Well, it always executes the FIRST script tag/function correctly, and ignores all the rest.
I, obviously, would like it to actually execute ALL of the functions correctly.

Any help?

Thanks

quote:

---

mobrul said:

I have a series of js functions which are built to accomplish certain 'markup enhancing functions'

---

And you didn't entered the May 20lines Javascript contest - Enhancing markup

Your approach to parse the script tags sounds good, but is tricky to implement. I'd rather feed a global array in every external JS file to append the handle of the function to execute on load and voilà. Othewise if you wish to stick to your parsing method, have you tried to create a string with all the names of the functions and evaluate it only at the end of the for( ... ) loop ?

[edit] It's certainly worth chekcing Simon Willison's "Executing JavaScript on page load" [/edit]



(Edited by poi on 06-02-2004 18:03)

[edit: Sorry poi. To be perfectly honest, I'm swamped right now...live date coming soon and my head buried in 18 different kinds of code and I didn't even know such a contest existed. Give me 'til the end of June and I'll be back in order. =) ]


This makes no sense at all to me, but it works just as I wish it to.

function doTheLoop()

{

	var scripts = new Array();

	var functions = document.getElementsByTagName("script");



	for(i=0; i<functions.length; i++)

	{

		var scriptTag = functions[i];

		var JsSrc = new String(scriptTag.src);

		if(JsSrc == '')

		{

	

		}

		else

		{

			var JsSrcFolders = JsSrc.split("/");

			var j = JsSrcFolders.length - 1;

			var JsFileName = new String(JsSrcFolders[j]);

			var JsFileName = JsFileName.split(".");

			JsFunctionName = JsFileName[0];

			JsFunctionName+='()';

			scripts.push(JsFunctionName); // building array

		}

	}

	for(j=0; j < scripts.length; j++)   // Notice the additional for loop

	{                       

		var todo = scripts[j];

		eval(todo);

	}

}

window.onload=function()

	{

		doTheLoop();

	}

Why does this work and my first attempt doesn't? I have no idea. None at all.
If someone knows the reason, I'd love to hear it.

Thanks to Mr. Poi for pointing me in the right direction.

I hope this is useful to someone else...
It's really quite a handy idea, especially in a content management environment.
I have a 'library' of these kinds of functions.

All of the content people know what functions exist, and on what elements they can be used. This information is displayed in the content management system.

When adding content, they have to simply assign the correct class to the element. (since elements can have many classes, it's damn near impossible for even the most ignorent to screw this up...)
When the content gets loaded into the management system, I have some php that looks through each element and tries to match classes assigned to elements w/ those that exist in the library. If such a match exists, a new row is added to the db. I don't have the removal script written yet, but that shouldn't be any more difficult.

Upon page creation, we simply add the appropriate script tag with src attribute -- one for each record in the db table. The onload and doTheLoop functions get added to every page.

Instant js controlling behavior, markup stays clean, degrades nicely, and the content people need to know exactly zero about scripts. Win, win, win, and win.

thanks

(Edited by mobrul on 06-02-2004 20:31)