aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes how to include several .js files Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "how to include several .js files" Watch "how to include several .js files" New topic
Author

how to include several .js files

Karen Nelson
Ranch Hand

Joined: Aug 19, 2005
Posts: 57
Hi again,
I have 4 external js files, and I'll probably eventually have more. I would like to list the external files in one metafile, then include that metafile on each page of my website. Is that possible? If I write a .js file with a bunch of <script src="whatever.js"> statements, I just get an error message.

If I could also put the css files in this metafile, that would be fantastic...
-Karen.
[ August 16, 2006: Message edited by: Karen Nelson ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61769
    
  67

Sorry, not with pure HTML.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Roy Ivar Moe
Greenhorn

Joined: Jun 22, 2006
Posts: 21
Hi,

I guess you could include one .js file, and then dynamically insert the rest of the script tags from this file using the DOM.

Regards,
Roy
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61769
    
  67

Originally posted by Roy Ivar Moe:

I guess you could include one .js file, and then dynamically insert the rest of the script tags from this file using the DOM.


Yes, this is a technique that some 3rd party libraries (Scriptaculous comes to mind) use.

It's a bit tricky as there are some cross-browser issues, so if using a server-side language (like JSP) I'd recommend using a custom action for something like this.

If not, then dynamic inclusion using just JavaScript is a possibility, if a bit trickier.
[ August 16, 2006: Message edited by: Bear Bibeault ]
Karen Nelson
Ranch Hand

Joined: Aug 19, 2005
Posts: 57
The tricky part is getting over my head again. I tried calling this function from window.onload



but the code in knGraph.js is not accessible. I'm guessing this is because the page has already loaded so the js file never gets read. But I can't add any nodes with DOM scripting until after the page has loaded, right? So how do I do this?

Thank you again!
Roy Ivar Moe
Greenhorn

Joined: Jun 22, 2006
Posts: 21
It sounds like some kind of timing issue.

Are you sure that your external js files have finished loading when you try to access them? Sounds like you need some kind of callback to tell you that the dynamically inserted scripts are loaded.

One way, I guess, would be to set a flag in the main js file, to indicate that the dynamically inserted file has loaded. Then in the main js file you could have a periodical timer that checks the flags before your js logic is kicked off.


By loading js files this way, you might get a problem with users being able to interact with your page (after onload), without your js logic being completely loaded, or not?

I've never tried dynamically inserting scripts this way (only with JSON), so I don't know exactly how they do it. Maybe you can look into the scriptaculous library, or Dojo, and see how they achieve it.


Regards,
Roy
[ August 17, 2006: Message edited by: Roy Ivar Moe ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Add an alert statement into your js file and see if it appears. Good way to debug that.

Before you call any of the functions in the js folder you may want to do something like:



Eric
Rusty Smythe
Ranch Hand

Joined: Aug 09, 2006
Posts: 93

Originally posted by Karen Nelson:
I would like to list the external files in one metafile, then include that metafile on each page of my website.


Can you tell us why you want to do this?

If it is for managability (i.e., updating many pages at once with a new js), then there are easy ways to accomplish this without resorting to some js hack that may or may not work on every browser.

XSLT
Create template(s) in XSLT, page content in XML. When you need to add more js files, just update the XSLT file(s) and re-merge

PERL/SED/AWK
Run a script to add a new js include to all your pages.

KISS
Whenever you need to add new functionality, extend the existing js files instead of creating new ones. You can organize your JS functions into logical units and then place them in appropriate JS files.

For example:
- formFunctions.js
- ajaxFunctions.js
- layoutFunctions.js
- verificationFunctions.js
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: how to include several .js files