How to load an external Javascript file during an "onclick" event?

javascript jquery html jsp dojo
Abu picture Abu · Oct 3, 2013 · Viewed 44.4k times · Source

I have 2 divs in my HTML.

<div id="div1"></div>
<div id="div2"></div>

On clicking the "div2" I want to load an external javascript file say for example "https://abcapis.com/sample.js".

I tried including the JS file on onclick event like below,

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://abcapis.com/sample.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

This included the script tag in the head section but did not load since the script tag will be loaded on page load only(correct me here if i'm wrong).

Is there any other way that I could proceed.

Thanks in Advance.

Answer

tremor picture tremor · Oct 3, 2013

Using jQuery's $.getScript() function should do the job for you.

http://api.jquery.com/jQuery.getScript/

Here is a slice of sample code:

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

If you are not using jQuery, you're going to have to learn how to use AJAX to dynamically load new script into your page.

Related questions

How to disable submit button once it has been clicked?

I have a submit button at the end of the form. I have added the following condition to the submit button: onClick="this.disabled=true; this.value='Sending…'; this.form.submit();" But when it moves to the next page, …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I know which radio button is selected via jQuery?

I have two radio buttons and want to post the value of the selected one. How can I get the value with jQuery? I can get all of them like this: $("form :radio") How do I know which one is …

Read More