Show matrix in thymeleaf html page - java

I have to show into a page the values of a matrix. Exactly I have a excel file mapped into matrix (ExcelField[][]) and the first row of this file is the label of the value of the below row (e.g. age heigh sex and th below row has the value 20 170 F).
Now I have to show the value near the label, three or four of this for any row of bootstrap page, like so:
The problem is the use of the matrix and the number of columns to show for any row. I think that it is impossible to use th:each as above image, it is possible to use for with variable as in java? Is there another way to make this?
Thanks

This is the code that I have written and tested, it works fine:
<div class="container">
<div th:each="j: ${#numbers.sequence(1, rowSize)}">
<div th:each="i: ${#numbers.sequence(0, colSize)}">
<div th:if="${i%3==0}">
<div class="row"></div>
</div>
<h3 th:if="${i==0 or i%3==0}">
<span class="label label-primary col-xs-1"
th:text="${excelSheet[0][i].value}"></span>
</h3>
<h3 th:if="${i!=0 and i%3!=0}">
<span class="label label-primary col-xs-1 col-xs-offset-1"
th:text="${excelSheet[0][i].value}"></span>
</h3>
<input class="km col-xs-2" name="distance" type="text"
th:value="${excelSheet[j][i].value}" />
</div>
</div>
</div>

Related

How to get specific sub-elements of html data using Jsoup

So I am trying to get all prices from a Html file using Jsoup. The simplified Html is structured something like this:
//some html
<div class="price-point-wrap use-roundtrippricing">
<div class="price-point-wrap-top use-roundtrippricing">
<div class="pp-from-total use-roundtrippricing">Roundtrip</div>
</div>
<div class="price-point price-point-revised use-roundtrippricing">
$509
</div>
<div class="fare-select-button-div">
<input type="button" aria-describedby="sr_product_ECONOMY_123-745|1975-UA" value="Select" class="fare-select-button">
<span class="visuallyhidden">fare for Economy (lowest)</span>
</div>
</div>
//some html
<div class="price-point-wrap use-roundtrippricing">
<div class="price-point-wrap-top use-roundtrippricing">
<div class="pp-from-total use-roundtrippricing">Roundtrip</div>
</div>
<div class="price-point price-point-revised use-roundtrippricing">
$1,046
</div>
<div class="fare-select-button-div">
<input type="button" aria-describedby="sr_product_MIN-BUSINESS-OR-FIRST_123-745|1975-UA" value="Select" class="fare-select-button">
<span class="visuallyhidden">fare for First (2-cabin, lowest)</span>
</div>
<div class="pp-remaining-seats">​5 tickets left at this price​</div>
</div>
//some html
This is what I have tried so far:
File input = new File("Flights.html");
Document document = Jsoup.parse(input, "UTF-8", "");
Elements prices = document.getElementsByClass("price-point");
for(Element e: prices){
System.out.println(e.toString());
}
This gives me the following result:
<div class="price-point price-point-revised use-roundtrippricing">
$509
</div>
<div class="price-point price-point-revised use-roundtrippricing">
$1,046
</div>
.....
But now I only want prices like:
509
1046
I tried regex by only keeping the digits e.toString().replaceAll("\\D+","") when printing it, this seems to work but that is not how I want to achieve it. How can I get only the numbers using Jsoup?
Thanks to the comment from #Eritrean, I needed to use e.text() instead of e.toString()which gave me
$509
$1,046
I still need to use regex like e.replaceAll("[$,]", "") to get rid of the dollar signs.

parse data of certain tag which is before a particular class

I need parse data from web page by tag ("p"). I try like this:
Elements content = document.getElementsByTag("p");
for(Element el : content) {
System.out.println(el.text());
}
And it's work fine. But I get superfluous data.
For example:
<div class="DicCellTerm">
<h1>Impossible</h1>
<div class=des>
<p class=par2><span class=hint><em>smth</em></span></p>
<p class=par2>1) (<em>with</em>) all, do</p>
<p class=par2>2) <span class=hint><em>text</em></span> some words</p>
<p class=par3>it is impossible</p>
</div>
</div>
</div><!--DicCell end-->
<div align="center" class="AdContent" id="adcontentnoprint">
<div class=SharedItems>
<div class=DicCellParent>
<span class=LinkOtherDic>+ dictionary <strong>impossible</strong> - translate</span>
<div class=DicCellOther id=diccellothershow>
<h2>impossible</h2>
<div class=des>
<p class=par1>1) important, is</p>
<p class=par1>what</p>
<p class=par1>2) true, false</p>
</div>
</div>
<!--DicCellOther end-->
</div>
<!--DicCellParent end-->
<div class=DicCellParent>
<span class=LinkOtherDic>+ translate <strong>important</strong> - dictionary</span>
<div class=DicCellOther id=diccellothershow>
<h2>importnant</h2>
<div class=des>
<p class=par1>1) müim, emiyetli; emiyet bar</p>
<p class=par1>it is very important - bu pek müimdir, bunıñ büyük emiyeti bar</p>
<p class=par1>2) qopayıp, qabarıp</p>
</div>
</div>
<!--DicCellOther end-->
</div>
<!--DicCellParent end-->
</div>
<!--SharedItems end-->
I need to get data by tag "p" before class SharedItems.
I tried parse data by class "DicCellTerm" and I get properly data. And all data is written in one line, but I need to get data as on web page.
Elements elements = document.select(".DicCellTerm p");
This grabs all p inside the .DicCellTerm class, then you can iterate over elements. Here is a link to all possible selectors in jsoup, this is where i get most of my help =)
https://jsoup.org/apidocs/index.html?org/jsoup/select/Selector.html

Do not clear form content upon POST

I am using a Spring form with tabs, each tab again has a form.
The problems are
1)After the form submission, the error messages are displayed but the form content is cleared which should not happen
2)After the form submission the control immediately goes to the default tab which is the first tab in my case. I want the control to stay on current tab after transaction and not go to default tab.
This is the first time I am working using Spring MVC, JSP, jQuery. Please let me know if I have to make any changes.
administrator.jsp
Below is the code for Manage Users tab functionality.
jQuery:
$(document).ready(function() {
$('#btnManage').click(function() {
if($.trim($('#userId').val()) == ''){
$('#area5').html("User Id is a required field.");
}else if($.trim($('#region').val()) == 'NONE'){
$('#area5').html("Region is a required field.");
}else{
$('#manageUserForm').submit();
}
});
$('#btnCancel5').click(function(e) {
$('#manageUserForm').trigger("reset");
$('#area5').html("");
});
});
administrator.jsp:
<div id="tab5" class="tab">
<div class="devices" >
<form:form method="post" id="manageUserForm" modelAttribute="adminUser" action="/DeviceManager/admin/manageUser">
<div align=center class="message" id="area5">${serverError5}</div>
<div>
<div class="plLabelSearch">User Id:</div>
<div class="plinput"><form:input path="userId" type="text" size="29"/></div>
</div>
<div>
<div class="plLabelSearch">Region:</div>
<div class="plselect">
<form:select path="region">
<form:option value="NONE" label="------- Select One -------" />
<form:option value="A" label="A"/>
<form:options items="${regionList}"/>
</form:select>
</div>
</div>
<br>
<br>
<div>
<div class="plLabelSearch"> </div>
<div class="plinput"><a id="btnManage" class="abutton">OK</a></div>
<div class="plinput"><a id="btnCancel5" class="abutton">Cancel</a></div>
</div>
</form:form>
</div>
</div>
You need to re-render the page with the data from the original form submission.
In your case this probably means your form should contain a few hidden fields to allow you to determine which tab you are on, your JSP will need to be able to understand this data and use it to select the appropriate tab.
because you submission is not asynchronous,after you submit,the administrator.jsp is reset,so the error message is display ,owing to this code <div align=center class="message" id="area5">${serverError5}</div>

Positioning of jQuery/Java toggle content

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.

Variable has null value when using getText but not when rendering a radiobutton

I'm trying to render a few radiobuttons in a Struts2 web application.
The value of each radiobutton is an integer and its associated label should be an i18n text, which varies as a function of the value. The i18n keys have the form Common.eventTypeId.<<integer value>>, (e.g. Common.eventTypeId.28, Common.eventTypeId.29, etc).
However when I access the page the labels don't get translated as there are wrong keys: Common.eventTypeId.null. What puzzles me is that the same variable used to build the i18n key renders ok as the value of the radio button.
Here is the snippet where the HTML code is generated. eventTypeIds is a List<Integer> containing 3 elements: 28, 29 and 31.
<s:iterator value="eventTypeIds" var="eTypeId">
<div class="frm-field">
<s:set var="label" value="%{getText('Common.eventTypeId.' + eTypeId )}"/>
<s:radio name="currentActivity.eventTypeId" list="eTypeId" listValue="label"/>
</div>
</s:iterator>
The relevant i18n keys:
Common.eventTypeId.29 = CAA
Common.eventTypeId.28 = Practical
Common.eventTypeId.31 = Non-assessable activity
This is the actual HTML being generated right now:
<div class="frm-field">
<input type="radio" value="29" checked="checked" id="frm-activity_currentActivity_eventTypeId29" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId29">Common.eventTypeId.null</label>
</div>
<div class="frm-field">
<input type="radio" value="28" id="frm-activity_currentActivity_eventTypeId28" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId28">Common.eventTypeId.null</label>
</div>
<div class="frm-field">
<input type="radio" value="31" id="frm-activity_currentActivity_eventTypeId31" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId31">Common.eventTypeId.null</label>
</div>
This would be the expected HTML:
<div class="frm-field">
<input type="radio" value="29" checked="checked" id="frm-activity_currentActivity_eventTypeId29" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId29">CAA</label>
</div>
<div class="frm-field">
<input type="radio" value="28" id="frm-activity_currentActivity_eventTypeId28" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId28">Practical</label>
</div>
<div class="frm-field">
<input type="radio" value="31" id="frm-activity_currentActivity_eventTypeId31" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId31">Non-assessable activity</label>
</div>
Note that the integer values are being correctly displayed using eTypeId variable, but that variable is null when building the i18n key. What am I missing? Did I misunderstand the s:radio tag usage?
You are missing # before using eTypeId var inside <s:set> tag.
<s:set var="label" value="%{getText('Common.eventTypeId.' + #eTypeId )}"/>
BTW <s:radio> takes iterable source in list attribute, so you can use your eventTypeIds list inside radio tag and get translated text with listValue attribute and top keyword.
<s:radio name="currentActivity.eventTypeId" list="eventTypeIds"
listValue="%{getText('Common.eventTypeId.' + top)}"/>

Categories