Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation load external JS file instead of the loaded one.

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    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>

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Location
    Arizona
    Posts
    336
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    /*<![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

  • #5
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 <!), 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:
    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...
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •