adding javascript dynamically

Hi,

I'm currently looking at data-piping ie making server calls without reloading the page, the server returning some data to a cookie and the calling page using that same data on the page using DHTML. So far so good...

But is it possible to actually use javascript to actually write more javascript onto the page? Or, alternatively, is it possible to dynamically add a call to an external javascript file.

Something like...

document.writeln('<script src="script.js")

The idea being that the server could return functions for the calling page to use, which would be very nice for complex web applications.

If you can do this, what issues do you need to be aware of?

If you can't, are there any ways of achieveing the same things? I'm thinking of things like dynamically adding a scriptlet call to the page in Windows IE, though a more cross-browser solution would be cool.

Any help would be appreciated,

Cheers,

Alan Hill

DOM compliant solution:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'serversidescript.asp';
document.getElementsByTagName('head')[0].addChild(script);

Originally posted by Vladdy
DOM compliant solution:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'serversidescript.asp';
document.getElementsByTagName('head')[0].addChild(script);


Replace with method appendChild().

if that doesn't work, what you might try, is using an iframe. then, you could document.write() into the iframe, and have the iframe load the javascript.

eg

<script>
self.IFRAME.document.write('<script src="serversidescript.asp"></"+"script>');
self.IFRAME.someJavaScriptFunction();
</script>

Thanks for correction, Zvona. It was too late to think straight when I was typing it.

Hi,

Thanks to everyone who replied, I'm very grateful.

Anyone here actually used this technique? It would be cool if someone could show me a site that uses this technique. Alternatively, if anyone knows a guide to dynamically loading javascript, and how the browsers deal with it, that would be cool too.

Cheers,

Alan Hill

Hi,

Yes - there's a working demo of this on the Javascript FAQ section of the Javascript City Forums (http://www.webxpertz.net/forums/) ... the forums are down at the moment, so I can't give you the full URL.

Hi

The forums you mention seem to be up now but I cannot find the page you talk about. Vladdy I cannot get your code (with the fix) to work at all. It doesn't cause an error and it does get to the alert statement after the final line of code, however nothing in the file i'm appending is running. At the moment all thats in there is one alert statement. You posted to another message of mine (practically the same question) and the code was slightly different but that doesn't seem to work either.

- Brett

No Problem.

The FAQ is on this thread (http://www.webxpertz.net/forums/showthread.php3?s=&threadid=19203)

The demo is on this link (http://xcrc.ucvhost.com/demo/pollServer.html)

If I can help further, just let me know.

Hi

OK I got the script working and its great, although it doesn't offer any advantage over just document.write("<script>") for me and in fact I think that is NS4 compatible so in that sense it's definately a winner. Anyone know any other method thats NS4+ compatible as well?

- Brett

Hi MrBrett,

There's no problem sending data to the server - you can do this by var i = new Image(); i.src="myscript.php?"+dataofyourchoice

The problem is trying to get data back from the server without having to refresh your page.

I've not seen a alternative workable solution - without using Java applets or flash.

The example I posted does just that.
You can send data to the server using the query string:
script.src = 'serversidescript.asp?Field1=SomeData';
and return data from the server in a form of javascript:

returnedData=new Array(
'<%=getData(1)%>',
'<%=getData(2)%>',
'<%=getData(3)%>',
'<%=getData(4)%>',
'<%=getData(5)%>'
)

updatePage();

where updatePage function resides on a page and updates page elements using returnedData array

you write the info to a cookie, and the javascript reads from the cookie.

That's how it' s done!

How about - use Vladdy's DOM method to call a PHP or ASP script (including query string data) - that script itself generates javascript data (ergo plain text) and prints it out, which is then loaded back into the browser when you appendChild.

Hi

Nah I actually don't need the server bit (or at least server side work), I just thought my need fitted under this topic :) because I need the load javascript dynamically part. Anyway, so it looks like (to be all (roughly) 4+ browser compatible I need to use the document.write method instead of this ... *sigh* :confused: this method is so much nicer).

Thanx for the help anyway :D

- Brett

Sounds reasonable.

But at the risk of straying off topic ... I think the time has finally come you know ... 2003 is going to be the year of not supporting v4 browsers anymore :)

I thought that was 2002, I guess I'm ahead of time :D :D

Haha :p I wish

Unfortunately as only 1 member of my company I can't make that decision :) and as long as we have clients that use older browsers we will no doubt cater for it.

- Brett :cool:

Thanks! Solved a good problem :thumbsup:

Looks like i'd late a bit, but maybe this could be helpfull to someone. This project can also deflate scripts and determine their size and download speed.
http://jear.sourceforge.net
P.S. welcome an Ajax! :D