I am bining plugin files to reduce the number of HTTP requests. Removed minimization for debugging.
The bined 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 bine multiple .js files into one file?
Thanks Abhi
I am bining plugin files to reduce the number of HTTP requests. Removed minimization for debugging.
The bined 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 bine multiple .js files into one file?
Thanks Abhi
Share Improve this question edited Jan 31, 2011 at 13:58 Pointy 414k62 gold badges595 silver badges629 bronze badges asked Jan 31, 2011 at 13:56 AbhiAbhi 1071 gold badge3 silver badges13 bronze badges 2- 2 when you paste code into questions on Stackoverflow, just paste the code, select it, and then click the "{}" at the top of the edit box. – Pointy Commented Jan 31, 2011 at 13:59
- ah! I was trying to figure that one out. Thanks for the tip. – Abhi Commented Jan 31, 2011 at 15:02
1 Answer
Reset to default 11You 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.