I am using ajax minifier to reduce code requests and HTML overhead, and so far its working fine with CSS file. But when I try to use the minified output of js files my HTML page stops working.
Here are the js files I include in combined output
<script src="/content/template/js/AuswellScript/jquery-1.11.0.min-f1cd7227-4b48-423d-ba00-6a814fc588e3.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/bootstrap.min-54c76ae6-1272-464d-b3b4-e5c8e13cd2ad.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/own-menu-d7c1ca2a-6a7e-4bc3-b7e9-f51e92136f20.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/owl.carousel.min-5ea2a8c2-1a05-4f29-aca3-b71f936aaa25.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.superslides-d8526db0-813c-4372-9699-3c829e696ccc.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/masonry.pkgd.min-8f6e02f7-17a3-442f-a7db-a2f68ec24cb2.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.stellar.min-f9b2d588-2c90-489a-ab22-800f41f7df17.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery-ui-1.10.3.custom-0406d77e-4eed-4e42-b1ef-370e24378d13.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.magnific-popup.min-7e2779cb-0844-4b67-acae-2a1053cb0401.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.isotope.min-0148ab04-7187-43c6-accf-7d7ffd4224fa.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.flexslider-min-ec6844aa-338c-4ce9-a67c-eaff0948809d.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/appointment-a7ff2a91-9cfb-4dc9-95a0-585033435e12.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/Slider-568c53bd-f8a3-440a-b2d4-1969699f1d7b.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.downCount-8ba17b7f-82ca-4b65-a29e-517b3e3d51af.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/counter-08aa3c8c-b65f-4efb-842b-dbbd019a11ce.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/jquery.prettyPhoto-d3012702-c0cc-439a-8b7e-22e0d2211a15.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/main-4310f5f3-278c-463e-bc98-edbbc307fbe9.js" type="text/javascript"></script>
<script src="/content/template/js/AuswellScript/bootbox.min-8eea52d3-baa1-47fd-b4df-5be51462a2e9.js" type="text/javascript"></script>
the generate combined file gets saved as
<script src="http://auswell2.xoxo-it.com/content/template/js/AuswellScript/combined.min.js" type="text/javascript"></script>
but using this file vs. separate file is causing error $ not defined on my page, I deleted and recreated combined out several times to ensure no sequence or incorrect data was making the issue.
here is the c# code
Minifier min = new Minifier();
StringBuilder minified = new StringBuilder();
script.head_files.ForEach(js =>
{
if (!string.IsNullOrWhiteSpace(js))
minified.Append(min.MinifyJavaScript(System.IO.File.ReadAllText(Server.MapPath(js))));
});
if (minified.Length > 0)
{
var minJS = Server.MapPath("~/content/template/js/" + objHeads.head_name + "/combined.min.js");
System.IO.File.WriteAllText(minJS, minified.ToString());
}
I've pasted the code in jsfiddle, clicked on "tidy", then copied the tidied output to babel repl ... seems like that's a lot of places that are missing a ; - probably "between" the input files - is there a way with the minifier to specify you want to add a ; to the beginning (or end) of each input file?
perhaps add minified.Append(";"); after minified.Append(min.MinifyJavaScript(System.IO.File.ReadAllText(Server.MapPath(js))));
i.e.
Minifier min = new Minifier();
StringBuilder minified = new StringBuilder();
script.head_files.ForEach(js => {
if (!string.IsNullOrWhiteSpace(js)) {
minified.Append(min.MinifyJavaScript(System.IO.File.ReadAllText(Server.MapPath(js))));
minified.Append(";"); // add this
}
});
if (minified.Length > 0)
{
var minJS = Server.MapPath("~/content/template/js/" + objHeads.head_name + "/combined.min.js");
System.IO.File.WriteAllText(minJS, minified.ToString());
}
Related
I have been testing with Jasmine 2.0.0 and it works without any problem.
But there's a problem when I append BlanketJS to my code.
I used a specRunner(https://github.com/alex-seville/blanket/blob/master/test/jasmine-requirejs/runner.html) that works with Jasmine 1.3.1. But It does not work when I replace Jasmine 1.3.1 with Jasmine 2.0.0,
Here's original code from BlanketJS repo:
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href="../vendor/jasmine.css">
<script type="text/javascript" src="../vendor/jasmine.js"></script>
<script type="text/javascript" src="../vendor/jasmine-html.js"></script>
<script type="text/javascript" src="../helpers/console_runner.js"></script>
<script type="text/javascript" src="../../node_modules/requirejs/require.js"></script>
<script type="text/javascript" data-cover-only="code/" data-cover-never="['all.tests','code/tests']"
src="../../dist/qunit/blanket.js"> </script>
<script type="text/javascript" src="../../src/adapters/jasmine-blanket.js"></script>
<script type="text/javascript">
if (window.require && typeof (window.require.config) === 'function') {
require.config({
baseUrl: './code'
});
}
</script>
<script type="text/javascript" src="code/all.tests.jasmine.js"></script>
<script type="text/javascript">
(function () {
window.blanketTestJasmineExpected=2;
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
var oldResult = htmlReporter.reportRunnerResults;
jasmineEnv.addReporter(htmlReporter);
/* this is just for our automated tests */
window.jasmine_phantom_reporter = new jasmine.ConsoleReporter;
jasmineEnv.addReporter(jasmine_phantom_reporter);
/* */
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>
and I added Jasmine 2.0.0 files and changed this code like below:
....
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href="../vendor/jasmine.css">
<script type="text/javascript" src="../vendor/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="../vendor/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="../vendor/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript" src="../helpers/console_runner.js"></script>
....
The error messages printed:
Uncaught TypeError: Cannot read property 'env' of undefined jasmine-html.js:38
Uncaught TypeError: Object #<Env> has no method 'currentRunner' jasmine-blanket.js:76
How can I run this specRunner page without problems? Please give me a solution. thanks.
the Blanket adapter uses currentRunner but that doesn't exist in 2.0 anymore.
The Blanket Jasmine adapter needs to be updated as both this and the reporter interface has changed.
Open up your jasmine-blanket.js file and replace the code at the bottom with this:
BlanketReporter.prototype = {
specStarted: function(spec) {
blanket.onTestStart();
},
specDone: function(result) {
var passed = result.status === "passed" ? 1 : 0;
blanket.onTestDone(1,passed);
},
jasmineDone: function() {
blanket.onTestsDone();
},
log: function(str) {
var console = jasmine.getGlobal().console;
if (console && console.log) {
console.log(str);
}
}
};
// export public
jasmine.BlanketReporter = BlanketReporter;
//override existing jasmine execute
var originalJasmineExecute = jasmine.getEnv().execute;
jasmine.getEnv().execute = function(){ console.log("waiting for blanket..."); };
blanket.beforeStartTestRunner({
checkRequirejs:true,
callback:function(){
jasmine.getEnv().addReporter(new jasmine.BlanketReporter());
jasmine.getEnv().execute = originalJasmineExecute;
jasmine.getEnv().execute();
}
});
Then it will should as intended.
ETA - personally I'd switch to Istanbul instead, as Blanket seems to be sparsely updated (if at all) right now. Istanbul has more complete coverage stats (not just lines - branches, etc) and can export to lcov for tools like Code Climate. It works with Jasmine, or any test framework, flawlessly.
So now there is actually an adapter for 2.x version of jasmine. But I still had some trouble configuring it. Eventually I did configure everything right, so that is what I got:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="components/jasmine.css">
<script src="components/jasmine.js"></script>
<script src="components/jasmine-html.js"></script>
<script src="components/boot.js"></script>
<script type="text/javascript" data-cover-only="app/" src="components/blanket.js" data-cover-adapter="components/jasmine-2.x-blanket.js"></script>
<script src="components/blanket_browser.js"></script>
<script src="components/jasmine-2.x-blanket.js"></script>
<!-- sources -->
<script src="components/angular.js"></script>
<script src="components/angular-mocks.js"></script>
<script src="app/custom-forms.js"></script>
<script src="app/route-selector.js"></script>
<!-- tests -->
<script src="tests/custom-forms-tests.js"></script>
<script src="tests/route-selector-tests.js"></script>
</head>
<body>
</body>
</html>
Note: I used bower to retrieve jasmine and blanket, but there is some confusion towards what blanket files I had to reference, so:
"components/blanket.js" -> I got this file from dist/qunit/blanket.js
"components/blanket_browser.js" -> src/blanket_browser.js
"components/jasmine-2.x-blanket.js" -> src/adapters/jasmine-2.x-blanket.js
Note that I also use boot.js that comes with jasmine and it works fine. Hope this information helps someone.
I have the following code:
<script language="javascript" type="text/javascript">
$.fn.dataTableExt.oPagination.input = {
"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
....
},
"fnUpdate": function (oSettings, fnCallbackDraw) {
....
}
};
</script>
and it works, but when I create external file and put this code inside this file (of course without <script></script> ) - it does not work. Why?
just make sure the jQuery is the first script you load
<script type="text/javascript" src="jquery.js"><scrip>
<script type="text/javascript" src="yourScript.js"><script>
I have this basic auto complete JavaScript that works well, but you need to hard code the web page. What I'm trying to do is send the "Autocomplete" variable data to the page using a Perl script
The working JavaScript code looks like this:
var CustomArray = new Array('an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML');
Now the new code is:
var CustomArray=new Array(Autocomplete);
And the Perl script is sending back the data to the browser looking like this:
var Autocomplete = 'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML'
I also tried
var Autocomplete = ['an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML']
But I get: 'an apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfish er','kingpin','SML' All as one string in the auto complete.
I cant seem to get it to work right. Full HTML code is below.
<html>
<head>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script language="javascript" type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<script language="JavaScript1.2" type="text/javascript" src="http://www.ComicInvasion.com/cgi-bin/Autocomplete.pl"></script>
<script>
var CustomArray=new Array(Autocomplete);
</script>
</head>
<body>
<input type='text' style='font-family:verdana;width:300px;font-size:12px' id='ACMP' value=''/>
<script>
var obj = actb(document.getElementById('ACOMP'),CustomArray);
</script>
</body>
</html>
First, it looks like there is a typo. The id of your input element is ACMP whereas you pass 'ACOMP' to getElementById.
Second, you do not provide the source code for your Perl script. It might look like this:
#!/usr/bin/perl
use utf8;
use strict; use warnings;
use CGI();
local $| = 1;
print CGI::header(
-type => 'text/javascript',
-charset => 'utf-8',
);
print <<JS;
var Autocomplete = [
'an apple','alligator','elephant','pear','kingbird',
'kingbolt','kingcraft','kingcup','kingdom','kingfisher',
'kingpin','SML'
];
JS
With the following HTML, autocompletion works:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://www.comicinvasion.com/Code/Java/Autocomplete/Autocomplete.js"></script>
<script type="text/javascript" src="http://www.comicinvasion.com/Code/Java/Autocomplete/Common.js"></script>
<!-- Replace with the URI of your script -->
<script type="text/javascript" src="http://test:8080/cgi-bin/autocomplete.pl"></script>
</head>
<body>
<input type='text'
style='font-family:verdana;width:300px;font-size:12px'
id='ACOMP' value=''>
<script type="text/javascript">
var obj = actb(document.getElementById('ACOMP'), Autocomplete);
</script>
</body>
</html>
Finally, I find it curious that your JavaScript files live in a directory called Java.
Have the perl script return this:
var CustomArray = "an apple, alligator".split(',');
Or, if it has to be this it's okay too:
var CustomArray = "'an apple','alligator'".split(',');
Obviously, I omitted the rest of the items in there but you'd include all of them.
I just switched my App to run on MVC3 and the Razor view engine, and now I'm getting a JavaScript error. The thing is, nothing has changed on the JavaScript side of things... it worked before.
Here's the code
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var json_region = [{"value":365,"label":"Calgary"},{"value":368,"label":"Canmore"},{"value":393,"label":"Edmonton"}]
$(function() {
$('#UserRegion').autocomplete({
source: json_region,
selectFirst: true,
select: function( event, ui ) {
$('#RegionID').val( ui.item.value );
$('#UserRegion').val( ui.item.label );
return false;
}
});
});
</script>
<script type="text/javascript" src="/Extras/urbannow.js/1"></script>
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
And this is erroring
$('#UserRegion').autocomplete({
The console says
SCRIPT438: Object doesn't support this property or method
And I just can't figure this one out.
You're including jQuery twice.
You're calling .autocomplete immediately after including the base jQuery library - which does not include the autocomplete plugin. Fix the order of your script references and make sure the autocomplete plugin is included before you try to use it.
load this BEFORE you custom script call
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
or at very best custom code should be after all your JavaScript files.
so , your code should look like something like this
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Extras/urbannow.js/1"></script>
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript">
var json_region = [{"value":365,"label":"Calgary"},{"value":368,"label":"Canmore"},{"value":393,"label":"Edmonton"}];
$(function() {
$('#UserRegion').autocomplete({
source: json_region,
selectFirst: true,
select: function( event, ui ) {
$('#RegionID').val( ui.item.value );
$('#UserRegion').val( ui.item.label );
return false;
}
});
});
</script>
Duplicate jQuery declaration, check View Source of page
I have a site using javascript popup effect like this:
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script src="greybox/AJS.js" type="text/javascript"></script>
<script src="greybox/AJS_fx.js" type="text/javascript"></script>
<script src="greybox/gb_scripts.js" type="text/javascript"></script>
<link href="greybox/gb_styles.css" type="text/css" rel="stylesheet">
<script language="JAVASCRIPT">
function loadWindow(){
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
}
window.onload = loadWindow;
</script>
But everytime my visitor go to the homepage, my popup always shown. How to do making this popup only display one time?
Please Help me
you can use cookies and jquery
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script>
function loadWindow() {
if ($.cookie('popup_flag') != 'true') {
GB_showCenter('Free Report!', 'http://www.signupformlocation.com/popup/signup.php', 420, 570);
$.cookie('popup_flag', 'true');
}
}
</script>
Personally i would go with JStorage, its a HTML5 jQuery Plug-in the uses the local storage on most popular browsers.
Example:
var loadWindows = function()
{
if(!$.jSotreage.get('welcome_flag'))
{
GB_ShowCentre('Free Support!') // Blah
$.jStorage.set('welcome_flag',true);
}
}
Uses JSON To serialize all data in the local storage:-
jStorage: http://plugins.jquery.com/project/jStorage
Draft: http://dev.w3.org/html5/webstorage/
Without jQuery: Storing Objects in HTML5 localStorage
You can store around 5MB Per domain so this would be benificial and should take over the use of cookies within the javascript environment.