JavaScript to import another JavaScript


Active Topics	New Topics	My Topics	Search	Profile	Inbox	Register	Rules/TOS

Add to hotlist

Mark This Forum Read

Printer Friendly Version

Email this thread to a friend

Featured Web Site Template

Hundreds More at Free Site Templates.com!

Web Site Partners

Sponsored Links

Jet City Software

Whos Here ?

There are 0 guests and 1 members in the forums right now.

tiffanyirene

Reflects user activity within the last 5 minutes

Moderator(s): Prowler, jcokos

Forum Index · Search Engine Forums · Building, Hosting and Maintaining Your Website · Coding & Databases - PHP, ASP, Perl, etc. · JavaScript to import another JavaScript

1 2 Next Page >> Previous Topic Next Topic

Member	Message
Curt Joined: Eons Ago # Posts: 3747	Posted: 2006-Aug-11 20:48 So far I've tried 2 methods, both unsuccessful. FIRST EXAMPLE: HTML page called "index.htm": Code: [copy] <html> <script type="text/JavaScript" src="/js.within.js/js/js.main-part.js"></script> <body> <script type="text/JavaScript"><!-- DoRoutine('001') // --></script> </body> </html> external JS file called "js.main-part.js": Code: [copy] function DoRoutine(GetData) { jsfile = "/js.within.js/js/js." + GetData + ".js" document.write("<scr", "ipt type="text/JavaScript" src="", jsfile, ""></script>") document.write(data1 + data2 + data3) } 2nd external JS file called "js.001.js": Code: [copy] data1 = "first data, " data2 = "second data, " data3 = "end of data." That of course didn't work. Did some research and found another method and tried to get it to work. I swapped out the code in "js.main-part.js" and inserted the following code: Code: [copy] function DoRoutine(GetData) { jsfile = "/js.within.js/js/js." + GetData + ".js" html_doc = document.getElementsByTagName('head').item(0) js = document.createElement('script') js.setAttribute('language', 'javascript') js.setAttribute('type', 'text/javascript') js.setAttribute('src', jsfile) html_doc.appendChild(js) return false; document.write(data1 + data2 + data3) } That didn't work either. How can I accomplish inserting different JavaScript modules on the fly? (Copy Shortcut)

Curt Joined: Eons Ago # Posts: 3747	Posted: 2006-Aug-12 06:13 I figured there were geniuses here that would know about how to do what I want to do. If I'm the JavaScript genius here, you all are in big trouble 'cause I consider myself an average Javascript programmer. There's got to be people here who are far more knowledgeable about javascript than I. (Copy Shortcut)

g1smd Staff Joined: Jul 28, 2002 # Posts: 10465 Website	Posted: 2006-Aug-12 19:06 I have to say that I don't understand the question... (Copy Shortcut)

Curt Joined: Eons Ago # Posts: 3747	Posted: 2006-Aug-14 01:12 "index.htm" references JavaScript "js.main-part.js". "js.main-part.js" needs to import data or another function that would be in the file "js.001.js". I kept the example real simple to avoid confusion in what needs to happen. I want to be able to create JavaScript modules with their specific functions and/or data so that I can avoid the need to create one huge JavaScript external file. It's better to download a page with only the modules containing the functions and data needed rather than downloading an external file that is large. This is especially true when you run a site that utilizes a 100 different functions and each page really only executes 10 or 15 of those functions and/or data at any one given download. To make "js.main-part.js" import other functions from other external files such as "js.001.js" for use with the page would make on the fly operations possible and not need to download one huge external JS file. Does that make sense? I often find that some of my pages include an external JS file, but only utilize 3 of the 20, 30, 40 functions that are in the external JS file. Why download all that code when only 3 functions are being used on any given page. Having the option to dynamically import other functions from other external JS files would be the answer, but alas, I'm having trouble importing other files if the need arises. This would especially be helpful when the JS code is extensive. I'd rather insert a line of code that loads up 10 modules like this: DoRoutine('01,02,03,04,05,06,07,08,09,10') ...than having to insert 10 references on a page like this: Code: [copy] <script type="text/JavaScript" src="/js.within.js/js/js.01.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.02.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.03.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.04.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.05.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.06.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.07.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.08.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.09.js"></script> <script type="text/JavaScript" src="/js.within.js/js/js.10.js"></script> Does that help anyone understand what I'm trying to do? With that said, so far I have been unsuccessful at importing other external JS files and getting the functions or data to execute. (Copy Shortcut)

