Изменение выбора Thymeleaf + Javascript - PullRequest
Новая
       8

Изменение выбора Thymeleaf + Javascript

0 голосов
/ 25 октября 2018

Я хочу выбрать список элементов, на основе выбора я вызываю функцию api, которая дает мне список данных, для вставки во второй выбор.

Вызов работает нормально, я пытаюсьпредупредить результат, но мне нужно изменить значение второго выбора, и я не могу.Я использую select2 .

Это моя THYMELEAF страница: 

   <form id="updateD" data-parsley-validate class="rounded px-2 py-2 mt-3" th:action="@{/ditta/upd}" th:method="POST" th:object="${ditta}">

<div class="row" th:if="*{codice==null or codice.isEmpty()}">
                    <div th:replace="~{/tags/input :: inputNorm(indirizzo, *{indirizzo}, text, true, '')}"></div>
                    <div th:replace="~{/tags/select :: selectValue(city, *{city}, ${cities}, false)}"></div>
                    <div th:replace="~{/tags/select :: selectValue(zip, *{zipCode}, ${zips}, false)}"></div>
                </div>
</form>

JS код: 

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
        var token = $('#_csrf').attr('content');
        var header = $('#_csrf_header').attr('content');

        $(function(){

            $('#city').change(function(){
                handleComune($('#city').val());
            });

            $('.sel2').select2({
                theme: "bootstrap"
            });
        });

        function handleComune(city){
            $.ajax({
                type: 'GET',
                 url:[[ @{'/api/extractZip?city='}]]+city,
                 beforeSend: function(xhr) {
                   xhr.setRequestHeader(header, token);
               },
               success : function(data) {
                   $('#zips').val(data);
                   alert(data);
               }
            });
        }

    /*]]>*/
    </script>

Исходя из выбора города, я извлекаю список почтовых индексов.

Фрагменты выбора следующие: 

    <div th:fragment="selectValue(name, selected, values, required)" class="col form-group" th:switch="${required}">

        <label th:text="${required} ? #{${name}}+'*' : #{${name}}" th:for="${name}" class="control-label"></label>

<div class="col form-group">
            <select th:name="${name}" th:id="${name}" class="form-control sel2" th:required="${required}">
                <option value=""></option>
                <th:block th:each="v : ${values}">
                    <option th:value="${v}" th:text="${v}" th:selected="${selected} eq ${v}"></option>
                </th:block>
            </select>
        </div>

    </div>

$ ('#zips'). val (data); не изменяется.В чем дело?

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

После нескольких попыток я решил следующим образом: 

 function handleComune(city){
            $.ajax({
                type: 'GET',
                 url:[[ @{'/api/extractZip?city='}]]+city,
                 beforeSend: function(xhr) {
                   xhr.setRequestHeader(header, token);
               },
               success : function(data) {
                   $('#zip').empty();
                       var arrayCap = data.toString().split(",");

                       for (a in arrayCap ) {
                           var newOption = new Option(data[a], data[a], false, false);
                           $('#zip').append(newOption).trigger('change');
                        }
               }
            });
        }

Мне нужно разделить мои данные, потому что ответом является строка данных, разделенных запятыми.

Теперь работает отлично!

0 голосов
/ 26 октября 2018

Если вы возвращаете фрагмент Thymeleaf с вашего контроллера, вы получите HTML-код.Итак, val() не будет работать.Вам нужно использовать append(data).Теперь я не вижу вашего контроллера или того, где находится элемент $('#zips'), поэтому я предполагаю, что это то, что вы отправляете.

Если вы отправляете список объектов, вам нужно будет использовать$.each(data, function() { // Do something }); чтобы добавить каждую сущность в качестве опции на ваш выбор.

...