...

View Full Version : load external JS file instead of the loaded one.



nospirit
12-24-2005, 12:50 PM
Dear All
I have searhed all the web about this Question I hope I can find the answer here.

I have loaded external file js into html page :

<table><tr><td id=x>
<script language=JavaScript src = first.js></script>
</table></tr></td>

NOW :
I need to click on a button or a link to load the external second.js instead of the old one first.js
I don't want to use any iframes...
Any idea how to load external js files in <td> tags or any other place in html page.?:rolleyes:

Thanks for all experts
ibanez_101@hotmail.com

vwphillips
12-24-2005, 01:15 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

var JSAdd;
var CSSAdd;

function AddJS(name){
if (getFile(name)==null){ return; }
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added External JavaScript
if (JSAdd){ head.removeChild(JSAdd); }
JSAdd=document.createElement('SCRIPT');
JSAdd.type='text/javascript';
JSAdd.src=name;
head.appendChild(JSAdd);
}

function AddCSS(name){
if (getFile(name)==null){ return; }
head=document.getElementsByTagName('HEAD')[0];
// next line removes the previously added StyleSheet
if (CSSAdd){ head.removeChild(CSSAdd); }
CSSAdd=document.createElement('LINK');
CSSAdd.rel='stylesheet';
CSSAdd.type='text/css';
CSSAdd.href=name;
head.appendChild(CSSAdd);
}

function getFile(filename){
oxmlhttp = null;
try {
oxmlhttp = new XMLHttpRequest();
oxmlhttp.overrideMimeType("text/xml");
}
catch(e){
try { oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e){ return null; }
}
if(!oxmlhttp) return null;
try {
oxmlhttp.open("GET",filename,false);
oxmlhttp.send(null);
}
catch(e){ return null; }
return oxmlhttp.responseText;
}


function Test(){
alert('An External JavaScript\nhas not been Added');
}

/*]]>*/
</script>

</head>

<body>
<input type="button" name="" value="Add JS fred.js" onclick="AddJS('fred.js');" /><br />
<input type="button" name="" value="Add JS tom.js" onclick="AddJS('tom.js');" /><br />
<input type="button" name="" value="Test" onclick="Test();" />
<br />
<br />
<input type="button" name="" value="Add CSS ss1.css" onclick="AddCSS('ss1.css');" /><br />
<input type="button" name="" value="Add CSS ss2.css" onclick="AddCSS('ss2.css');" /><br />
<span class="color" >Some Test Text</span>
</body>

</html>

PhotoJoe47
12-24-2005, 01:40 PM
Hi again vwphillips,

I was looking at this message trying to decide how I could help him. I thought I had a solution and was in the proccess of writting my response when I needed to look at something in his message and scroll down to look. That is when I saw you had just replied. Your solution looked very good, so I just quit.

But now I have a couple of questions about your solution. I didn't know you removed javascript code from a page. But I guess you can, but don't you have to be very, very carefull about doing that? Also what is the purpose of this line of code?

/*<![CDATA[*/

I think the code you posted is pretty neat and I'm adding it to my collection of javascript examples. I also like the fact this looks like a very easy way to change CSS on fly. Has this been posted the "Post a Javascript" sub forum yet. If not I think you should add it.:thumbsup:

vwphillips
12-24-2005, 02:07 PM
/*<![CDATA[*/

is same as

<!--

in some versions of HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Only used post a javascript page once to follow up one of your posts (I'm too shy)

but you can post it if you wish

Pyth007
12-27-2005, 02:14 PM
/*<![CDATA[*/

is same as

<!--

... for all intents and purposes. However the <![CDATA[ ... ]] tags state that anything can be written inside. In XML / XHTML this is extremely important when considering that some symbols in js have different meaning in xml. For example, the double-dash at the beginning of a "normal" comment toggles between allowing the greater-than symbol (>) and using that symbol to end a comment... This is why strict comments (<! ... >) usually add a first double-dash at the beginning (making the comment start <!-- instead of <!), so that '>' can be used without ending the comment; likewise at the end of the comment, a second set of double-dashes are used to tell the parser to end the comment (thus the comment is ended with --> instead of >). However, in js, the double-dash also has meaning: as a decrimenting operator. Thus in js, you could write:

var eight=9;
eight--;
alert(eight); // '8'
Now you can begin to see the problem when using comments in strict SGML mode; the decrementing operator inside the js toggles the comment to prevent the programmer from using '>' as a greater-than symbol (and ends the comment) Thus:

var eight=9;
eight--;
if(eight>8)
// In strict SGML mode, this is no longer a part of the comment, and so will be displayed on screen!
alert(eight);
For this reason, <![CDATA[ is a better way of creating an xhtml comment, so that double-dashes and greater-than symbols can be used as intended... This page (http://www.howtocreate.co.uk/SGMLComments.html) has good test-cases and description of SGML-style comments and poblems associated with them...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum