Getting the value from a button text for thyme leaf - spring-mvc

Question

Ok, I have this somewhat complex piece of HTML that I have to integrate with. It is a button with a drop down (using aria) and I had to pass in a currency list and be able to select one of the dropdown elements (currency values) and update the button text with the selected value. I write a tiny bit of js and that works well. I use thymeleaf to pass in values to populate and that works well. I also need to read the values that were set from the post to the spring mvc controller but I always get a empty string for the value that I set via js.
here is the javascript
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
var button = $("#currencyButton");
button.text(selText);
console.log("currency selected is:" + selText);
});
here is the html
<div class="col-sm-9 col-sm-offset-3 col-xs-12 form-row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
name="currencyButton"
th:field="${pals.selectedCurrency}"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
</div>
What I am trying to read back in the spring mvc controller is the pals.selectedCurrency value and it is always empty. Something I am missing? I was playing around and tried setting value and field. In reality I want to read the inline text that my js inserts.

Answer 1

I think you must add a th:fragment on you button and change the text of the button via ajax from backing bean from server, not from javascript. It's something like this :
<form th:action="#{/PersonEdit/save(contract=${param.contract})}" th:object="${personBean}"
method="POST" th:if="${param.contract != null}">
... other form components
<div class="form-group">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.tfoms}"></label>
<div class="col-sm-8">
<select class="form-control" th:field="*{tfoms}"
onchange="loadInsuranceCompanies()">
<option th:each="t : ${tfomses}"
th:value="${t.uidtfoms}"
th:text="${t.shortName}"
th:selected="${personBean.tfoms != null
and personBean.tfoms.equals(t)}"></option>
</select>
</div>
</div>
<div th:class="${#fields.hasErrors('insuranceCompany')}
? 'form-group has-error' : 'form-group'">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.ic}"></label>
<div class="col-sm-8" id="insuranceCompaniesContent">
<select class="form-control" id="insuranceCompany"
name="insuranceCompany"
th:fragment="insuranceCompany">
<option th:each="i : ${insuranceCompanies}"
th:value="${i.uidinsurancecompany}"
th:text="${i.shortName}"
th:selected="${personBean.insuranceCompany != null
and personBean.insuranceCompany.equals(i)}"></option>
</select>
<div th:if="${#fields.hasErrors('insuranceCompany')}"
th:each="err : ${#fields.errors('insuranceCompany')}">
<span class="text-danger" th:text="${err}"></span><br/>
</div>
</div>
</div>
In my case I refreshing one dropdown via another.Then refresh this fragment via ajax on item selection
function loadInsuranceCompanies() {
var url = [[#{/PersonEdit/insuranceCompanies}]];
if ($('#tfoms').val() !== '') {
url = url + '/' + $('#tfoms').val();
}
$("#insuranceCompaniesContent").load(url);
}
I think the trouble can be because you using not a standard select as a dropdown.

Answer 2

Ok, I figured out a relatively simple answer to it. I have to use the html that was provided because of look and feel considerations from the customer.
so what I did was add a hidden input and set that from the java script.
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
$("#currencyButton").text(selText);
$("#currencySelected").val(selText);
console.log("currency selected is:" + selText);
});
<input type="hidden"
id="currencySelected"
th:field="${pals.selectedCurrency}"/>
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
I see the correct values that were selected for my dropdown on the spring mvc controller and now I can get on with the rest of the stuff.