I am combining plugin files to reduce the number of HTTP requests. Removed minimization for debugging.
The combined script file is:
test.js:
(function($){
$.fn.extend({
GetNewDiv: function(){
return $('<div>Testing new div</div');
}
});
})(jQuery)
// ;jQuery.noConflict();
(function($){
$.fn.extend({
GetNewSpan: function(){
return $('<span class="test">Testing new div</span>');
}
});
})(jQuery)
HTML that uses this file
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script src="test.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('document ready');
});
</script>
</head>
<body>
test message
</body>
Opening the file in Firefox displays this error in Firebug
function ($) {$.fn.extend({GetNewDiv: function () {return $("<div>Testing new div</div");}});}(jQuery) is not a function
file:///C://js/test.js
Line 10
Adding “jQuery.noConflict(); ” between the 2 plugin helps, but then the error changes to
$ is not a function
Any ideas what is wrong? What is the correct way to combine multiple .js files into one file?
Thanks
Abhi
You just need a semicolon between the files. Each of those … things is a JavaScript expression fragment. Without a semicolon, the parser thinks the expression continues.
Semicolons are sometimes optional in JavaScript, but when they’re not, they’re not.