PDA

View Full Version : Multiple external JavaScripts question.



Naild
06-26-2005, 09:24 AM
Hello everyone,

I'm having alot of problems figuring out how to link to multiple external JavaScripts within another script. I've been successful with CSS, but the JavaScript has me baffled. The CSS I used is this:


<script type="text/javascript">
<!--
var stylesheet=new Array(); stylesheet[0]='';

stylesheet[1]="URL of default.css";
stylesheet[2]="URL of skin2.css";
stylesheet[3]="URL of skin3.css";

for(i=1;i<stylesheet.length;i++){
if(pb_skinid==i){
document.write('<link rel="stylesheet" type="text/css" href="'+stylesheet[i]+'" />');
break;
}
}
// -->
</script>


What this script does is reference different CSS files for different forum skins (A forum much like this one).

Does anyone have any idea's on how to do this with JavaScript files? I've tried everything I know how, like changing 'stylesheet' in the script to 'script' and even 'script src'. I'm completely STUMPED.


Heeeeeeelp.

jscheuer1
06-26-2005, 09:48 AM
First you need to know the correct way to call an external script:
<script src="somejavascript.js" type="text/javascript"></script>Then you have to have the bright idea that hey, if I put something like that in a document.write statement, the '</script>' part will end the script. Two ways to get around it:
<script type="text/javascript">
document.write('<script type="text/javascript" src="motiongallery.js"><\/script>')
</script>and
<script type="text/javascript">
document.write('<script type="text/javascript" src="motiongallery.js"></sc\
ript>')
</script>

Naild
06-26-2005, 10:07 AM
Thank you very much John I really appreciate it. One last question though. What do I use to declare the variable? Should I put var script?

This is what I currently have that doesn't work:

<script type="text/javascript">
<!--
var script=new Array(); script[0]='';

script[1]='DEFAULT.js';
script[2]='SKIN1.js';

for(i=1;i<script.length;i++){
if(pb_skinid==i){
document.write('<script src='' language='javascript' type='text/javascript' href="'+script[i]+'" />');
break;
}
}
// -->
</script>


The 'stylesheet' part of the script was a no brainer for CSS, but I don't know the variable for a external JavaScript.

Naild
06-26-2005, 10:15 AM
I left the URL's generic on purpose. Just thought I would let you know.


Thanx

jscheuer1
06-26-2005, 10:38 AM
This:



document.write('<script src='' language='javascript' type='text/javascript' href="'+script[i]+'" />');

will not write anything because of the unescaped single quotes.

Go back to my first post and see how to write a proper external script call without the document.write part first. The language attribute is no longer used, it has been deprecated. The attribute 'href' is not part of an external script call. The 'src' attribute is set to the path and filename of the external script.

mwinter
06-26-2005, 02:51 PM
<script type="text/javascript">
<!--Omit the SGML comment (both here and the closing, later). It's unnecessary.


var stylesheet=new Array(); stylesheet[0]='';Why are you trying to force the use of one-based indices? Start the loop from zero and use the same condition. But, that said...


document.write('<link rel="stylesheet" type="text/css" href="'+stylesheet[i]+'" />');Don't do that, unless you really want a script-disabled user agent to render the document with no style sheet whatsoever. See another recent thread (http://www.dynamicdrive.com/forums/showthread.php?t=3459) to see how to do this properly.



[...] </sc\ript>')That would be wrong, though. User agents are allowed to stop at ETAGO (</), or thereabouts. The first approach you suggested (<\/) is the best way.

Mike

jscheuer1
06-26-2005, 07:12 PM
Originally Posted by jscheuer1
[...] </sc\ript>')Once again, I didn't post that! I posted this:
</sc\
ript>')There is a big difference!

Twey
06-26-2005, 07:15 PM
But if the browser stops parsing the script at </, it's still not going to work whether you have the linebreak there or not.

jscheuer1
06-26-2005, 07:19 PM
But if the browser stops parsing the script at </Why would it? Mine (IE6, NS7.2 & FF1.0.4) don't. Maybe Safari does?

Twey
06-26-2005, 07:24 PM
Don't ask me, it's what Mike said.
I agree that I've never come across anything that does it (not that I've investigated heavily).

mwinter
06-26-2005, 07:25 PM
Once again, I didn't post that!I thought the new line was an error on my part.


