I'm looking for a way to include the structure of a thymeleaf fragment into a page.
What i mean by that is as follows:
The fragmend defined as follows:
<div class="container" th:fragment="container">
<div class="row">
{the content of the page continues here}
</div>
</div>
The page template:
<div th:replace="fragments/main:: container">
{I can continue here for eq, <div class="col-md-5"></div>}
</div>
I dont't know if this is possible but i'm looking for a way to do this.
Due to layout dialect of Thymeleaf, this can be done by adding
<th:block layout:fragment="content"/> to desired layout and using this as parent element in your view.
Related
I'm trying to create a fragment that represents a card with custom content. I would like to do something like:
<div class="card" th:fragment="myfragment" th:utext="${content}">
</div>
And then use as
<th:block th:replace="myfragment">
<p>Some custom content that would be the value of 'content'</p>
</th:block>
This would make it a lot easier to work with bigger html that would be kinda ugly to write in an attribute. (Basically I'm looking for a similar functionality to Blade's views and slots)
EDIT:
I'm aware of fragment parameterisation but passing long and complex html code in an attribute is pretty ugly and hard to manage.
A more descriptive example would be a card where the card body is not a p but a table for example.
Soo, maybe not the best solution but I managed to get this working based on this Other SO thread and this
Example code
I've created a new dialect so I can say this:
<zms:card header="'ASD Title'">
<div th:text="${first_name}"></div>
asdasd card works asdasd
</zms:card>
And it will render this:
<div class="card shadow mb-4">
<div class="card-header py-3">
<div class="d-inline-block">
<h6 class="m-0 font-weight-bold">ASD Title</h6>
</div>
</div>
<div class="card-body">
<div>Name</div>
asdasd card works
</div>
</div>
Thymeleaf supports parameterized fragments. Here's how you can use it:
Fragment Definition:
_fragments/my_fragments.html:
<th:block th:fragment="myFragment(p1, p2, p3)">
//do sth with p1, p2, p3
</th:block>
Using it:
<th:block th:replace="_fragments/my_fragments :: myFragment(${p1}, ${p2}, ${p3} )">
</th:block>
Ref:
https://ganeshtiwaridotcomdotnp.blogspot.com/2020/09/thymeleaf-pass-parameter-to-fragment.html
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#parameterizable-fragment-signatures
https://github.com/gtiwari333/spring-boot-web-application-seed/blob/master/main-app/src/main/resources/templates/_fragments/_utils.html
So i have FormControl inside Repeating View and i set html for Repeating view as Wicket:container
I am trying to refresh formControl but because i am stripping wicket tags in output
it gives JS error.
i know wicket:container can not be refreshed. but i am not able to refresh control inside it. I tried setting
control.setOutputMarkupPlaceholderTag(true);
control.setOutputMarkupId(true);
And Html is Something like this
<form wicket:id="form">
<wicket:container wicket:id="repeatingContainer">
</wicket:container>
</form>
here is error i am getting
Cannot bind a listener for event "change" on element "id1a3" because the element is not in the DOM
i want to remove repeatingContainer html tag from output so it follows bootstrap form layout.
Update:
This code is inside the RepeaterView
<wicket:panel>
<div wicket:id="componentGroup">
<wicket:child/>
</div>
</wicket:panel>
This code wicket Child
<div wicket:id="labelContainer">
<label wicket:id="label"></label>
</div>
<div wicket:id="controlContainer" class="control-container">
<input wicket:id="input"/>
</div>
ok so i am able to tackle this down.
I updated component Group div to wicket:container and leave the Repeater as div. So now i am able to refresh. and it works alright.
So this is how it will look like
<form wicket:id="form">
<div wicket:id="repeatingContainer">
<wicket:container wicket:id="componentGroup">
<div wicket:id="labelContainer">
<label wicket:id="label"></label>
</div>
<div wicket:id="controlContainer" class="control-container">
<input wicket:id="input"/>
</div>
</wicket:container>
</div>
</form>
How can I display a string that contains HTML tags in Thymeleaf?
So this piece of code:
<div th:each="content : ${cmsContent}">
<div class="panel-body" sec:authorize="hasRole('ROLE_ADMIN')">
<div th:switch="${content.reference}">
<div th:case="'home.admin'">
<p th:text="${content.text}"></p>
</div>
</div>
</div>
//More code....
And at this line of piece of code ${content.text} it literally generates this on the browser:
<p>test</p>
But I want to show this instead on the browser:
test
You can use th:utext (unescaped text) for such scenarios.
Simply change
<p th:text="${content.text}"></p>
to
<p th:utext="${content.text}"></p>
I will suggest to also have a look into documentation here to know all about using Thymeleaf.
I've the below snippet, I need to find the Xpath to click on "Option1"
The Problem here is below two divisions are dynamically displayed based on the browser size or Screen Resolution
<div class="wrap">
<aside id="side-anchor-links">
<ul class="menu">
<li><a class="anchor-active">Option1</a></li>
<li"><a class="">Option2</a></li>
</ul>
</aside>
<main class="content">
<div id="wrapper">
<div id="scroller">
<div id="top-anchor-links" class="scroll-me">
<ul class="menu">
<li><a class="">Option1</a></li>
<li><a class="">Option2</a></li>
</ul>
</div>
</div>
</div>
</main>
</div>
Thanks is Advance.
My Trails:
xpath = //aside[#id="side-anchor-links"]/ul/li[text()="Option1"] //This option will work only when the options are displayed in the side view
xpath = //li[text()="Option1"] //This option will retrieve two occurances
Note: Always class="anchor-active" is associated with option1 in Side View until we click on any option from any division
Try with the below xpath :
//div[#class='wrap']/aside[#id="side-anchor-links"]/ul/li[1]
So, I believe you need to click at one element, and if it is not present - on another.
And if plain //li[text()='Option1'] does not suite you well, try this:
//*[#id='side-anchor-links' or #id='top-anchor-links']//li/a
Better customize your //li/a part, however
I have the following HTML-Code:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<p> Test jquery menu1 </p>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<p> Test jquery menu2 </p>
</div>
</div>
And the following jQuery/Java-Code:
$(".slide-button").on('click', function() {
var panelId = $(this).attr('data-content');
$('#'+panelId).toggle(500);
$(this).find('.panel-icon').text(function(_, txt) {
return txt === "+" ? "-" : "+";
});
});
The toggle itself works perfectly. When I click on the slide-button the content will slide-down. However, after the slide-down animation is finished the content somehow "jumps up" to its final position.
How can I avoid this "jump" and get the content stays where it is after the slide-down animation is finished?
Thanks for any help :-)
I don't know exactly what your circumstances are, and whether you need <p>aragraph tags or not, but if you switch the <p> tags inside your "panels" to <span> tags it seems to fix your issue.
The HTML code I used which fixed the jump looks like this:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<!-- Here is the first change from a paragraph to a span tag -->
<span>Test jquery menu1</span>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<!-- Here is the second change from a paragraph to a span tag -->
<span>Test jquery menu2</span>
</div>
Also, just a friendly tip, Java is not the same as JavaScript. (: Keep that in mind when tagging your questions.