Including a dynamic js file in AJAX

[MasterGuy]

Hi all,

I'm currently working on a new project and I'm trying to make the website completely AJAX based. This would require me to use some different JS files with functions, and to speed things up for the clients I'd like to dynamically include the required JS files.

For Example:
- If I click the registration link, AJAX gets register.php for me and displays it in a div.
- If I click the validation link, AJAX gets validate.php for me and displays it in a div.
- If I click the log in link, AJAX gets login.php for me and displays it in a div.

Now what I want it to do, is that register.php somehow contains a link to register.js and loads that with the AJAX call. This will mean that all the JS files are unloaded untill required by the user.

Is this possible somehow, and if yes, could someone please point me into the right direction, or provide me with an example?

The current code I have it attached. Please remind this is a very early WiP!

What I basically want is to include 'js/register.js' with register.php, 'js/validate.js' with validate.js and 'js/login.js' with login.php, but not when the other files are loaded. (Somewhat like moving line 8, 9 and 10 of index.php so that they aren't always loaded, but only when needed)

 

[vacunita]

Unfortunately JS ha no direct way of dynamically including JS files. Either they are loaded when the page loads using script tags or they are not loaded.

The closest you could get would be to create and destroy a <script> element with the contents of the JS file you are including at the time.

function myinclude(filename)
{
var body = document.getElementsByTagName('body').item(0);
script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
body.appendChild(script)
}

The filename would need to be a full web address so js can find the file, your server would need to permit access like that to the files, and you can't try to use the code from the file immediately upon appending the child, as it takes a moment for the JS to become available, so likely a small timeout would have to be put in place.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[MasterGuy]

Hello Vacunita.

Thank you for your reply.
I've added the source to my main js file that is always included, and the function is called, but the included JS doesn't appear to be initialized properly.

Just to be sure: Does the "external" JS file need to have the <script> tags in it?

The variable script is a [object HTMLScriptElement] and gives no error on the appendChild function. For some reason tough it does not execute the alert('test'); in the js file, with or without the <script> tags..

Could you tell me what I'm doing wrong?
Thanks ahead,

MG

 

[BillyRayPreachersSon]

Just to be sure: Does the "external" JS file need to have the <script> tags in it?

No, it should not. Nor should it start with "<!--" or end with "-->" (some people erroneously add those as well).



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign