Can't load CSS in thymeleaf - html

I use this solutions for including one thymeleaf in another. It is solved my problems, but now css file don't load at all
Thymeleaf: Replace div with other pages on controllers
Here is my controller:
#GetMapping("/allUsers")
public String userList(Model theModel) {
List<User> theUsers = userService.findAll();
theModel.addAttribute("users", theUsers);
return "dashboard :: setFragment(content_fragment='/admin/allUsers')";
}
and part of the html where is link to css file
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script>
$(function () {
var includes = $('[data-include]');
$.each(includes, function () {
var file = '/admin' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
<title>Dashboard</title>
</head>
<body>
<div th:insert="fragments/header :: header"></div>
<div class="row">
<div id="content" th:fragment="setFragment(content_fragment)">
<div th:insert="fragments/dashboard :: aside" class="col-md-2 px-3"></div>
<div th:insert="fragments/users :: users" class="col-md-10 py-3"></div>
</div>
</div>
</body>
...

I am not familiar with this language however you may have to load your css as follows:
<link th:href="#{"/css/style.css}" rel="stylesheet" />
Using the example from: https://www.baeldung.com/spring-thymeleaf-css-js

Related

How to include css file in node express?

I know this question has been asked many times but I cannot seem to see what the issue is with my code. I am trying to create a pdf by using a html file. This works but the css file I include is not getting included. I have read through all the previously asked questions and tried the solutions but my issue is still not resolved.
Here is my code.
html file:
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8" />
<title>Hello world!</title>
<link rel="stylesheet" href="/css/template.css">
</head>
<body>
<div class="document">
<div class="page" size="A4">
<h1>testing this!!</h1>
{{#each tickets}}
<div class="section">
<div>
<div class="ticketNumber" >
No. {{this.ticketNumber}}
</div>
</div>
<div>
<div class="generalStyle">{{this.prizeName}}</div>
<div class="generalStyle">
Name: {{this.customerName}}
</div>
<div class="generalStyle">
Phone: {{this.customerPhone}}
</div>
<div class="generalStyle">
Address: {{this.customerAddress}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</body>
</html>
This is where I am storing my css file
and in app.js
app.use(express.static(path.join(__dirname, 'public')));
and lastly this is where I create my pdf by sending my html file.
var document = {
html: html,
data: {
tickets: tickets,
},
path: "./output.pdf",
};
pdf.create(document, options)
.then(res => {
console.log("created!!", res)
})
.catch(error => {
console.error(error)
});
};
The file gets created but the css is not included. Any solutions?
Use it :=>
app.use('/public', express.static('public'));
Use it to link stylesheet :=>
<link rel="stylesheet" href="/public/css/template.css">
All file are served at "/public/"
Docs are at https://expressjs.com/en/starter/static-files.html
You Used the statement is used to create a static server it need a index.html
which is served as 'http://url/index.html' and 'http://url/css/template.css' which can be accessed by index.html. It use '/' route for serving files
But you are using template engine so it is best practice to specify the path at which you want to serve your static files.

bootstrap css file and jquery js file are not linked in thymeleaf header file

I am a newbie of spring boot. The below image shows the folder location of my bootstrap css file and jquery js file on spring boot thymeleaf template.
And these are my home html scripts
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<div th:fragment="header-css">
<title>Spring Boot Blog</title>
<script th:src="#{/js/jquery-2.1.4.min.js}"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" th:href="#{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="/css/main.css" th:href="#{/css/main.css}" />
</div>
</head>
<body>
<div th:fragment="header">
.....
But css and js scripts are not linked at all.
Any idea, please!
== UPDATED ==
I am evaluating the spring blog example. I think my problem is related to login controller. First this is the login controller codes.
#Controller
public class LoginController {
#GetMapping("/login")
public String login(Principal principal) {
String username = (principal != null ? principal.getName() : "ANONYMOUS");
if(principal != null) {
return "redirect:/home";
}
// ALWAYS PRINTING "ANONYMOUS is WRONG!!!!"
System.out.println(username + " is WRONG!!!!");
return "/login";
}
}
And even more
return "/login"
line brings wrong files. In below login.html file,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="/fragments/header :: header-css"/>
</head>
<body>
<div th:replace="/fragments/header :: header"/>
<div class="container">
<div class="row" style="margin-top:20px">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form th:action="#{/login}" method="post">
<fieldset>
the controller call the following css file and display its contents.
<link rel="stylesheet" type="text/css" href="/css/main.css" th:href="#{/css/main.css}" />

include multiple parts using ngInclude

I am making a WebApp with angularJS and I have something that irritates me.
<!doctype html>
<html>
<head>
<title>webapp</title>
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<div class="container">
<h1>WebApp</h1>
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-include="'blocks/item.html'"></div>
<div ng-include="'blocks/something.html'"></div>
<div ng-include="'blocks/health.html'"></div>
<div ng-include="'blocks/mana.html'"></div>
<div ng-include="'blocks/running.html'"></div>
<div ng-include="'blocks/out.html'"></div>
<div ng-include="'blocks/of.html'"></div>
<div ng-include="'blocks/ideas.html'"></div>
</div>
</div>
</body>
</html>
Every item, i have to write another include. is there a way to include these and any additions in the future with one command?
Firstly, in your controller create the alphabet array (as shown here)
function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
a.push(String.fromCharCode(i));
}
return a;
}
$scope.charArray = genCharArray('a', 'z'); // ["a", ..., "z"]
Then, in your template:
<div ng-controller="home as homeCtrl" ng-cloak class="ng-cloak" class="wrapper">
<div ng-repeat="letter in charArray" ng-include="'blocks/' + letter + '.html'"></div>
</div>
[edit]
If you want to work with any generic list and not specifically the alphabet as in the original post, just use an array and initialize it with whatever.
$scope.charArray = ['lemon', 'tree', 'apple'];
The point here is using ng-repeat to iterate over any number of objects you like, and dynamically create the ng-include elements appropriately.

Change CSS Style Sheet on click with Ionic Framework

I have a basic Ionic App and would like to apply one of three different style sheets based on a User Input.
The page will be pre-loaded with the basic style, then a user can select two other options, so far the original style is loaded and I can console log a change in the variable, but the page is not updated. Here is my code:
HTML INDEX:
<!DOCTYPE html>
<html ng-app="greenwichFitness" ng-controller='SettingsCtrl'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link ng-href="{{style}}" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-controller='SettingsCtrl'>
<ion-nav-view></ion-nav-view>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
</body>
</html>
HTML VIEW:
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Accessibility Views
</div>
<select ng-model='option' ng-change='changeView(option)'>
<option ng-selected='style'>Plain</option>
<option>Larger Text</option>
<option>Inverted Colours</option>
</select>
</label>
</div>
CONTROLLER:
.controller('SettingsCtrl', function($scope, Settings) {
$scope.style = Settings.style;
$scope.changeView = function(newView) {
Settings.changeView(newView);
};
})
SERVICE:
.factory('Settings', function() {
var defaultStyle = 'lib/ionic/css/ionic.css';
var styles = { 'Plain': defaultStyle,
'Larger Text': 'lib/ionic/css/ionic-large.app.css',
'Inverted Colours': 'lib/ionic/css/ionic-invert.app.css' }
var o = { notifications: false, frequency: 'Daily', style: defaultStyle };
o.changeView = function(newView) {
o.style = styles[newView];
};
)}
Any help would be greatly appreciated.
HTML tag has SettingsCtrl as well BODY tag. Remove one of them.
Also the style seems to be changing only on the factory. style in the scope of SettingsCtrl is not changed. So you can make the changeView return style and assign it to the style variable in the scope.
o.changeView = function(newView) {
o.style = styles[newView];
return o.style
};
And then in controller:
$scope.changeView = function(newView) {
$scope.style = Settings.changeView(newView);
};
Not sure if this is what you had in mind but I got it to work with the following code:
Controller:
$scope.settings = Settings;
HTML:
<link ng-href="{{settings.style}}" rel="stylesheet">

What is the <%= %> tag in html?

I have the following code from a html page:
<div class="bd">
<h1><%= user.fullname %></h1>
</div>
What is the <%= %> tag? Is this standard html? I never encountered it before. (user.fullname is a javascript variable)
Here is the full code of the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/styles.css">
<script language="javascript">
// We use this code for handling unexpected errors.
// Using alert, we are sure that the user get notified in a Mobile device.
// We add this code at the begining of the index.html and we use only native javascript functions.
window.onerror = function(msg, url, lineNumber) {
if (typeof(msg) === "string") {
var error = msg + "\n\nFile: " + url + "\nLine: " + lineNumber;
// Ommit cordova and 3rd party libs errors.
if (url.indexOf("cordova.js") == -1 && url.indexOf("externallib") == -1) {
window.alert(error);
}
} else {
var error = msg;
}
// This may help debugging if we use logging apps in iOs or Android.
if(typeof(console) !== "undefined" && typeof(console.log) === "function") {
console.log(error);
}
// Let default error handler run.
return false;
};
</script>
<script src="cordova.js"></script>
<script src="childbrowser.js"></script>
<script src="webintent.js"></script>
<script src="PushNotification.js"></script>
<script src="externallib/jquery.min.js"></script>
<script src="externallib/jquery.touchSwipe.min.js"></script>
<script src="externallib/md5.js"></script>
<script src="externallib/matchMedia.js"></script>
<script src="externallib/matchMedia.addListener.js"></script>
<script src="externallib/underscore.js"></script>
<script src="externallib/backbone.js"></script>
<script src="externallib/backbone-localstorage.js"></script>
<script src="lib/mm.js"></script>
<script src="lib/mm.panels.js"></script>
<script src="lib/mm.util.js"></script>
<script src="lib/mm.lang.js"></script>
<script src="lib/mm.db.js"></script>
<script src="lib/mm.tpl.js"></script>
<script src="lib/mm.cache.js"></script>
<script src="lib/mm.settings.js"></script>
<script src="lib/mm.widgets.js"></script>
<script src="lib/mm.sync.js"></script>
<script src="lib/mm.emulator.js"></script>
<script src="lib/mm.rdebugger.js"></script>
<script src="lib/mm.fs.js"></script>
<script data-main="lib/app.js" src="externallib/require.js"></script>
<script language="javascript">
// We should wait to phonegap, if not, we get errors like:
// http://rickluna.com/wp/2012/04/solving-the-connection-to-the-server-was-unsuccessful-error-in-androidphonegap/
$(document).bind('deviceready', function() {
MM.log('Deviceready fired');
MM.deviceReady = true;
// Store the device locale for further uses.
navigator.globalization.getLocaleName(
function (locale) {
MM.lang.locale = locale.value;
MM.log("Device locale loaded: " + locale.value);
},
function () {}
);
// Disable the back button, exists the app.
document.addEventListener("backbutton", function() {
MM.panels.goBack();
}, false);
// Call deviceIsReady function in plugins.
// Plugins may not be able to listen for the deviceready event because it's possible that it was fire
// when plugins whasn't loaded, we use a timeout of 5 seconds.
setTimeout(function() {
for (var el in MM.plugins) {
var plugin = MM.plugins[el];
if (typeof(plugin.deviceIsReady) == 'function') {
plugin.deviceIsReady();
}
}
}, 5000);
MM.fs.init();
});
// This function is for handling when the app is opened using a custom URL SCHEME.
function handleOpenURL(url) {
MM._appLaunchedByURL(url);
}
</script>
<style id="mobilecssurl"></style>
</head>
<body>
<div id="add-site" style="display: none">
</div>
<div id="manage-accounts" style="display: none">
</div>
<div id="main-wrapper" style="display: none; background-color: white">
<div class="header-wrapper">
<header class="header-main">
<nav class="nav-main">
<ul class="nav">
<li class="nav-item home menu-home">
<a href="#" class="ir" id="mainmenu">
Home
</a>
</li>
</ul>
<span id="page-title"></span>
</nav>
</header>
</div>
<div id="panel-left" class="panel user-menu"></div>
<div id="panel-center" class="panel"></div>
<div id="panel-right" class="panel"></div>
</div>
<div id="app-dialog">
<div>
<div class="modalHeader">
</div>
<div class="modalContent">
</div>
<div class="modalFooter">
</div>
<div class="modalClear"></div>
</div>
</div>
<script type="text/template" id="menu_template">
<header>
<div class="media">
<div class="refresh app-ico">
<a href="#refresh">
<img width="16" height="16" src="img/reload.png" border="0">
</a>
</div>
<div class="img">
<img src="<%= MM.util.getMoodleFilePath(user.profileimageurl) %>" border="0">
</div>
<div class="bd">
<h1><%= user.fullname %></h1>
</div>
</div>
</header>
</body>
</html>
What is the <%= %> tag in html?
There is none. There are several templating engines that use <% and %> to delimit either templates or code blocks, though: Active Server Pages (ASP), JavaServer Pages (JSP), probably others. Those usually do server-side processing and replace the text in the <% ... %> with whatever should go there.
For instance, in your example
<h1><%= user.fullname %></h1>
if the user object's fullname property is "Joe Bloggs" when the resource is requested, the engine will swap that in for that token before sending the text, so what the browser actually sees is
<h1>Joe Bloggs</h1>
In your case, as you point out, the processing is happening client-side. Your <% ... %> tokens are within <script type="text/template">...</script> blocks, so the < isn't at all special. (Before DCoder pointed that out to me, I had a complex explanation here of why it worked...but then, er, DCoder pointed out that they were in script blocks, so...)
DCoder also identified that these are templates being handled by backbone.js, which reuses underscore.js's templates.
What is the <%= %> tag in html?
Like T.J. Crowder said, that is not an HTML tag, it comes from a client-side templating engine that happens to use these expressions to indicate the beginning/end of dynamically interpolated content.
How do I find out what templating engine is used? (it's not ASP or JSP)
Based on the fact that your page loads backbone.js, the template engine is most likely backbone's template engine, which is actually borrowed from underscore.js.
That's either ASP.NET or JavaScript markup that you're seeing.
That's usually a form of server side programming. It could be JSP (in Java), ASP or even PHP (with asp tags enabled). It will replace the contents (at server response time) of the <%= %> with the server side variable's value.
The statement '<%= user.fullname %>' evaluates the property 'user.fullname' and renders it as a string. The 'user' object could exist as a property on the page or could be a static class type.