<div th:if="${user.admin}">
Welcome, Admin
</div>
Above code leaves an empty tag in the document if the user is admin. These empty divs creating alignment problems, how to avoid this?
You can achieve this by using th:block instead of <div> for conditional display.
<th:block th:if="${user.admin}">
Welcome, Admin
</th:block>
courtesy : https://anshulgnit.blogspot.com/2019/10/th-block-tag-in-thymeleaf.html
Related
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>
What is the difference between the two Thymeleaf attributes: th:include and th:replace?
According to documentation if you have this situation:
<div th:include="..."> content here </div>
fragment will be placed inside <div> tag.
However when you use replace:
<div th:replace="..."> content here </div>
then <div> will be replaced by content.
Thymeleaf can include parts of other pages as fragments (whereas JSP
only includes complete pages) using th:include (will include the
contents of the fragment into its host tag) or th:replace (will
actually substitute the host tag by the fragment’s).
Taken from baeldung
There are three basic ways to include content from a fragment:
insert – inserts content inside the tag
replace – replaces the current tag with the tag defining the fragment
include – this is deprecated but it may still appear in a legacy code
Try to understand with this
suppose this the fragment
<div th:fragment="targetFragmentToIncludeInOurPage" id="tagWithFragmentAttribute">
<div id="contentGoesHere"></div>
</div>
we are using this in these div
<div id="tagWithReplaceAttribute" th:replace="fragments/header :: targetFragmentToIncludeInOurPage"></div>
<div id="tagWithInsertAttribute" th:insert="fragments/header :: targetFragmentToIncludeInOurPage"></div>
<div id="tagWithIncludeAttribute" th:include="fragments/header :: targetFragmentToIncludeInOurPage"></div>
So the final output:
<div id="tagWithFragmentAttribute">
<div id="contentGoesHere"></div>
</div>
<div id="tagWithInsertAttribute">
<div id="tagWithFragmentAttribute">
<div id="contentGoesHere"></div>
</div>
</div>
<div id="tagWithIncludeAttribute">
<div id="contentGoesHere"></div>
</div>
Thymeleaf can include parts of other pages as fragments (whereas JSP only includes complete pages) using th:include (will include the contents of the fragment into its host tag) or th:replace (will actually substitute the host tag by the fragment’s). This allows the grouping of fragments into one or several pages.
I have been developing with MVC for a few years and this is a nagging issue I have encountered several times. I do not like any of the ways I have handled this in the past so I thought I would ask here.
Let's say I have a series of nested DIVs on my view:
<div id="outer">
<div id="inner1">
<div id="inner2">
</div>
</div>
</div>
At runtime I want to add another element, a DIV or anchor, inside of the outer div but have it contain the inner DIVs.
<div id="outer">
<div id="newone">
<div id="inner1">
<div id="inner2">
</div>
</div>
</div>
</div>
How would you recommend handling this?
I imagine this would have more to do with JavaScript than with the server-side code. And since ASP.NET MVC comes with jQuery, you may as well make use of the wrap() function. Something like this:
$('#inner1').wrap('<div id="newone"></div>');
In my cshtml file I have a form named 'ApplyMedicalMain' and I want to show a dynamically loaded division when the form is dirty but its not happening even though the form is dirty ...
Below is my code that i got in Firefox Inspect Element:
<form class="form_section ng-dirty ng-valid ng-valid-required" name="ApplyMedicalMain" method="post" action="/MVC/Quote/ApplyMedical">
<div id="Step1_PartialView" class="QuoteStep1">
<script type="text/javascript" src="/Scripts/Renderings/Presales/ApplyMedical.js">
<div name="Conditions" id="conditions_or_symptoms" ng-hide="ApplyMedicalMain.$dirty">
<div class="generic_error_message select">
<div class="error_icn_message"></div>
</div>
As you can see above, I have mentioned ng-hide for the division name='conditions' but it is not getting hidden even though the form has class 'ng-dirty'.And please note that the the division 'conditions' is loaded dynamically from other partial view.
can someone help me ?
You forgot to wrap everything in a 'ng-app' container, here is a working example (I cleaned a bit the code)
<div ng-app>
<form class="form_section ng-dirty ng-valid ng-valid-required" id="ApplyMedicalMain" method="post">
<div ng-hide="ApplyMedicalMain.$dirty">Hidden when dirty</div>
<div ng-show="ApplyMedicalMain.$dirty">Shown when dirty</div>
</form>
</div>
I'm not entirely sure why your example isn't working, but I would suggest you use css to do your hiding/showing rather than using angular's bindings:
form.ng-dirty .hide-on-dirty{
display:none;
}
And then:
<form class="form_section ng-dirty ng-valid ng-valid-required" name="ApplyMedicalMain" method="post" action="/MVC/Quote/ApplyMedical">
<div id="conditions_or_symptoms" class="hide-on-dirty"> ... </div>
</form>
That's a bit more efficient that creating a binding to the form controller's state. But its just a thought. There might be more of a reason why you're wanting to do the binding.
In rails, I'm used to use the yield/content_for to site mesh. (http://guides.rubyonrails.org/layouts_and_rendering.html#using-content_for)
I can't find in Grails documentation a way to do this... Could you help me?
EDIT
Here is the situation:
I have a layout containing this:
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<g:render template="/layouts/header"/>
</div>
<g:render template="/layouts/menu"/>
<div id="container-homepage">
<g:layoutBody/>
<div id="subfooter">
<div id="content">
<div id="left">
<div id="logo_sub_header"></div>
</div>
<div id="right"></div>
</div>
</div>
</div>
</div>
</div>
</body>
And I want to be able to add a html snippet (search tool bar for example) juste above the container-homepage div. A partial could do the trick.. if this search tool bar was always the same. The thing here is that this search bar depends on the page i'm visiting.
I could also just change the position of the container-homepage div to put it directly into the view, and not the layout, but then i'll have to to it in ALL the views, and that's not DRY.
Any ideas?
Regards,
I think you have two solutions:
the g:render tag is the best option if your content block will not change based on a custom page.
Anyway I would take a look ah this link
http://grails.org/Content+Blocks
because g:pageProperty it is the most elegant and flexible solution.
Perhaps the g:render tag is what you're looking for? It allows you to render a template anywhere within your view (including in other templates). You can also pass in a model for the template to use.
Note the section at the bottom of that page on naming conventions -- template view gsp filenames should begin with an underscore (though that underscore is not supplied in the render tag). There's mos def a way to override this, but things work automagically if you put the underscore there.