Call a javascript function on external javascript file

JavaScript
1

Below is a sample HTML code for including a javascript file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
<script src="sample1_js.php" type="text/javascript"></script>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem Ipsum</p>
</body>
</html>

The sample_js.php file contains the following code:

<?php
header('Content-Type: text/javascript');
?>
function include_js( js ) {
    var s = document.createElement('script');
    s.setAttribute('type','text/javascript');
    s.setAttribute('src',js);
    var doc_head = document.getElementsByTagName('head')[0];
    doc_head.appendChild(s);
}

function testFunc () {
include_js('http://myserver/lab/js/jquery/jquery.js');
document.write('<script>jQuery(document).ready(function(){alert("inside jquery document.ready");});</script>');
}
testFunc();

When i browse this test html page on Firefox, the alert message is displayed as on the code above. But on IE, the page shows no such alert message.

I assume this is a problem with the functions on the external js file not being recognised in IE. Am i missing something here?

2

Script files are just that. Script code. No php will be processed from script files so that’s likely to cause browsers problems.

Second, after the jQuery script tag is appended to the head, you then go straight on to run jQuery code, even though the library itself isn’t going to be loaded until the end of he head.

If you’re going to have the jQuery library loaded as an added script tag on the end of the head, I suggest that any jQuery code must come after that library in the head as well.

3

Thank you for the response. I have modified the originally posted code as below.

the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
<script src="sample1.js" type="text/javascript"></script>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem Ipsum</p>
<div id="test"></div>
<script language="javascript">testFunc2();</script>
</body>
</html>

the code on sample1.js file:

function include_js( js ) {
    var s = document.createElement('script');
    s.setAttribute('type','text/javascript');
    s.setAttribute('src',js);
    var doc_head = document.getElementsByTagName('head')[0];
    doc_head.appendChild(s);
}
include_js('http://myserver/lab/js/jquery/jquery.js');
function testFunc2() {
	jQuery('#test').html('here from the inner function testFunc2');
}

Please note that i have called the function testFunc2 at the end of the body tag inside the html code.However, this change also does not bring the desired effect in IE.

Could you please explain if i have done anything wrong here?

4

the funniest part is that not even a simple function defined on the external file is not being executed… time to get back to the basics of Javascript :@

5

Well well well, a slight modification on the js file as shown below and the code seems to be running as expected now.

document.write("<script type='text/javascript' src='http://myserver/js/jquery/jquery.js'><\\/sc" + "ript>");
function testFunc2() {
    jQuery('#test').html('here from the inner function testFunc2');
}
6