Prowler Staff Joined: Aug 14, 2000 # Posts: 1832 Website	Posted: 2006-Aug-14 15:01 Importing JS file through another JS file is problematic at times. Why not use conditional statements of PHP to include the required js file as needed ? Equally there is another option. Have you seen the TinyMCE code which allows you to edit online ? It is about 178 k and has about 6000 + lines of code. It is the reason why WordPress Blog takes a bit longer to load when you go into the write mode. Your complete JS code surely won't come to this size and you could still use a large external JS file to run your functions. I know there must be an elegant way to invoke bits of JS code as needed. (Copy Shortcut)

SportsGuy Staff Joined: Aug 30, 2002 # Posts: 3603 Website	Posted: 2006-Aug-14 15:11 Programmers - sheesh... they can't just talk normal like the rest of us... (Copy Shortcut)

Curt Joined: Eons Ago # Posts: 3747	Posted: 2006-Aug-16 05:50 Hello Prowler, that could work, but it would involved php code and/or query strings. I want everything to take place on the client end and not have to rely on the server to do extra work. That's the idea behind JS in the first place, to lessen the workload on the server while at the same time figure out how to make Javascript downloads smaller by dynamically loading JS's as needed. You'd likely acknowledge that getting JS to run in the fashion that I am proposing here would be much more condensed and useful for certain purposes. So far nothing I've done over these several days has yielded anything successful. I was hoping that someone would have seen a successful method of importing Javascripts with another Javascript routine. I've done a fair amount of searching on the net, but the engines either are not turning up the search results I need or the solution doesn't exist. I would at least like to know whether or not the solution even exists or am I to accept that JS just cannot do it dynamically? haha SportsGuy, we have our own language and sometimes I don't understand it either (Copy Shortcut)

Dinkar Staff Joined: Aug 12, 2001 # Posts: 4391 Website	Posted: 2006-Aug-19 20:06 You can do it at client side using either pure js or something else. I saw it on some website. I don't remember where exactly but I know it is possible. Give me some time /days (2 max) and most probably I will tell you how to do it. (Copy Shortcut)

Dinkar Staff Joined: Aug 12, 2001 # Posts: 4391 Website	Posted: 2006-Aug-19 20:29 Read this article. Is it working? (Copy Shortcut)

Curt Joined: Eons Ago # Posts: 3747	Posted: 2006-Aug-21 22:47 Thanks for the pointer. I did find another method that worked though it's more of a workaround than a solution. But despite it being a workaround, it doesn't add much to the process. I'll need to take a look at that page in depth and attempt to figure out what it is trying to say. I'd still like to see about making it work and don't know of that page you reference there will help or not. Thanks anyway. Appreciated (Copy Shortcut)

Dinkar Staff Joined: Aug 12, 2001 # Posts: 4391 Website	Posted: 2006-Aug-21 23:59 Curt, that url is the solution to your problem. Just try the code from the page. It isn't that much difficult. And, don't forget to test it for cross browser compatibility. (Copy Shortcut)

Dinkar Staff Joined: Aug 12, 2001 # Posts: 4391 Website	Posted: 2006-Aug-22 00:23 Ok here is one simple solution: HTML file: Code: [copy] <html> <head> <script id="jsfile1" src="main.js"></script> </head> <body> <script type="text/JavaScript"><!-- DoRoutine('001') // --></script> </body> </html> main.js file Code: [copy] function DoRoutine(routineID) { alert (this.jsfile1.src); this.jsfile1.src = routineID + ".js"; } 001.js file Code: [copy] alert ("This is 001.js file"); Working with IE6. (Copy Shortcut)