There is a big difference!Indeed there is. That would be a syntax error as line feeds are forbidden in string literals (they must be escaped as \n). Some browsers might cope with it as an error correction feature, but it is disallowed by ECMAScript grammar.


Why would it?You seem to want to disregard good practice just because something doesn't seem to be necessary. You suggested a good approach, so just accept that the other is bad (for two reasons, now) and drop it.

Mike

Naild
06-26-2005, 07:28 PM
This:



will not write anything because of the unescaped single quotes.

Go back to my first post and see how to write a proper external script call without the document.write part first. The language attribute is no longer used, it has been deprecated. The attribute 'href' is not part of an external script call. The 'src' attribute is set to the path and filename of the external script.

Hi John,

I know how to write a single external script call. That's not the problem. I'm thinking maybe your misunderstanding what I'm attempting to do here. I need to call SEVERAL external JavaScripts inside a single script. The Forum software does not allow plain HTML coding, otherwise it would be a breeze. Here's the URL of the site I'm refering to:

http://finalauthority2.proboards44.com/index.cgi?


The CSS example I gave in the first post works perfectly. When the user selects the second 'skin' option on their profile page (via a drop down menu) the CSS example I gave refers the users browser to the second stylesheet. Hence, the scrollbar colors are different than the default skin. Along with other attributes such as category background, main page background image, and so on. I've created different JavaScripts for different skins as well. Then hosted every single script externaly. Now what I'm looking to do is something like what I did with the CSS, only with JavaScript. Perhaps you or someone else could give a 'template' script that calls more than one external JavaScript? Something like what I have for the CSS in the first post? It would solve ALL my problems. JavaScript and I don't get along too well as you can see. LOL


Thank you for all your help.


Also thank you Mike for your tutorial on CSS.

Naild
06-26-2005, 07:47 PM
Here's the URL to the other 'skin':

http://finalauthority.proboards36.com/index.cgi

That's the forum I'm refering to, and the first URL I gave is just my test site. As you can see both 'skins' look COMPLETELY different. I'm trying to allow my members to choose a different forum look if they want.


Thanx guys!


Here's my third 'skin':

http://naild.proboards38.com/

Which is another test forum.

jscheuer1
06-26-2005, 07:48 PM
I know how to write a single external script call.You could have fooled me. :) If you know how, writing it as part of a script using document.write should be a breeze, just follow the conventions of escaping whichever quote style you use to quote the string, as well as any other character that will get interpreted as other than a string literal unless escaped. As far as the rest of your script, it should work like the stylesheet one.

Naild
06-26-2005, 07:55 PM
You could have fooled me. :)

Like this:

<link rel='stylesheet' href='http://home.ripway.com/2005-2/257654/GlobalHeaderDefaultStylesheet.css
' /><script src='http://home.ripway.com/2005-2/257654/GlobalHeaderDefaultJava.js
' language='javascript' type='text/javascript'>


Those are my Global Header script calls for JavaScript as well as CSS and they work perfectly. :)

jscheuer1
06-26-2005, 08:04 PM
Nalid, I think we cross posted, I was editing mine while you were posting yours. Go back and look at mine again, sorry about that.

Naild
06-26-2005, 08:18 PM
Nalid, I think we cross posted, I was editing mine while you were posting yours. Go back and look at mine again, sorry about that.

No problem John, I'm not the uptight kind. LOL

So this should work?

<script type="text/javascript">
<!--
var script=new Array(); script[0]='';

script[1]='DEFAULT.js';
script[2]='SKIN1.js';

for(i=1;i<script.length;i++){
if(pb_skinid==i){
document.write('<script src=/'/' language='javascript' type='text/javascript' href="'+script[i]+'" />');
break;
}
}
// -->
</script>

Escaping the single quote marks within the script? I'm confused, and very new to JavaScript.

Thank you for not leaving me 'hanging' on this. I'm so frustrated.

Naild
06-26-2005, 08:36 PM
O.K here's my latest attempt. Which also does not work:

<script type="text/javascript">
<!--
var script=new Array(); script[0]='';

script[1]="JavaScript.js";
script[2]="JavaScript.js";

