Dhtml? Repeat Script Loading? IFrames?

[Kramy]

I'm looking for information on dynamic repeating script loading(no, not AJAX with XML, but Javascript). I can't get Firefox or other browsers to load a new script(by changing a script's src) more than once.

The idea was to use it for a categories system, with the category data being stored on layers after being loaded once. Whether to load a new script or hide/reveal hidden layers is all handled properly. The only thing not firing was the script loading, at least after the inital fire(which takes any script properly).

I then changed it to write new <script type="text/javascript" src="......js"></script> tags, but that wiped out the whole page. Using innerHTML on a span also didn't fire, so I modified the page to use IFrames to dynamically load data.

This is working great, but now I can't communicate between the IFrame script loader and the main page. Neither one has access to the javascript of the other, though they can both manipulate eachother's pages fine.

My problem is centered around repeatedly loading new scripts, so can anyone point me to a tutorial or offer some advice on how it can be done without wiping out the page every time I need to? That or communication between functions in an IFrame and the main window.

Thanks.

[Vladdy]

Script source is loaded by a browser when a newly created script node is attached to the document body. Therefore

function loadScript(source)
{ var dynScript = document.createElement('script');
dynScript.type = 'text/javascript';
dynScript.src = source;
return document.getElementsByTagName('head')[0].appendChild(dynScript);
}

[Kramy]

Ahh, nice. W3C standards compliant code too! :D I had tried something similar before, but I see now I messed up setting the script type and on appending the element properly.

Works like a charm, thanks. :)

[Kramy]

Ok, now I've got another problem. After I dynamically load the script, which is working properly now, I need to tell the page to update. I tried setting an onLoad event for the returned script reference, but the onLoad fails to fire. I also tried inserting it below dynScript.src and above. Nomatter where I put it, it fails to fire, but also fails to generate a "bad code" warning in Firefox.

Is my failure to distinguish between DOM and Javascript causing problems here? I considered repeat-checking if it's loaded, but that seems a somewhat sloppy solution to me unless absolutely necessary. I know the script is loading because if I manually click some text a second time, all the proper data is available. I don't really want to have people double-click links though, especially when the chances of the script loading before the double-click is finished is very slim.


Oh, and I modified that code and started making functions that suit my needs for each element I require(going to get rid of .innerHTML). :)

[Vladdy]

script element does not have "onload" attribute (nor does it need it, when you design application properly):
instead of trying
dynScript.onload=processOnload;
add the call to the source you are loading:
/*This is the dynamically loaded javascript*/
/* do what you need to do here */
processOnload();

[Kramy]

Ahh, right, stupid me! I had specifically removed that way of doing it when it caused problems from within the iframe! :o

Thanks again. :)

[Kramy]

I think you'd save time if you found a good tutorial or reference that covers some of this stuff. :D

Ok, removing innerHTML is going well, but now I'm stuck with a XHTML/CSS related problem. I read somewhere that bgcolor, background, <font>, etc. are all depricated. If I want an XHTML strict page, then I need to use styles for everything instead.

That part is working, and I can set styles to any pre-placed element using class='blah', and everything is taking effect properly. If I try to use .class in the following way though, it throws an error:
function Element_td(pParent, pStyle, sWidth, iAlign, iVAlign)
{
var MemObj = document.createElement('td');

if(sWidth) MemObj.width = sWidth; // Temporary because of below not working
if(pStyle) MemObj.class = pStyle; // <---- Not working

// H-Align
if(iAlign == 1) MemObj.align = 'left'; // This part works great.
else if(iAlign == 2) MemObj.align = 'center';
else if(iAlign == 3) MemObj.align = 'right';

// V-Align
if(iVAlign == 1) MemObj.valign = 'top'; // This fires, but valign doesn't set for no good reason :-/
else if(iVAlign == 2) MemObj.valign = 'middle';
else if(iVAlign == 3) MemObj.valign = 'bottom';

if(pParent) return pParent.appendChild(MemObj); // This part also works great.
else return document.body.appendChild(MemObj);
}
I also tried .style, which said something about only being a getter, and tried setting individual style.xxx attributes. The latter caused no error messages, but also had no effect. I then tried a string with all the style settings, so now I'm really stumped.

My CSS knowledge is really poor and about limitted to this tutorial (http://www.w3schools.com/css/css_intro.asp), so if you have another better one that covers it, fire it my way!