I'm playing around with an Express site with Node.JS
I have a layout file which, let's say, looks like this:
html
title foo
body!= body
From what I have been able to understand, the output of the template is inserted into a variable called body and that's added to the layout there on the 3rd line. However, if I wanted a template to add, for example, a <meta> tag in the <head> element, how would I do that?
I did see the explanation of extending templates and using blocks, but I'm not sure how that ties it to using layouts. The templates themselves shouldn't be extending the layout, right? Or, does template inheritance remove the need for layouts at all? I would suspect not, but I'm not sure.
Also, since I'm here, how do you specify a different layout to be used, or for no layout to be used at all. Currently, the views are being rendered like this:
res.render('templateName', { myTemplateVars : 'foo' });
What you are asking for was released 3 days ago.
http://tjholowaychuk.com/post/10695801204/jade-stylus-0-16-0-released
I have personally been using it for a few weeks and love the recent additions. The block statement allows you to specify default content and any extension template can override a named block.
Basically, blocks override, includes append and extends chooses your parent template.
Try dust template engine.
It is far more interesting and designer friendly.
In dust you can write base.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>kiss.js example</title>
<link rel="stylesheet" href="/css/css1.css" />
<link rel="stylesheet" href="/css/css2.css" />
<script type="text/javascript" src="/js/js1.js"></script>
<script type="text/javascript" src="/js/js2.js"></script>
{+head/}
</head>
<body>
<div style="height: 100%">
<div id="header">
<h1>kiss.js example - {+header}{/header}</h1>
{+header_buttons}{/header_buttons}
</div>
<div id="content">
{+content}{/content}
</div>
<div id="footer">
<table>
<tr>
<td>
</td>
<td style="width: 100%; text-align: center;">made with kiss.js</td>
<td>{+footer_buttons}{/footer_buttons}</td>
</tr>
</table>
</div>
</div>
</body>
and view.html:
{>base.html/}
{<content}
<h2>name: {name}</h2>
<h3>{foo}</h3>
{#numbers}
<div>{.}</div>
{/numbers}
{/content}
Related
I'm creating a spring-boot web application. I'm new to spring-boot as well as AngularJS and have tried integrating this with my application without any success. I have a page of JSON that I want to format as a table in my HTML page ("index.html") but my AngularJS variables are not visible on this page. I formatted some of my HTML code based off this tutorial on YouTube: https://www.youtube.com/watch?v=fUtVRKoBlbQ&list=PLVApX3evDwJ1i1KQYCcyS9hpSy_zOgU0Y&index=6 . I have attached the page of JSON along with my JavaScript code, HTML file, and the result of compiling my program:
JavaScript:
var app = angular.module("User", []);
app.controller("UsersController", function($scope, $http) {
$http.get("http://localhost:7070/user/all")
.success(function(result) {
$scope.tickets = result.tickets
})
});
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<body>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.ticket_id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
JSON:
A screenshot of the tickets (JSON) (
RESULT:
A screenshot of the result when I compile my code
Please note that I highly doubt this is the best solution. It worked for me so I'll post it here. In my HTML file, I moved my starting body tag <body> to line 4, immediately underneath the starting head tag <head th:insert="fragments.html :: headerfiles">. I also removed static as suggested by Ciao Costa in the earlier answer, https://stackoverflow.com/users/4405995/caio-costa . Here is the link on removing the static: (Image does not show using thymeleaf and spring) . Another small change I made was changing the variable {{t.ticket_id}} to {{t.id}} but that's only because the JSON showed it as id
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
RESULT:
Since your screen still displays the {{ }}, we know ng-app hasn't initialized properly. A good first approach would be to have a look at the Console, since failing to initialize ng-app usually results in a error message.
If ng-app had initialized, even if the variable you were trying to access in scope was undefined, you would not see the curly brackets.
When AngularJS initializes correctly and doesn't find the variable you are trying to render in DOM, it just leave its space blank and moves on like nothing happened. It also shows no error message in such cases.
I've done some tests and I believe the problem is in here:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
It looks like th:src is breaking your application because it is unable to find the file and thus generates a module error.
Try using it this way:
<script type="text/javascript" src="/static/app/users.controller.js" th:src=b"#{baseUrl + '/app/users.controller.js'}"></script>
Or:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{~/app/users.controller.js}"></script>
If none of the above work, try removing the static.
Sometimes it happens when you forget to hit ng serve inside your terminal.
I have two html files named homepage.html & dashboard.html at same level under same folder. I only want to fetch a particular div as my main project has a lot of divs.
Here's the code of homepage.html
<html>
<head>
<meta charset="UTF-8">
<title>Homepage</title>
<link rel="stylesheet" href="css/homepage.css">
</head>
<body>
<div class="homepage-side-menu">
<div id="homepage-home">
<label>Home</label>
</div>
<div id="homepage-dashboard">
<label>Dashboard</label>
</div>
</div>
<div id="homepage-main-view"></div>
<script src="js/homepage.js"></script>
</body>
</html>
And here's the code of dashboard.html
<html>
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css">
</head>
<body>
<div class="dashboard-side-menu"></div>
<div id="dashboard-main-view"></div>
<script src="js/dashboard.js"></script>
</body>
</html>
I want to only fetch the content from the div class="homepage-side-menu"> and show it under <div class="dashboard-side-menu"></div> using simple JavaScript.
First you have to refer the file which you want to consume. then you use getElementByClass()
here is how you import the html file into another html
<link href="homepage.html" rel="import" />
or using javascript:
<script>
$(function(){
$("#addContentFromAnotherHTML").load("homepage.html");
});
</script>
and you can view something like this:
<body>
<div id="addContentFromAnotherHTML"></div>
</body>
something like this:
var classData = document.getElementsByClassName('homepage-side-menu');
Since html5 you can use imports
<link rel="import" href="/path/to/imports/stuff.html">
In older browsers the only way is using javascript (XHR, fetch, or Jquery .load
Using jQuery you could add this to dashboard.html :
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$( ".dashboard-side-menu" ).load( "homepage.html .homepage-side-menu" );
</script>
There are several ways in which you can share HTML template across several pages
1. jQuery - AJAX load() Method
$(selector).load(URL,data,callback);
The load() method loads data from URL and puts the returned data into the selected element.
Read more about it here
2. Server side inclueds using some server side programming languages
<?
php include 'header.php';
?>
Read more about it here
3. Using some build tools like gulp or grunt or webpack
https://www.npmjs.com/package/file-include-webpack-plugin
https://www.npmjs.com/package/gulp-file-include
4. Using HTML imports
HTML imports is an exciting technology that promises to change how we build websites. Imports allow you to include HTML documents within other HTML documents.
Read more about it here
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
https://blog.teamtreehouse.com/introduction-html-imports
This one is recomended but not works with older browser
I have a simple jquery mobile page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
<!-- ##################### Raw Part ##################### -->
<div data-role="page">
<div data-role="header">
<h1> Hello World </h1>
</div>
</div>
</div>
</body>
</html>
when I execute that page it renders fine with a black header and title.
The reason why that page loads correctly is because jquery-mobile placed new attributes where needed in fact the innerHTML of MyContainer after the page loads is:
<!-- ##################### Parsed Part ##################### -->
<div data-role="page" data-url="/jqueryMobile/TC_Page/main2.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
Hello World
</h1>
</div>
</div>
In other words the Raw Part turn into the Parsed Part .
I will like to know what jquery.mobile function made the conversion from the Raw Part to the Parsed Part!
The functions $.mobile.changePage(), $.mobile.loadPage() enables me to do that For example I could do:
// place response from SomeUrl inside the div MyContainer and convert it from raw to parsed!
$.mobile.loadPage('SomeUrl', { pageContainer: $('#MyContainer') });
// later then get the child child (note second child) of MyContainer and make that the child of MyContainer
The problem now is:
All those functions: loadPage, ChangePage etc make an ajax call. What if I already have the html that I want to inject ( I have it in webBrowser local storage or in a Cookie)! In other words how can I make this work:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="MyContainer">
</div>
<script>
function SomeFunction(){
var someHTML = localStorate.html1; // html1 = raw part = <div data-role="page"><div data-role="header"><h1> Hello World </h1></div></div>
$("#MyContainer").html(someHTML);
// now here I am stuck!!!!!!!!!!!!!!!
// how can I make the content of MyContainer go from the raw part to the Parsed Part!
// I am looking for something like:
$JqueryMobile.ParseHTML($("#MyContainer"));
}
</script>
</body>
</html>
Solution
jQuery Mobile provides numerous functions for widget restyling but only one of them will restyle whole page.
$('#index').trigger('pagecreate');
Where #index should be an id of your page DIV.
There is also on other function that can be used here, but unlike trigger('pagecreat'); this function will style only DIV wit data-role="content" attribute. To test this, jsFiddle example trigger('pagecreate'); should be replaced with trigger('create');
$('#index').trigger('create');
If possible SCRIPT tag should not be used inside a BODY tag, while it will work it can cause additional problems. If you want to find more about this topic and how jQuery Mobile handles dynamically added content take a look at this ARTICLE which is a part of my personal blog.
Example
Working example: jsFiddle
This part of code should interest you:
$('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
$('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
$('#index').trigger('pagecreate');
This code is used to dynamically append page footer and a radio button to page content.
I'm looking for a way to make a layout similar to the Bing Travel app that comes standard with Windows 8. I'm developing the app using Javscript/CSS in Visual Studio 2012.
Here is a simple mock up:
The part that puzzles me is the first item that's being showed. Somehow, the first item is shown using the maximum vertical space, while all the next items are aligned in a gridlayout ListView..
I already have the gridlayout with the groupheader shown on the right. Is there a best practice for adding the first item? Should I add another parent css-grid with 2 columns (the 1stt with fixed and 2nd auto width) or can I somehow manipulate the listview to keep the layout simple?
Ok I solved it, this is based on the VS 2012 GridLayout template. I did two things.
1) Created a (parent) grid layout with 2 columns with the correct
overflow properties.
2) Disabled the overflow properties generated by the WinJS.UI.ListView control.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>groupedItemsPage</title>
<!-- WinJS references -->
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/groupedItems/groupedItems.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/pages/groupedItems/groupedItems.js"></script>
<style type="text/css">
#scrollContainer
{
height:100%;
display:-ms-grid;
-ms-grid-columns: 480px max-content;
-ms-grid-rows: 1fr;
overflow-x:scroll;
overflow-y:hidden;
-ms-overflow-style:scrollbar;
}
#col1
{
-ms-grid-column:1;
}
#col2
{
-ms-grid-column:2;
-ms-overflow-style:none;
}
</style>
</head>
<body>
<!-- templates -->
<!-- The content that will be loaded and displayed. -->
<div id="scrollContainer">
<div id="col1">
col1
</div>
<div id="col2" class="fragment groupeditemspage ">
<!-- the code from the GridLayout example goes here -->
</div>
</div>
</body>
</html>
If it were me, I would go with adding a column to the element containing the first item and the ListView. You could try and come up with a way to manipulate the ListView, but since you are group data it would be a pain, IMHO. No reason to make things harder than they need to be.
I have the folowing html. It passes the w3 validator, but my javascript alert does not work. Can anyone see any problems or have any suggestions on how to get it to work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Company Name™</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
BODY {
background-image: url(images/bg4.jpg);
background-repeat:no-repeat;
background-position:center top;
background-attachment: fixed;
}
</style>
<script type="text/javascript">
alert("HELLO");
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">
<img src="images/fcflogo.png" width="295" height="100" align="left" alt="logo"/>
</div>
<div class="header1">
100% Financial Protection
<hr/>
</div>
<div class="nav">Home| Flights| Hotels| Villas | CarHire| Attractions| Contact</div>
</div>
<div class="ver1">
<h2>Can't find what your looking for?</h2>
</div>
<div class="enq1">
<h2>Enquiry Form</h2>
</div>
<div class="hor1">
<h2>Our Service</h2>
<a>Company Name are one of the leading independent travel companies specialising in Florida Holidays. We have a wide range of major Charter and Scheduled airlines to choose from as well as over 10,000 Hotel and Villa deals. Our aim is to provide you the customer with a truly fantastic vacation in Florida from start to finish at affordable prices. We are not committed to any airline or Tour operator so are totally committed to finding you the best deal.</a>
</div>
<div class="hor1"><a>FLIGHTS</a></div>
<div class="ver2"><a>HOTELS</a></div>
<div class="ver2"><a>VILLAS</a></div>
<div class="hor1"><a>CAR HIRE</a></div>
<div class="hor1"><a>ATTRACTIONS</a></div>
</div>
<hr/>
<div id="footer"><a>FOOTER</a></div>
</body>
</html>
EDIT - To all below, I do have javascript turned on, I am using debian with firefox, noScript is disabled, but the alert does not appear, even if I move it to the body.
First, take out the trade mark. That extended characters is probably killing the closing </title> tag. I"m pretty sure that's your issue.
Failing that, remove every element above the <script> tag and see if it executes. If it does, restore each element one-by-one. Something above the script tag is preventing it from being parsed.
For me, your code works, the alert appears.
Have you enabled javascript in your browser?
Works fine on FF 3 and IE 8 for me.
Have you disabled JavaScript on your browser by any chance?
The script is never being invoked and that's why it is not alerting anything. Either move that script tag from within head to within body tag of the document. Or enclose it within a function and invoke it from onload attribute of body tag.
You might want to try clearing your cache to make sure that your browser is loading the file with the alert in it instead of an older, cached copy. If that doesn't work, I'd suggest trying it with Firefox/Firebug and checking for errors in the javascript console. If you're loading the file with AJAX, you'll need to move the script tag to the body of the document. Most of the time AJAX libraries will ignore the HEAD element and only include elements within the BODY tag.