for(i=1;i<script.length;i++){
if(pb_skinid==i){
document.write('<script type="text/javascript" src=/'/'><\/script>);
break;
}
}
// -->
</script>

jscheuer1
06-26-2005, 08:40 PM
Your document.write line should look like this (using what appears to be your external script conventions and choice of quoting style):
document.write('<script src=\'\' language=\'javascript\' type=\'text/javascript\' href="'+script[i]+'" />');I don't think that will work as there is no source given for the external file and href= is irrelevant in this kind of statement. It should really look like this (using the current standard conventions and a more economical quoting style):
document.write('<script src="'+script[i]+'" type="text/javascript"><\/script>');The rest of the script, although slightly more complex than need be, looks like it will work. I reserve the final judgement on workability until after testing.

mwinter
06-26-2005, 08:43 PM
So this should work?Not quite.


<!--Omit.


var script=new Array(); script[0]='';

script[1]='DEFAULT.js';
script[2]='SKIN1.js';
var scripts = [, 'DEFAULT.js', 'SKIN1.js'],
i = scripts.length;

while(--i) {
if(pb_skinid == i) {
document.write('<script src="' + scripts[i&#93; + '" type="text/javascript"><\/script>');
break;
}
}There are few things of note there.

The first is the use of an array literal ( [ ... , ... ] ). These are typically better for array creation and initialisation. Also notice that in this case, it starts with a comma. This is called an elision, and means that array[0] is left undefined. It's the same as:


var scripts = new Array();

scripts[1] = 'DEFAULT.js';
scripts[2] = 'SKIN1.js';Arrays in ECMAScript are really just special objects, which means you can create sparse arrays - ones that skip over elements. Assigning a value to element zero is unnecessary.

The second is the inversion of quotes, which avoids the escaping issue completely. The outer set uses single quotes, and contains double quotes. However, if you had to use escaping (for example, 'She said, "Let's go!"'), then you'd use a backslash ('She said, "Let\'s go!"').

The final one is the use of a closing script tag. Though it is possible to close an empty script element in the manner you've attempted using XHTML, most browsers (IE especially) do not support XHTML. It's also doubtful that you'd be serving any XHTML document as application/xhtml+xml. Trying to use special XHTML syntax like this can lead to problems, so avoid it.


// -->Omit.

Hope that helps,
Mike

jscheuer1
06-26-2005, 08:45 PM
I'm getting out of this thread until the dust settles, too much cross posting for me. :)

Naild
06-26-2005, 08:54 PM
Hey, now where getting somewhere!! That was brilliant John! There seems to be a bug in it though. It's messing up my other JavaScripts for different pages. Here's what I used:

<script type="text/javascript">
<!--
var script=new Array(); script[0]='';

script[1]="http://home.ripway.com/2005-2/257654/Skin1GlobalHeaderJava.js";
script[2]="http://home.ripway.com/2005-2/257654/GlobalHeaderDefaultJava.js";

for(i=1;i<script.length;i++){
if(pb_skinid==i){
document.write('<script src="'+script[i]+'" type="text/javascript">');
break;
}
}
// -->
</script>


Man, this is sooooo close to being right. There has to be one little mistake somewhere.


Thank you. Thank you. Thank you.

Naild
06-26-2005, 09:07 PM
Hey Mike your a GENIUS!!!

This worked PERFECT:

<script type="text/javascript">
var scripts = [, 'http://home.ripway.com/2005-2/257654/Skin1GlobalHeaderJava.js', 'http://home.ripway.com/2005-2/257654/GlobalHeaderDefaultJava.js'],
i = scripts.length;

while(--i) {
if(pb_skinid == i) {
document.write('<script src="' + scripts[i] + '" type="text/javascript"><\/script>');
break;
}
}
</script>


I can't tell you how much I appreciate your time and help. You too John. Now maybe you 2 can settle your differences. LOL

Your obviously both very nice people to be helping others like this. Maybe cutting each other a little slack would be appropriate. (Just an outside observation)


May the Lord Jesus Christ bless you both in all your endeavors. :)

jscheuer1
06-27-2005, 05:41 AM
Now maybe you 2 can settle your differencesAmen, brother! Actually we get along OK, like an old couple that squabbles alot. Or maybe more like the 'Odd Couple'. You're lucky, in a way, to have gotten a bit of both of our perspectives.

mwinter
06-27-2005, 12:54 PM
Actually we get along OK, like an old couple that squabbles alot.:D


You're lucky, in a way, to have gotten a bit of both of our perspectives.That's all it really boils down to; John and I have different philosophies. I'm more theoretical, and John is more practical. Both have their own virtues, and most of the time there's nothing to dispute.

I apologise if our little spat made you uncomfortable. :)

Mike