Using thymeleaf in spring boot project. Got a template with long texts and was wondering if it is possible to interpolate variables without using a tag. For example, instead of:
<div th:if="${someCondition}" th:remove="tag">
Foo bar long text <span th:text="${someVariable}" th:remove="tag"/>,lorem ipsum <span th:text="${anotherVariable}" th:remove="tag"/>
<span th:text="${thirdVariable}" th:remove="tag" />.
</div>
Something similar to this (e.g.: handlebars):
<div th:if="${someCondition}" th:remove="tag">
Foo bar long text {{someVariable}}, lorem ipsum {{anotherVariable}} {{thirdVariable}}.
</div>
The latter I found a lot easier to read and work with.
You can do this with expression inlining.
<div th:if="${someCondition}" th:remove="tag">
Foo bar long text [[${someVariable}]], lorem ipsum [[${anotherVariable}]] [[${thirdVariable}]].
</div>
Related
<p th:with="firstName1='James1'">
<p>Upper</p><p th:text="${firstName1}"></p>
</p>
<p th:with="df='today'">
Today is: <span th:text="${df}">13 February 2011</span>
Could you tell me what is the difference between the two code sections. They seem identical for me. But there is some difference as the results differ.
Alright, I've never encountered this before... but it looks like Thymeleaf is enforcing the rule that Any <p> (or other block-level element) will implicitly close any open <p>. This works, for example:
<div th:with="firstName1='James1'">
<p>Upper</p>
<p th:text="${firstName1}"></p>
</div>
<p th:with="df='today'">
Today is: <span th:text="${df}">13 February 2011</span>
</p>
In your example, the firstName1 variable is out of scope because the parser is treating your HTML like this (so firstName1 is considered null):
<p th:with="firstName1='James1'"></p>
<p>Upper</p>
<p th:text="${firstName1}"></p>
I'm creating a couple of thymeleaf fragments to use in other pages, and I was told they need to be inside a well-formed html page (with HTML, HEAD, BODY tags etc). Is this the case?
The fragments are only going to be used with th:include/th:replace in other places.
A fragment just needs to be a well formed html. You can start with a div
For e.g
<div th:fragment="formField (field, value, size)">
<div>
<label th:for="${#strings.toLowerCase(field)}"> <span
th:text="${field}">Field</span>
</label>
</div>
<div>
<input type="text" th:id="${#strings.toLowerCase(field)}"
th:name="${#strings.toLowerCase(field)}" th:value="${value}"
th:size="${size}">
</div>
Which you then include somewhere else
<body>
<header th:insert="fragments/general.html :: header"> </header>
<div th:replace="fragments/forms.html
:: formField(field='Name', value='John Doe',size='40')">
</div>
<div th:replace="fragments/general.html :: footer"></div>
I took these examples from here: https://www.baeldung.com/spring-thymeleaf-fragments
Is it possible to pass a fragment to a message expression in Thymeleaf? I want to re-use fragments for creating links in messages.
My fragment looks something like this:
<div th:fragment="link(url, text)" th:remove="tag">
<a th:href="#{${url}}"><span>${text}</span></a>
</div>
and I have a message like that:
home.welcome=Hello User! See new content at {0}.
Now I want to pass the evaluated fragment to the message expression (pseudo-code):
<p th:utext="#{home.welcome(${link:: link(url='myUrl', text='myText')})}"></p>
The resulting HTML should look like this:
<p>
Hello User! See new content at <span>myText</span>.
</p>
I discovered Fragment expressions introduced in Thymeleaf 3 but I'm not sure if they are the way to go.
You can try th:with.
Call fragments like so
<div th:include="fragments/common :: link" th:with="url='www.google.com', text='Click Me'"></div>
This is your fragment
<div th:fragment="link" th:remove="tag">
<a th:href="#{${url}}"><span th:inline="text">[[${text}]]</span></a>
</div>
This is the HTML you will get
<div>
<a href="www.google.com">
<span>Click Me</span>
</a>
</div>
I have an jqm page with an header and an div block who will be always visible. After this block I have added a listview in an new div and enabled iscroll via data-iscroll="".
If it has to scroll, the iscroll-div gets an to high height value. Some Content is not Visible and Scrollable (see Screenshot the Red Circle).
My shorted Code is following:
<div data-role="page" id="pageId">
<div data-role="header" data-position="fixed">
{title}
</div>
<div data-role="content">
<div class="details-header">
<img src="{url}" />
{some text}
</div>
<div data-iscroll="">
<ul data-role="listview">
<li>
<h2>Lorem Ipsum</h2>
<p style="white-space:normal">Lorem ipsum dolor sit amet[..]</p>
</li>
<li>
<h2>Lorem Ipsum</h2>
<p style="white-space:normal">Lorem ipsum dolor sit amet[..]</p>
</li>
[...]
</ul></div>
</div>
</div>
It seems that the min-height is calculated by the device-height - header-height. Is there a way to to recalculate the iscroll divs height?
I have found the solution: data-iscroll-fixed="" for containers outside the data-iscroll element do the job.
I am using jquery UI accordion control in one of my apps asp.net apps. The data for the accordion comes from a database, and each database record has an ID, a Title Field and a content field. The title is the heading, and the content is the data that shows up when the draw is opened...
I'd like to be able to call my page like this:
http://www.mywebsite.com/mypage.aspx?ID=123
and have it display all the data (as it does now), but then have the default 'drawer' of the accordion open to the section that corresponds to the ID number passed in on the url...there are about 50 sections on the page.
Any suggestions on how to approach this? My questions is specific to the jquery accordion function, the rest I know. So where would be the best place to 'tag' the drawer with the unique ID's, and then what is the snippet of javascript code (I assume) that I would use 'open' that drawer based on the ID passed in??
Thanks!
This is a slightly modified version the example file you get when downloading a custom JQuery UI build at http://jqueryui.com/download with only "core" and "accordion" selected.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
// can be done somewhere later in the code, after init
$('#accordion').accordion('activate' , "#a2");
});
</script>
</head>
<body>
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3 id="a1">First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3 id="a2">Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3 id="a3">Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>
the selector-argument have to match the element you specified as "header" - in this example it is the H3-Tag, which got the ID. Running this code should open the second pane. Anoher way is, to specify the active pane in the init using the "active" option:
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h3", active :"#a2" });
});
</script>
I asume you have some HTML like this (I put the ID in the A-Tag):
<div id="accordion">
<div>
<a id="a1" href="#">First header</a>
<div>First content</div>
</div>
<div>
<a id="a2" href="#">Second header</a>
<div>Second content</div>
</div>
</div>
and you activate the Accordion like this:
$(function() {
$("#accordion").accordion();
});
The Accordion provides a method to activate a specific pane:
Activate a content part of the
Accordion programmatically. The index
can be a zero-indexed number to match
the position of the header to close or
a Selector matching an element. Pass
-1 to close all (only possible with collapsible:true).
so you can use:
$("#accordion").accordion("activate", "a#a2");
to activate it via script.
You could use
$("#accordion").accordion('activate' , 1);
where 0 would be the first drawer, 1 the second and so on.