Loading javascript dynamically

Question

I have 2 links in my HTML form. When user clicks on the link, I want the related javascript page to load without reloading the whole page

I have used the following code in my HTML page:

<body id="b">
<h1>Page that switch between CSS and JS</h1>
<div class="container" id="content">
  <div class="link" id="li">
    <ul class="menu" id="nav">    
      <li><a id="three" href="#" onclick="switchjs1();">JavaScript 1</a></li>
      <li><a id="four" href="#" onclick="switchjs2();">JavaScript 2</a></li>      
    </ul>
  </div>
  <div class="content" id="con">
    <form action="" method="post" class="f1" id="f1">
        <table class="t">
            <tr>
            <td><label>Label 1</label></td>
            <td><input type="button" id="1" value="Show 1" class="btn1"/></td>
            </tr>
            <tr>
            <td><label>Label 2</label></td>
            <td><input type="button" id="2" value="Show 2" class="btn2"/></td>
            </tr>
            <tr>
            <td><label>Label 3</label></td>
            <td><input type="button" id="3" value="Show 3" class="btn3"/></td>
            </tr>
            <tr>
            <td><label>Label 4</label></td>
            <td><input type="button" id="4" value="Show 4" class="btn4"/></td>
            </tr>
        </table>
    </form>
  </div>
</div>
</body>

And following code for scripting:

<script type="text/javascript">
    var headID = document.getElementsByTagName("head")[0];         
    var jsNode = document.createElement('script');
    jsNode.type = 'text/javascript';
    jsNode.id = 's1';

    headID.appendChild(jsNode);

    function switchjs1()
    {
        var js = document.getElementById("s1");
        js.removeAttribute('src');
        js.setAttribute("src", "js1.js");
    }

    function switchjs2()
    {
        var js = document.getElementById("s1");
        js.removeAttribute('src');
        js.setAttribute("src", "js2.js");
    }
</script>

By the above code I have created a <script> tag and I want to set the value of the src attribute depending on the link clicked by the user. But it only loads the JavaScript file which is related to the link that was clicked by the user in first place. For example, if the user clicks on the link 'javascript 1', it loads the js1.js file but it does not load the js2.js file when the user clicks on 'javascript 2' link.

Please help me because it has become a big problem. Thank you.

Answer 1

To load javascript dynamically use the following code:

function IncludeJavaScript(file) {
if (document.createElement && document.getElementsByTagName) {
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', file);

    head.appendChild(script);
} else {
    alert('unsupported browser');
}
}

you can then insert de javascript at a button click:

IncludeJavaScript("url_to_your_javascript");

However, i'm wondering if all the eventlisteners are set, you'll probably have to work around that. Calling methods within the new javascript function should not be a problem.

Loading javascript dynamically

Question

1 answers

solution1
0 2011-05-31 11:55:27

Loading javascript dynamically

Question

1 answers

solution1 0 2011-05-31 11:55:27

solution1
0 2011-05-31 11:55:27