Dinkar Staff Joined: Aug 12, 2001 # Posts: 4391 Website	Posted: 2006-Aug-22 01:46 Previous code was working with IE only. The new code are working with IE, FireFox and Opera. HTML File Code: [copy] <html> <head> <script id="jsfile1" src="main.js"></script> <script id="jsfile2"></script> </head> <body> <script type="text/JavaScript"><!-- DoRoutine('001') // --></script> </body> </html> main.js File Code: [copy] function DoRoutine(routineID) { document.getElementById('jsfile2').src = routineID + ".js"; window.onload = function() { mydata = getDATA (); alert (mydata[1]); alert (mydata[2]); alert (mydata[3]); } } 001.js File Code: [copy] function getDATA () { var data = new Array(3); data [1] = "This is DATA 1 "; data [2] = "This is DATA 2 "; data [3] = "This is DATA 3 "; return data; } (Copy Shortcut)

Curt Joined: Eons Ago # Posts: 3747	Posted: 2006-Aug-27 04:59 Well, I got an answer to my original question from Danny Goodman of the JavaScript Bible. Here's what he says: The basic issue is one of timing. Your script is attempting to access variables that have not yet loaded from the server. It's fairly common for script execution to "race ahead" of external processes, such as retrieving a .js file. Because the variables in the external file are necessary to conclude your process, the script fails. The (ugly) workaround is to break out the script statements that rely on the imported data into a separate function, and use a setTimeout to provide enough of a pause for all loading processes to catch up. Here's a quick rewrite of the js.main-part.js file that includes the workaround: Code: [copy] function DoRoutine(GetData) { jsfile = "js." + GetData + ".js" document.write("<scr"+"ipt type="text/javascript" src=""+ jsfile+ ""></"+"script>") writeItOut() } function writeItOut() { if (typeof data1 != "undefined") { document.write(data1 + data2 + data3) document.close() } else { setTimeout("writeItOut()", 100) } } Note that this solution does not have any escape code to get out of the loop if there is a failure to load the file. That would have to be added (say, an exit after five seconds). That was very cool of him to reply back. Thought I'd share that bit of info that I had not thought of. Dinkar I appreciate a whole bunch your input too. Haven't run your particular tests yet, but I'll give them a try to see them work. Thanks a bunch :) . (Copy Shortcut)

Curt Joined: Eons Ago # Posts: 3747	Posted: 2006-Aug-29 17:34 Well, I've come back to this issue and both Dinkar's and Danny Goodman's solution don't work for me. Dinkar, your solution works but only if you want alerts. When you try to write out the variables to a page, the html gets overwritten with the data and any surrounding html and text is removed. I automatically thought that Danny Goodman's solution would have worked, but no dice there either now that I've had time to come back to this. That is disheartening. However, with that said, I have worked out another method, albeit a little dirty, but does work. I just wish Dinkar's and/or Danny's method would have worked as either of them would have been a bit cleaner. Dinkar Here's the code I used for your method that did not work: index.htm Code: [copy] <html> <head> <script type="text/JavaScript" id="jsfile1" src="main.js"></script> <script type="text/JavaScript" id="jsfile2"></script> </head> <body> <p>html text.</p> <script type="text/JavaScript"><!-- DoRoutine('001') // --></script> <p>html text.</p> </body> </html> main.js Code: [copy] function DoRoutine(routineID) { document.getElementById('jsfile2').src = routineID + ".js"; window.onload = function() { mydata = getDATA (); document.write(mydata[1], mydata[2], mydata[3]) } } 001.js Code: [copy] function getDATA () { var data = new Array(3); data [1] = "This is DATA 1, "; data [2] = "This is DATA 2, "; data [3] = "This is DATA 3"; return data; } When it is executed, the javascript overwrites the existing html and all surrounding text and only leaves behind the variable data. That's a bummer. The method I worked out does work, but is a wee bit dirty because all data files will need to reference a function within the data file. If I forget about that reference to that function, it will not work. Here's the code: index.htm: Code: [copy] <html> <head> <script type="text/javascript" src="main.js"></script> </head> <body> <p>surrounding text.</p> <script type="text/javascript">DoRoutine('001')</script> <p>surrounding text.</p> </body> </html> main.js: Code: [copy] function DoRoutine(GetData) { document.write("<script type="text/javascript" src="js.", GetData, ".js"></script>") } function WriteData() { document.write(data1, data2, data3) } js.001.js: Code: [copy] data1 = "data one here, " data2 = "data two here, " data3 = "data three here" WriteData() Notice the WriteData() reference in the data file. (Copy Shortcut)

