I have added new Javascript library to the “ApplicationResources”:
jquerymobile{
resource url:'css/jquery.mobile-1.3.2.css'
resource url:'js/jquery.mobile/jquery.js'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js'
}
Than I used this library in the main.gsp:
<g:javascript library="jquerymobile"/>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<g:layoutBody/>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
<g:javascript library="application"/>
<r:layoutResources />
</body>
The result HTML was that grails concatenates both js files into one and place the script tag at the end.
.
.
.
<div id="spinner" class="spinner" style="display:none;">Loading…</div>
<script src="/Tiv2/static/bundle-bundle_jquerymobile_defer.js" type="text/javascript" ></script>
<script src="/Tiv2/static/js/application.js" type="text/javascript" ></script>
</body>
</html>
This causes bad behavior in the page. When clicking a link, I can see that the address bar in the browser get changed but page is not refreshing and stay on the current page where the link was clicked.
Only after manually refreshing the page (F5), browser load the linked page.
I tried using regular tags and all worked ok.
How do I prevent Grails from combining js files into one?
Thanks
You would want to use the exclude argument when declaring your resources so the bundle mapper doesn't run.
jquerymobile{
resource url:'css/jquery.mobile-1.3.2.css', exclude: 'bundle'
resource url:'js/jquery.mobile/jquery.js', exclude: 'bundle'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js', exclude: 'bundle'
}
The documentation covers this and is quite good. You should always start there.
Another option is
jquerymobile{
defaultBundle false
resource url:'css/jquery.mobile-1.3.2.css'
resource url:'js/jquery.mobile/jquery.js'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js'
}
This will disable bundling for all resources in this module
Related
I'm trying to debug an experiment written in JS & html. I'm running an html template that imports JS codes. But all I get is a blank page when I run it in chrome. I checked whether my chrome preference allows javascript to be run.
<!doctype html>
<html>
<head>
<title>Name Face Association Task</title>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/jquery-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/underscore-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/backbone-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/d3.v3.min.js"></script>
<!-- jsPsych Plugins -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/jspsych.js"></script>
<script defer src ="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-instructions.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-survey-html-form.js"></script>
<link href="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/css/jspsych.css" rel="stylesheet" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/css"></link>
<!-- additional functions -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/supplementary-functions.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/questionnaire.js"></script>
<!-- psiTurk
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/psiturk.js" type="text/javascript"></script>
<script type="text/javascript">
// These fields provided by the psiTurk Server
var uniqueId = "{{ uniqueId }}"; // a unique string identifying the worker/task
var adServerLoc = "{{ adServerLoc }}"; // the location of your ad (so you can send user back at end of experiment)
var mode = "{{ mode }}"
</script>
-->
<!-- experiment -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/NFA.js"></script>
</head>
<body>
<noscript>
<h1>Warning: Javascript seems to be disabled</h1>
<p>This website requires that Javascript be enabled on your browser.</p>
<p>Instructions for enabling Javascript in your browser can be found
here</p>
</noscript>
</body>
</html>
My psiturk is not able to be downloaded, so I commented out all the code related to psiturk and tried running it in plain html instead.
I guess your server does not have a path like http://example.com/Users/jasonlim/.... :)
You should open your browser's devtools (F12) to see the errors. It would have told you that those files cannot be found.
You need to make those paths relative to the current page (something like static/lib/jquery-min.js or lib/jquery-min.js depending on where your HTML file is located), or when running a local HTTP server you can make them relative to the root of the domain (e.g. /lib/jquery-min.js).
Plus, you have invalid type attributes. The MIME type for JavaScript is text/javascript and not /Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript. Same goes for the style tag, the MIME type should be text/css and not /Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/css.
You can check the documentation about <script> and <style> here. Also, take a look at this tutorial to understand relative and absolute URLs.
But, it appears to me that you are looking at this the wrong way in the first place. According to the psiTurk documentation, you need to use the psiturk tool (for example with the debug command) to test your experiment locally, not by opening the HTML file manually. Your comment says "These values are provided by the psiTurk server" but if you just open the HTML files, there is no such psiTurk server, and you will have variables actually containing {{ uniqueId }} for example, instead of the ID that the server would normally put there...
I follow the instruction, but error report like this
my code:
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src='./pose/images/aa_090.jpg'/>
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose){
console.log(pose);
})
</script>
which is exactly the same as
https://github.com/tensorflow/tfjs-models/tree/master/posenet
Plz do me a favor
I tried the same code snippet and it worked for me without any issue, the cdn also seems to be working when I checked, so the problem could be a few things:
Your image does not exist at the given location
There was some network issue when you attempted this
There is an issue fetching the image locally due to cors : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp
Incase the issue persists try downloading the CDN's and the image and host it by following,
In the directory of your files run: python -m SimpleHTTPServer 8000
Go to localhost:8000/yourfile.html
Revert back in case of any issues
This issue I recently faced, I was trying to import multiple js files in my HTML page like this -
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" />
<script src="lib/js/backbone.js" />
But the issue I was facing is, it was loading only the first js file and the rest of the js file was not getting loaded. I also checked the network section in the browser, the remaining two file was just not getting called. Then I changed the syntax to this -
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="lib/js/backbone.js"></script>
And then the loading of all the 3 files happened successfully. My question is, is
<script src="" />
a wrong syntax or is this issue only specific to me?
Script tag requires both the starting and ending tag. From MDN:
Tag omission: None, both the starting and ending tag are mandatory.
I have this HTML file which use AngularJs javascript file. And I run this application using Tomcat 7
<html>
<head>
<script src="src/main/resources/appjs/angular.min.js"></script> // not working
<script src="/resources/appjs/angular.min.js"></script> // not working
<script src="/src/main/resources/appjs/angular.min.js"></script> // not working
<!-- <script src="angular.min.js"></script> --> // working
</head>
<body>
<h2>Hello World!</h2>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
If I put the JS file in that separate folder it wont work. And If I put it inside the same directory it will work.
What could be the reason for this behavior ?
When giving relative paths with out '/' in the beginning it will start looking for the file relative to the folder where html is present. In you case there is angular.min.js where index.html is located so it works other doesn't.
Your server will be configured to serve files from the "src/main/resources/appjs" directory. If you set the src for your <script> to "angular.min.js" then the server will dish it up fine.. but if you set the src to "src/main/resources/appjs/angular.min.js" then the server is looking for "src/main/resources/appjs/src/main/resources/appjs/angular.min.js", which doesn't exist.
Absolute paths are specified by a URL beginning with a "/", so if you try "/src/main/resources/appjs/angular.min.js" it may work - although security may be an issue and "src" may not be in the root-level directory of your server.
I have an issue with Javascript reloading due to Tiles.
Tiles-definition.xml
<tiles-definitions>
<definition name="template-main" template="/WEB-INF/jsp/home.jsp">
<put-attribute name="header-main-content" value="/WEB-INF/jsp/header_main.jsp"/>
<put-attribute name="header-quote-content" value="/WEB-INF/jsp/header_quote.jsp" />
<put-attribute name="menu-content" value="/WEB-INF/jsp/menu.jsp" />
<put-attribute name="body-content" value="/WEB-INF/jsp/slides.jsp" />
<put-attribute name="footer-content" value="/WEB-INF/jsp/footer.jsp" />
</definition>
<definition name="template-main-login" extends="template-main">
<put-attribute name="header-main-content" value="/WEB-INF/jsp/header_main.jsp" />
</definition>
</tiles-definitions>
home.jsp
<body style="background-color: #5F9EA0">
<head>
<script src="<c:url value="/resources/js/jquery-1.11.1.js" />"></script>
<script src="<c:url value="/resources/js/example.js" />"></script>
bla bla ..
example.js
$(document).ready(function() {
setTimeout(function () {
popUp('show');
}, 1000);
});
I am using Spring-MVC:
When the application is loaded I am returning the view as template-main. So the first template definition is called and the application is opened with a login popup as I am calling the popup on document load.
Problem:
Now when I give the login credentials and submit I am calling template-main-login which in turn is extending the template-main. Now the problem is, the Javascript which I have included in the home.jsp is loading again (may be since I am extending the template-main layout) such that I am getting the popup opened for the second time which I want to stop.
So please let me know how to stop the popup opening again.
i would suggest rather than making home.jsp as your template make a separate jsp only for your template and basetemplate will have generic things like loading external js and css files and keep specific js code in specific jsp
You need to ensure that your JS files have the proper cache control/expires headers (either set a long date or use ETags). If you use ETags, the static files will still query the server implementation to check if the file hash has changed or not. You can avoid that by using expires headers on all your static files so that the browser can cache them and load them from the local computing device as opposed to sending in a HTTP request to your server.