当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

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.

网友答案:

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.

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: