I'm trying to dynamically create a menu using basic logic, something like this.
List item
List item
List item
List item
List item
I made this code
<ul>
<div data-th-each="field, iter : ${fields}" data-th-remove="tag">
<div data-th-if="${field.text} != null" data-th-switch="${field.href}" data-th-remove="tag">
<li data-th-case="null" data-th-utext="${field.text}" >
<li data-th-case="*"><a data-th-href="${field.href}" data-th-utext="${field.text}" ></a>
</div>
<ul data-th-if="${field}" class="sub-menu">
<div data-th-each="prop, propIter : ${field.sub_items.sub_item.properties}" data-th-remove="tag">
<div data-th-if="${prop.text} != null" data-th-switch="${prop.href}" data-th-remove="tag">
<li data-th-case="null" data-th-utext="${prop.text}"></li>
<li data-th-case="*"><a data-th-href="${prop.href}" data-th-utext="${prop.text}"></a></li>
</div>
</div>
</ul>
</li>
</div>
</ul>
But it returns parsing errors, I think it's mostly a Thymeleaf/HTML problem.
It's probably because of the unclosed "li" tags in the switch statement but I'm not sure how to fix it.
Right, it has to be valid html before processing. You can't do any kind of tricks like you have above, even if the output would be valid html.
I think you should be able to restructure your html to look like this:
<ul>
<th:block data-th-each="field, iter : ${fields}" data-th-if="${field.text} != null">
<li>
<span data-th-if="${field.href == null}" data-th-utext="${field.text}" />
<a data-th-unless="${field.href == null}" data-th-href="${field.href}" data-th-utext="${field.text}" />
<ul data-th-if="${field}" class="sub-menu">
<th:block data-th-each="prop, propIter : ${field.sub_items.sub_item.properties}" data-th-if="${prop.text} != null">
<span data-th-if="${prop.href == null}" data-th-utext="${prop.text}" />
<a data-th-unless="${prop.href == null}" data-th-href="${prop.href}" data-th-utext="${prop.text}" />
</th:block>
</ul>
</li>
</th:block>
</ul>
I've never though about using data-th-remove="tag" like you have. But I think you should be using <th:block> instead for cases like this.
Related
I am trying to display custom images for my list of objects. The images are stored in the database as one of the properties on the object and returned to my template in the model.
<ul>
<li th:each="fruit : ${MyPage.fruitList}">
<div class="field" th:onclick="'javascript:doSubmit(\'' + ${fruit.guid} + '\');'">
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
<label th:text="${fruit.name}" class="radio-label"></label>
</div>
</li>
</ul>
With above code, I am able to successfully display the image that is stored as property 'fruit_image' on the fruit object in database.
Now the question I have is, how do I display a default image if the property 'fruit_image' is not present on the fruit? Is there a way i can set a flag or variable inside the 'if'?
Thank you!
No, there isn't a way to change a variable in Thymeleaf like that. That being said, you can use collection projection to check for the existence of that property. For example, this is how I would do a default image:
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
<li th:unless="${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<div>
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
Rather than looping through all the properties, something like this could work for you as well.
<ul th:with="has_image = ${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<li th:if="${has_image}">
<img alt="fruit_image" id="fruitImage" th:src="${fruit.fruitProperties.^[propertyName == 'fruit_image'].propertyValue}" style="width:100px;height:100px;" />
</li>
<li th:unless="${has_image}">
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</li>
</ul>
I'm trying to limit foreach item. here it is my source :
<div class="build-failed">
<h1 class="jenkins-status"><span data-bind="title"></span> FAILED</h1>
<ul class="list-nostyle list-failed">
<li data-foreach-item="failedJobs">
<div class="label" data-bind="item.label"></div>
<div class="value" data-bind="item.value"></div>
</li>
</ul>
</div>
<div class="build-succeeded">
<h1 class="jenkins-status">All <span data-bind="title"></span> builds are successful</h1>
<i class="fa fa-thumbs-o-up"></i>
</div>enter code here
<p class="updated-at" data-bind="updatedAtMessage"></p>
and I want to get only 3 results. I know that I have to add something in "data-foreach-item" but I don't know what is it.
With <iron-list>, your <ul> can be rewritten as
<ul>
<iron-list items="[[failedJobs]]">
<template>
<li>
<div class="label">[[item.label]]</div>
<div class="value">[[item.value]]</div>
</li>
</template>
</iron-list>
</ul>
Try and see if the property, maxPhysicalCount, can get you only three results ;)
I thought I would find an applicable filter in the documentation:
http://batmanjs.org/docs/filters.html
But I couldn't find one! first returns only one item and truncate works for strings only, so neither of those would work.
You can create your own filter:
https://www.softcover.io/read/b5c051f3/batmanjs_mvc_cookbook/html#sec-custom_filter
For example, to limit an array to three items:
Batman.Filters.limit = (array, limit) -> array?.slice(0, limit)
Then, use it in your binding:
<li data-foreach-item="failedJobs | limit 3">...</li>
(Hmm, I hope data-foreach works with filters!)
Anyhow, hope it helps :)
I'm using Thymeleaf in a Spring project, and I need to show a list, as a result of a one of the cases, but I don't know how.
This is the code:
<!--Global validation results-->
<div th:if="${#fields.hasErrors('global')}">
<div class="alert alert-danger" role="alert"
th:each="err : ${#fields.errors('global')}">
<div th:switch="${err}">
<div th:case="error.fromAfterTo" th:text="#{error.fromAfterTo}"></div>
<div th:case="error.overlaps" th:text="#{error.overlaps}">
<ul th:each="interval : ${dateOverlaps}">
<li th:text="${#temporals.format(interval.datefrom, 'dd/MM/yyyy')} +
' - ' + ${#temporals.format(interval.dateto, 'dd/MM/yyyy')}">
</li>
</ul>
</div>
</div>
</div>
th:case="error.overlaps" works, but the list just appears, when setting it outside the switch statement.
Thanks in advance for your help.
Aleix
The th:text attribute, which evaluates #{error.overlaps}sets the result of this evaluation as the body of the div tag it is in, effectively substituting your loop with the evaluation result. That is why you see the list outside of the switch.
Details here.
can you substitute
th:case="error.overlaps"
with
th:case="#{error.overlaps}"
and let me know if this worked for you
This is the final code, that's working as expected:
<!--Global validation results-->
<div th:if="${#fields.hasErrors('global')}">
<div class="alert alert-danger" role="alert"
th:each="err : ${#fields.errors('global')}">
<div th:switch="${err}">
<div th:case="error.fromAfterTo" th:text="# error.fromAfterTo}"></div>
<div th:case="error.overlaps">
<p th:text="#{error.overlaps}"></p>
<ul th:each="interval : ${dateOverlaps}">
<li th:text="${#temporals.format(interval.datefrom, 'dd/MM/yyyy')}
+ ' - ' + ${#temporals.format(interval.dateto, 'dd/MM/yyyy')}">
</li>
</ul>
</div>
</div>
</div>
</div><!--Global validation results-->
Thanks once more for your help.
I want to show a view with 2 listview like this:
But when I implement by Kendo UI Mobile with:
<div id="cptTab" data-role="view" data-title="Billing" data-layout="billing-layout">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">CPT</span>
<a data-align="left" data-role="button" href="#censusmainTab">Census</a>
<a data-align="right" data-role="button" data-click="onNavigateToAddCpt">+</a>
</div>
</header>
<div>
Patient:
<label>
<input readonly="true" class="PatientNameLabel" />
</label>
</div>
<div>NEW CPT's</div>
<ul data-role="listview" id="cptsListView" data-click="onCPTItemClicked" />
<div>PREVIOUS CPT's</div>
<ul data-role="listview" id="cptsPreviousListView" data-click="onPreviousCPTItemClicked" />
</div>
But it display like this, it's missing 2nd listview (Previous listview):
Please let me know if I did something wrong or it's a bug of Kendo UI Mobile.
Thanks
You could use
<ul data-role="listview" data-type="group" id="ListView" data-click="onItemClicked"/>
to create two group, the first for new CPT's and the second for previous CPT's.
The function onItemClicked should change its behaviour according to which group is clicked.
see the documentation for better details
Try this code
<ul data-role="listview" data-style="inset" data-type="group">
<li>NEW CPT's
<ul>
<li>
<a> 1 st item in 1st list view </a>
</li>
</ul>
</li>
<li>PREVIOUS CPT's
<ul>
<li>
<a >1 st item in 2nd list view </a>
</li>
<li>
<a >2nd item in 2nd list view </a>
</li>
</ul>
</li>
</ul>
For live demo click Here
I am having issues determining if a particular dom object is visible or not. I have the following code outputting to the console and it always returns false even though I can see the element on the screen.
console.log(itemElement.innerText +" is visible: " + $(itemElement.id).is(':visible'));
The context that I am testing is to see whether a list item in a jQuery Accordion object is visible or not. I am iterating through all the list elements (including sub list elements) and performing this check. Always the check returns false. I have googled everywhere for an answer but couldn't find one.
Here is the html to show what the layout looks like. I have edited it a bit to keep it reasonable but you should get a good idea of how it is set up.
<div id="collection_form">
<div id="element_container">
<ul class="element_list element_group ui-sortable">
<li id="de_1" class="element_group_parent eg-collapsed element_group_leaf">
stuff in here is same as below
</li>
<li id="de_29" class="element_group_parent eg-collapsed element_group_leaf">
<div>
<span>Room Booking</span>
<span class="element_type"> - Group</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
<ul class="element_group">
<li id="de_30" class="element_config_form element_group_leaf">
<div>
<span>Room Number</span>
<span class="element_type"> - Text</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
</li>
</ul>
</li>
<li id="de_31" class="element_group_parent eg-collapsed element_group_leaf">
<div></div>
<ul class="element_group">
<li id="de_32" class="element_config_form element_group_leaf">
<div> more stuff </div>
</li>
</ul>
</li>
</ul>
</div>
</div>
What is it that I am doing wrong?
Try this :
$(itemElement).is(':visible'); // this works if itemElement is a DOM element, or even if itemElement is a jQuery wrapped DOM elemenent
i suspect your itemElement.id is undefined
But if itemElement.id is correctly defined (as the id of your itemElement, in this case means that itemElement is a DOM element) you can do both these :
$("#"+itemElement.id).is(':visible');
or even better :
$(itemElement).is(':visible');