How can I reference a remote JS file like Google Maps API url or any remote JS file path into my JSF 2.0 page?
What I understand is that this code
<h:head></h:head>
<h:body>
<h1>JSF 2 outputScript example</h1>
<h:outputScript library="js" name="example.js" />
</h:body>
will be rendered like this
<head></head>
<body>
<h1>JSF 2 outputScript example</h1>
<script type="text/javascript"
src="/JavaServerFaces/faces/javax.faces.resource/example.js?ln=js">
</script>
</body>
How can I reference external JS files if it by default points to src="/JavaServerFaces/faces/javax.faces.resource/?
Just include them the normal html way, e.g.:
<h:head>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places..."
type="text/javascript">
</script>
</h:head>
You can mix html tags and JSF tags in a facelet. Put it in the head section of your page.
Related
I have an html file where I import a JS module from chessboard.js
<html lang="en">
<head>
<link rel="stylesheet" href="./chessboardFiles/css/chessboard-1.0.0.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script id="import" src="./chessboardFiles/js/chessboard-1.0.0.js"></script>
<title></title>
</head>
<body>
<div id="board1" style="width: 400px"></div>
<script>
var board2 = Chessboard("board1", "start");
</script>
</body>
</html>
The only problem is that I want to write what's in the body's <script> tag in a separate JS file then add it to this html document via <script src='...'> however the <script id="import" ...> file that is imported is not exactly a module so I cant just do import * as C from chessboard-1.0.0.js in a new JS file because I get a
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. error in the console.
So is there any way to get the variables available in the HTML document (i.e Chessboard()) available in an external JS file? How could I do this?
You could write to global window variables, or have everything in the window scope. Ex: window.board = Chessboard(...), and you can access that from different files if the script is run later than the definition.
I want to implement this example code from w3schools.com using Django. The code loads a text file into a html file using the jquery load() function. The code looks like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
My question is now, how do I store my text file such that the load function has access to it in my Django project?
Put the 'demo_test.txt' in your static folder and make sure to specify your static url in settings. Let's say your static url is "cdn" pointing to folder "static". In that case you could use $("#div1").load("/cdn/demo_test.txt");
In settings.py:
STATIC_URL = '/cdn/'
STATIC_ROOT = '/path/to/your/static'
With the Grails Resource plugin you can use a gsp layout like this:
<!DOCTYPE html>
<html>
<head>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<g:layoutBody/>
<g:javascript library="jquery" plugin="jquery" />
<r:layoutResources />
</body>
Using the r:layoutResources tag you can specify that resources should be included at the bottom of the page after the JQuery, which is at the bottom of the layout gsp.
Is there a way to do the same with the asset-pipeline plugin? How can I put resources at the bottom of the document event after the JQuery include?
In your layout file, put this:
<html>
<body>
....
<!-- Your layout scripts -->
<asset:javascript src="app.js"/>
<!-- Custom placeholder for page scripts -->
<g:ifPageProperty name="page.footScripts">
<g:pageProperty name="page.footScripts" />
</g:ifPageProperty>
</body>
</html>
And in your page (i.e. index.gsp ), put this
<html>
<body>
...
...
</body>
</html>
<content tag="footScripts">
<asset:javascript src="jqueryui/jquery-ui.min"/>
</content>
This way, you can extend your layouts with content defined in your individual pages.
Grails 3 documentation ( though the same in Grails 2 )
See chapter 8.2.6 Sitemesh Content Blocks
If you want to add multiple scripts on your child scripts, you can do it like
Bottom of your parent.gsp
<g:each in="${pageScript}">
<asset:javascript src="${it.value}.js"/>
</g:each>
Your child.gsp
<g:set var="pageScript" value="['script1, script2']"/>
I just add lines at the bottom of my .gsp or layout files:
<asset:stylesheet src="xxx.css"/>
<asset:javascript src="xxx.js"/>
xxx.js and xxx.css can include a manifest to load more stuff.
You would load JQuery via the manifest(s):
xxx.js:
//= require jquery
//= require select2.min.js
//= require_self
You can solve this with the <g:pageProperty/> tag, no matter what plugins you use (anyway, I tested the solution with asset-pipeline like you).
A tutorial with the solution is here: http://mythinkpond.com/2014/02/02/grails-adding-javascript-bottom-page/
I have a part of html code which is repeating on every of my page and i want to reuse it.
There is already a very nice link:
Include another HTML file in a HTML file
I have used jQuery to load the html file (separate html file which i call template).
If that html file is static everything is working fine.
But if my template file includes the elements which are using class (CSS) which is using java script to load - then it's not being loaded. Even if in original html file i am referencing correct css/java scripts in head section.
Any ideas ?
Thanks,
If you wanna include page1.html into an Div with id insert-into-me . page2.html.
Then using Jquery this will work!
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#insert-into-me").load("page1.html");
});
</script>
</head>
<body>
<div id="insert-into-me"></div>
</body>
</html>
Using JSP:
<%#include file="page2.jsp" %>
or
<jsp:include page="..." />
where you want to include in page1
I am trying to load JavaScript from an external file in an Eclipse web application.
My folder structure is as follows:
nata
....src
........main
............webapp
................scripts
....................jquery.js
....................nata.js
I invoke the web app by: "localhost:8080/nata/login"
I have tried
<script src="${pageContext.request.contextPath}/nata/login/scripts/nata.js"></script>
and
<script src="${pageContext.request.contextPath}/nata/scripts/nata.js"></script>
and
<script src="${pageContext.request.contextPath}/scripts/nata.js"></script>
but all to no avail. The Javascript will not load.
Here is my html:
<html>
<head>
<title>First Page</title>
<script src="scripts/nata.js"></script>
</head>
<body>
<h1>JavaScript Load Test</h1>
<p id="demo">This is a paragraph</p>
<button onclick="displayDate()" type="button">Display Date</button>
</body>
</html>
Here is nata.js:
function displayDate() { document.getElementById("demo").innerHTML=Date(); }
When I put the HTML in a windows file (and use the following line)
<script src="nata.js"></script>
in folder X and put nata.js in the same folder X, the JavaScript works perfectly.
I have tried all of the lines below:
<script src="/scripts/nata.js"></script>
<script src="scripts/nata.js"></script>
<script src="nata/login/nata.js"></script>
<script src="/nata/login/nata.js"></script>
<script src="/nata/nata.js"></script>
<script src="nata/nata.js"></script>
and probably several more combinations.
I get the error message "displayDate() is undefined"
Sometimes I get the error message "Syntax error" on line 1 of nata.js. However, as I mentioned above, when I put the same HTML and the same nata.js side by side in a windows folder and open the HTML file with a browser and click the button, the JavaScript works perfectly. I just can't get it to load the JavaScript inside an Eclipse web app.