We help IT Professionals succeed at work.

Loading External JS File onClick not working in Firefox

vladimir_kalashnikov
on
Medium Priority
1,799 Views
Last Modified: 2008-01-16
I have 4 images that when clicked load an external javascript file onto the page.  Here is the code for it:

                 <script language="javascript">
                  function returnObj(name)
                  {
                        var obj = null;
                        
                        if(document.all)
                        {
                              obj = document.all[name];
                        }
                        else if(document.getElementById)
                        {
                              obj = document.getElementById(name);
                        }
                        else if(document.layers)
                        {
                              obj = document.layers[name];
                        }
                        
                        return obj;
                  }

                  function switchText(name)
                  {
                        var js = returnObj('remoteJS');

                        js.src = 'test'+name+'.js';
                  }
            </script>

            <script language='javascript' id='remoteJS'>
            </script>

            <a onclick="javascript:switchText('one');" style='cursor:pointer'>
                  <img src='img1.jpg'>
            </a>
            <a onclick="javascript:switchText('two');" style='cursor:pointer'>
                  <img src='img1.jpg'>
            </a>
            <a onclick="javascript:switchText('three');" style='cursor:pointer'>
                  <img src='img1.jpg'>
            </a>
            <a onclick="javascript:switchText('four');" style='cursor:pointer'>
                  <img src='img1.jpg'>
            </a>

In the external js files I have some alerts just to test if it works:

                 alert('test 1');


So all of this works correctly in IE, but in Firefox it does nothing.  I am wondering what the difference is.  Is this a security issue (loading from an external file)?  This is probably an easy question, but I rarely use javascript and hardly ever from an external file.  Any help would be appreciated.

- vlad
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2004
Commented:
I cannot tell you why this is, as I am no expert at browser specifics, but I would expect it to be because FF only executes <script> tag when it's added, not when its src is changed (although I could be wrong).

Anyhow, a way to solve that, at least for FF is this:

function loadScript(url)
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.language = "javascript";
    s.src = url;
    document.getElementsByTagName("head")[0].appendChild(s);
}

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
That fixed it, thanks.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.