How to get a JavaScript file after you have loaded the page?

Question

I want to load a AJAX form into my page with it's own validation.js attached to it. How can I do that?

I tried to load every one with its own $.ajax request, then output the HTML on the page successfully, but the validation.js doesn't work on the form.

Can I load a JavaScript file then a HTML file (with ajax) in my existing page, then get the HTML output on the page to respond to this JavaScript functions?

Maybe eval is what you are locking for bad its considered to be dangerous and bad practice. http://www.w3schools.com/jsref/jsref_eval.asp — pethel, Oct 12 '13 at 16:39
possible duplicate of [asynchronous javascript loading/executing](http://stackoverflow.com/questions/4631845/asynchronous-javascript-loading-executing) — Kaarel, Oct 12 '13 at 16:47
that question is about thread synchronization and async load. — Mohit, Oct 12 '13 at 16:58

score 3 · Accepted Answer · edited May 23 '17 at 12:28

3

use the following javascript for adding a javascript file in async mode after the page has loaded.

(function() {
  var d=document,
  h=d.getElementsByTagName('head')[0],
  s=d.createElement('script');
  s.type='text/javascript';
  s.async=true;
  s.src='/js/myfile.js';
  h.appendChild(s);
}());

if you have a number of files to load this way, you can convert this into a function call.

function asyncLoader(scriptName)
{
  var d=document,
  h=d.getElementsByTagName('head')[0],
  s=d.createElement('script');
  s.type='text/javascript';
  s.async=true;
  s.src = scriptName;
  h.appendChild(s);
}

this method does not guarantee/notify when the js file will be loaded. for that you can put some event call in the file which is being loaded.

if you are loading some html from ajax and adding it to a your current html (as innerHtml) you can put the <script> tag inside that html and it will behave same as above code.

see this question and its answers for more details.

EDIT:

following is a JQuery way using $.getScript

$.getScript("path/my_script.js", function(){
  console.log( "Load was performed." );
});  //JQuery can also be used instead of $

doing the same using $.ajax

$.ajax({
  url: "path/my_script.js",
  dataType: "script",
  success: function(){
    console.log( "Load was performed." );
  }
});

edited May 23 '17 at 12:28

Community

1
1

answered Oct 12 '13 at 16:42

Mohit

2,239
19
30

i am a beginner to javaScript. & i don't understand half the code you have written. is there any jQuery way to write it? – Ahmed Badawy Oct 12 '13 at 17:23
@AhmedBadawy I don't consider it a good practice to ask for answer acceptance in general. but seeing you are new here, its normally a good idea to accept an answer if it has solved your issue. – Mohit Oct 12 '13 at 22:59
correct me if i am wrong. now i can load jQuery plugins in response of an event . EX: load a plugin to view a pic in a certain way after the pic has been clicked. i don't have to load plugins in the beginning of my basic site. that will speed things alot... – Ahmed Badawy Oct 12 '13 at 23:55
you can do that. but it wont be advisable all the time. if the plugin is large. instead of putting it async load like this or at the start of file, put it at the bottom of html. just before `
` closing tag
– Mohit Oct 13 '13 at 00:01
i noticed even if it was on the bottom of the page loads before the images load... so i think it's better to load the .js file on it's own request. – Ahmed Badawy Oct 13 '13 at 05:48

How to get a JavaScript file after you have loaded the page?

1 Answers1