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/
Related
I am new to MkDocs and I built up a website using MkDocs and I want to add some script into <head>...</head>.
I tried this code at top of my markdown file but it didn't work :
<head>
<script>
...
</script>
</head>
I found the script would show in <body>...</body> rather than in <head>...</head>.
How to place <script> in <head> tag?
You can use material. in your theme (mkdocs.yml), add a reference to custom dir, and in that dir, you can add a file named main.html which will be included in the "head" part
See https://squidfunk.github.io/mkdocs-material/customization/#overriding-partials for more details.
Assuming your are using MkDocs Material as your Theme, inside your mkdocs.yml you can add Entries to the extra_javascript List.
mkdocs.yml:
site_name: "..."
theme: "..."
# ...
extra_javascript:
- https://cdn.someCdn.someLibrary.js # Online Resource
- js/ourJsFile.js # Path relative to "docs" Directory
# Works the same way for CSS!
extra_css:
- css/someCSS.css # Again, relative to the "docs" Directory
For reference: https://squidfunk.github.io/mkdocs-material/customization/#adding-assets
The extrahead placeholder, which should be present in all themes, allows additions to be made to the <head>.
You need to specify a custom_dir in the YAML file and in this directory have a main.html with an extrahead block.
See:
https://www.mkdocs.org/user-guide/customizing-your-theme/#using-the-theme_dir
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://file.js"></script>
</head>
<body>
{{ content }}
</body>
</html>
I'm trying to import header.html for avoiding file duplication. But in this situation, I can't use PHP.
This is the head section of index.html file,
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
The body section I have called my header.html as follows,
<body>
<!-- include Header -->
<div id="header"></div>
<!-- end include header -->
</body>
The header is including fine but after the header included the dropdown lists become unclickable.
When I go to inspect elements there are following errors,
One possible reason for your problem would be that if you already have <html><head><body> tags in all header.html, footer.html and your master page. When you import those sub pages in your master page all those tags will come along with contents. If its true delete those tags from your sub pages because your master page should only have one of specific tags
1) Remove the following tags from header.html and footer.html
<html>
<head>
</head>
<body>
</body>
</html>
2) Regarding Slick error please make sure you are not calling the init twice, best way would be
$('.selector').slick();
$(document).ready(function() {
$.get("header.html", function(response){
$('#header').html(response);
});
})
<?php include_once('header.html');?>
<div id="header"></div>
<?php include_once('footer.html');?>
I am following this example here for the Google Analytics Embed API to implement a GA third party dashboard via Chart.js in my app and I am having trouble on Step 3 where we are including all the javascript libraries.
I was able to load the Embed API in my application.js as so
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
//= require /public/javascript/Chart.min.j
//= require /public/javascript/moment.min.js
//= require /public/javascript/embed-api/date-range-selector.js
//= require /public/javascript/embed-api/active-users.js
It shows in Networks section in the dev tools that the cb=gapi.loaded_0 is getting loaded. However, the other libraries are not. Charts.min.js and moments.min.js are available online but I wan't sure where I can find embed-api/date-range-selector.js or embed-api/active-users.js to retrieve into my app?
EDIT1
Found the files here: https://github.com/googleanalytics/ga-dev-tools
I could be wrong, but I believe the Rails asset pipeline needs to have some sort of //= require_self or something like that to ensure the code in the current file is included. It looks to me like the loading snippet in that file isn't being run or is being run in the wrong order.
It's probably easier and simpler to just save it into a separate file so you can ensure the order is correct.
// File: /public/javascript/embed-api-snippet.js
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
Then put the rest of your code in a setup file like so:
// File: /public/javascript/embed-api-setup.js
gapi.analytics.ready(function() {
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'REPLACE WITH YOUR CLIENT ID',
});
// the rest of the setup code...
});
Now your manifest should look like this:
//= require /public/javascript/embed-api-snippet.js
//= require /public/javascript/Chart.min.js
//= require /public/javascript/moment.min.js
//= require /public/javascript/embed-api/date-range-selector.js
//= require /public/javascript/embed-api/active-users.js
//= require /public/javascript/embed-api-setup.js
Also, you said:
This is talking about the gapi.analytics.auth.authorize section which I believe is part of the embed-api/active-user.js
Actually, the gapi.analytics.auth.authorize part is not in the ActiveUsers component, the auth part is something you have to write yourself (because the client ID needs to be specific to you), and it should go in the embed-api-setup.js file as I've described above.
The setup code for the example you're referencing can be found here.
I did about the same thing in Rails Admin.
First of all I did this Rails Admin Customization: embed html view into dashboard but I think it can be any view you like.
In this .html.erb file I have inserted the GA code from their website:
<!doctype html>
<html>
<head>
<title>Embed API Demos — Pure HTML Dashboards</title>
<link rel="stylesheet" href="../assets/main.css">
<script src="../assets/platform.js"></script>
<link rel="import" href="../assets/ga-auth.html">
<link rel="import" href="../assets/ga-dashboard.html">
<link rel="import" href="../assets/ga-chart.html">
<link rel="import" href="../assets/ga-viewpicker.html">
<link rel="import" href="../assets/ga-datepicker.html">
</head>
<body>
<header class="Banner">
<h1 class="Banner-title">
Embed API Demos
<em>Pure HTML Dashboards</em>
</h1>
<ga-auth clientid="INSERTYOURIDHERE"></gauth>
</header>
<ga-dashboard>
<section id="controls">
<ga-viewpicker></ga-viewpicker>
<ga-datepicker
startDate="30daysAgo"
endDate="14daysAgo">
</ga-datepicker>
</section>
<section id="charts">
<ga-chart
title="Timeline"
type="LINE"
metrics="ga:sessions"
dimensions="ga:date">
</ga-chart>
<ga-chart
title="Sessions (by country)"
type="GEO"
metrics="ga:sessions"
dimensions="ga:country">
</ga-chart>
<ga-chart
title="Top Browsers"
type="COLUMN"
metrics="ga:sessions"
dimensions="ga:browser"
sort="-ga:sessions"
maxResults="5">
</ga-chart>
<ga-chart
title="Top pages"
type="TABLE"
metrics="ga:sessions"
dimensions="ga:pagePath"
sort="-ga:sessions"
maxResults="8">
</ga-chart>
</section>
</ga-dashboard>
<footer class="SourceLink">
<a
href="https://github.com/googleanalytics/embed-api-demos/blob/master/site/6-pure-html-dashboards.html">
View source on Github</a>
→
</footer>
</body>
</html>
Next I added all the GA JS and CSS and HTML to Vendor:
I hope this helps :)
EDIT1: More information about GA Dashboarding is found here: https://ga-dev-tools.appspot.com/embed-api/
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
A content rendered from h:outText with escape="false" is not bound to the css or javascript applicable for that page. Actually I am trying to use syntax highlighters to highlight my syntax within a post. The post is stpored in database and displaying it in a JSF page with h:outputText tag by setting escape attribute as false. It renders the page as expected with all html tags being processed but css or javascript applicable to the code blocks within that post is not applied. Below is my jsf page which retrieves html from database and shows it through h:outputText tag. The retrieved content has syntax it needs to be highlighted.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="/templates/ui.xhtml">
<ui:define name="head">
<title>tekBytes-#{tutorialController.tut.title}</title>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<link href="/rainbow/themes/pastie.css" rel="stylesheet" type="text/css" />
<script src="/rainbow/rainbow.min.js"></script>
<script src="/rainbow/language/generic.js"></script>
<script src="/rainbow/language/java.js"></script>
<script src="/rainbow/language/css.js"></script>
<script type = "text/javascript">
/*
* do some jQuery magic on load
*/
$(document).ready(function() {
function showHiddenParagraphs() {
$("pre.hidden").fadeIn(500);
}
setTimeout(showHiddenParagraphs, 1000);
});
</script>
</ui:define>
<ui:define name="content">
<div style="margin:20px">
<h1>#{tutorialController.tut.title}</h1>
<br/>
<h:outputText value="#{tutorialController.tut.contentStr}" escape="false"/>
</div>
</ui:define>
</ui:composition>
In JSF 2.0, all your web resources files like css, images or
JavaScript, should put in “resources” folder, under the root of your
web application (same folder level with “WEB-INF“).
Put your js / css in resources/js and resources/css folder and access them with <h:outputStylesheet and <h:outputScript
Like this
<h:outputScript name="js/rainbow.min.js" />
and
<h:outputStylesheet name="css/language/css.js" />
and so on...
Also read this : Resources (Library) In JSF 2.0
Potential problem could be in number of places here , verify the following in order.
1) Check your CSS files are getting loaded by the browser
by monitoring the request in developer tools on Firefox or chrome.
https://developers.google.com/chrome-developer-tools/docs/overview?hl=fr
2) check the source of your html to see if that looks
fine and tags are not encoded etc.
3) verify your CSS to see it works and it doesn't have missing semicolon,
brackets,quotes etc by adding it to a test html page on your machine.
I got it resolved. The actual issue was that the html stored in database was generated through the p:editor which has put so many div tags around every line, so when it is rendered through h:outputText tag the css or javascript is not able to parse the code blocks that are applicable for syntax highlighting because of surrounded divs and other tags. So I have removed all of these unnecessary tags before storing it in the database. Thanks, everyone for the replies.