Dinkar Staff Joined: Aug 12, 2001 # Posts: 4391 Website	Posted: 2006-Aug-29 21:38 OK, I got the solution. It was very simple; yep I know how much simple it was! lol :) We need to use DIV tag and write the variables to it from 2nd file itself. Our main.js will act as an Importer and do importing job only. Here is the solution: index.html Code: [copy] <html> <head> <script id="jsfile1" src="main.js"></script> <script id="jsfile2"></script> </head> <body> <P>Header</P> <div id=DataContainer> <script type="text/JavaScript"><!-- DoRoutine('001'); // --></script> </div> <P>Footer</P> </body> </html> main.js Code: [copy] function DoRoutine(routineID) { document.getElementById('jsfile2').src = routineID + ".js"; } 001.js Code: [copy] function getDATA () { var data = new Array(3); data [1] = "This is DATA 1, "; data [2] = "This is DATA 2, "; data [3] = "This is DATA 3"; document.getElementById("DataContainer").innerHTML = data[1] + data[2] + data[3]; } getDATA (); (Copy Shortcut)

Dinkar Staff Joined: Aug 12, 2001 # Posts: 4391 Website	Posted: 2006-Aug-29 21:52 Same way the previous solution will also work: index.html Code: [copy] <html> <head> <script id="jsfile1" src="main.js"></script> <script id="jsfile2"></script> </head> <body> <p>Header</p> <div id=DataContainer> <script type="text/JavaScript"><!-- DoRoutine('001') // --></script> </div> <p>Footer</p> </body> </html> main.js Code: [copy] function DoRoutine(routineID) { document.getElementById('jsfile2').src = routineID + ".js"; window.onload = function() { mydata = getDATA (); document.getElementById("DataContainer").innerHTML = mydata[1] + mydata[2] + mydata[3]; } } 001.js Code: [copy] function getDATA () { var data = new Array(3); data [1] = "This is DATA 1 "; data [2] = "This is DATA 2 "; data [3] = "This is DATA 3 "; return data; } (Copy Shortcut)

dudibob Joined: Oct 13, 2005 # Posts: 1473	Posted: 2006-Aug-30 09:26 stares blankly (Copy Shortcut)

Curt Joined: Eons Ago # Posts: 3747	Posted: 2006-Aug-31 11:23 Dinkar, I admire your persistance in getting this to work. I will need to get back to this later on after I've had some sleep. Yawn. zzzzzzzzzzzzzzzz These long nights, errr mornings, have got to stop. Dudibob stares blankly. Curt stares sleepy-eyed. Yawn, yawn, ok gotta get some shut-eye. (Copy Shortcut)

Dinkar Staff Joined: Aug 12, 2001 # Posts: 4391 Website	Posted: 2006-Aug-31 14:03 I love to code. Computer programming is my first love (Copy Shortcut)

1 2 Next Page >> Previous Topic Next Topic

Forum Index · Search Engine Forums · Building, Hosting and Maintaining Your Website · Coding & Databases - PHP, ASP, Perl, etc. · JavaScript to import another JavaScript

You are not permitted to post messages in this forum or topic, because of one or more of the following reasons:

You have not yet logged in, or registered properly as a member
You are a member, but no longer have posting rights.
This is a private forum, for which you do not have permissions.

If you are a recent member, it's possible that you simply have not yet confirmed your account. Please check your email for a message entitled 'JimWorld Forums: Confirm Your Account' and follow the instructions contained within.

If you cannot find this message, click here to Re-Send it.

If you are still experiencing problem, please read the Login Assistance Article for some advice on what may be causing your login not to work properly.

Switch to Advanced Editor and ... Create a New Topic or Reply to this Thread

New posts

Forum is locked