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.?

Thanks for all experts
ibanez_101@hotmail.com

vwphillips · 12-24-2005, 01:15 PM

Code:

<!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.

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

Quote:

Originally Posted by VWPhillips

/*<![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 >). However, in js, the double-dash also has meaning: as a decrimenting operator. Thus in js, you could write:

Code:

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:

Code:

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 has good test-cases and description of SGML-style comments and poblems associated with them...