Load a new .js file with ajax request

[crobinson42]

Is it possible to load a javascript file into the page via ajax?

[djr33]

A .js file or an HTML page? HTML, yes. JS, maybe. Take a look at posts by molendijk:
http://www.dynamicdrive.com/forums/member.php?u=22645

He's figured out how (I think) to use Ajax to bring in an HTML page including the JS in it. You should be able to use that (with a blank HTML page) to make it work.

I'm not sure on the details, but that's somewhere to start.

[crobinson42]

I am experienced with ajax functions and bringing in dynamic content.. I understand that the browser looks an the initial page javascript loaded..but if new javascript functions are brought in somewhere dynamically, the page doesn't recognize the elements (only for functions vars etc.) you can call a previously existing js function from the parent in a dynamically loaded content because the functions are loaded in the page already.

In my case, and i'm sure many others, i'd like to cut down on script loaded into the inital page to not bog it down, and only load the appropriate .js files with the ajax content as needed...

[jscheuer1]

You can create a script tag and give it the source attribute of the script you want to import. Then you can append that tag to the head of the page. Depending upon the browser, the tag will fire an onload event and/or may be tracked via its onreadystatechange function. Once the browser signals that it has loaded or completed, it's functions may be used.

For example -

somescript.js:

function howdy(){
 alert('Hello!');
 }

An on page script to import and use it:

<script type="text/javascript">
 var s = document.createElement('script');
 s.src = 'somescript.js';
 s.onload = function(){
 if(s.loaded){return;}
 s.loaded = true;
 //do something here to use the new script
 howdy();
 };
 s.onreadystatechange = function(){
 if (this.readyState === 'complete' || this.readyState === 'loaded') {
 if(s.loaded){return;}
 s.loaded = true;
 //do something here to use the new script
 howdy();
 }
 };
 document.getElementsByTagName('head')[0].appendChild(s);
 </script>

Of course that's a bit oversimplified, but works. I would favor using a function instead of having everything global. And if you're running the new script against imported content, you would have to wait until both the script and the content have arrived before firing up the script. And you should consider the ramifications of importing the script twice. If they're bad (this will depend upon the script), add code to ensure the script is only added to the page once.

See also:

http://stackoverflow.com/questions/9...avascript-file

Here's a reusable version that checks to see if the script is already on the page by seeing if something in it is there:

function loadScript(script, testObj, testType, callback){
	if(typeof window[testObj] === testType){return;}
	var s = document.createElement('script');
	s.type = 'text/javascript';
	s.src = script;
	s.onload = s.onreadystatechange = function(e){
		if(s.getAttribute('data-loaded')){return;}
		e = e || window.event;
		if (e && e.type === 'load' || this.readyState === 'complete' || this.readyState === 'loaded') {
			s.setAttribute('data-loaded', 'true');
			callback();
		}
	};
	document.getElementsByTagName('head')[0].appendChild(s);
}

// Usage:
loadScript('somescript.js', 'howdy', 'function', function(){howdy();});

If you have an AJAX call and you want the script run on import of the content, you can run the above function after the content has been assigned to an element on the page.

And if the imported script does something on its own, it will do that on import. But not if that something is done onload of the page. The onload event of the page has passed.

If you're using jQuery, the link I gave you shows a way to do this much more simply using jQuery. That could be combined with a jQuery.ajax call's success function. And if the script you're importing is jQuery based and does its magic using the document ready function, it probably will just run.

In any of these cases, you need to consider the pluses and minuses of importing a script more than once.

In my experience, having the script already on the page is better, and doesn't take up that much bandwidth. In fact, the larger the script, the longer it will take to load when imported. Having it on the page already is like a preload.

Regardless of what you do, imported content isn't necessarily automatically initialized to a script. That depends upon the code of the script - how, what, and if any initialization of content it does.

[crobinson42]

John, Thanks for your input! This is exactly what i'm looking for to resolve my issue! I'm not using jquery though.

Thanks again!

[crobinson42]

// you need to put an escape character before the closing </script> tag, like this: <\/script>

<script language="javascript">  

document.write("<script src='other.js'><\/script>");  

</script>