Как назначить идентификатор выбранного элемента <option>другой переменной для дальнейшей обработки? ThymeLeaf - PullRequest
Новая
       8

Как назначить идентификатор выбранного элемента <option>другой переменной для дальнейшей обработки? ThymeLeaf

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

Я полностью редактирую исходный вопрос. У меня есть ответ в этом посте, который дал мне некоторое руководство:

У меня есть шаблон ThymeLeaf: 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/app.css}" />
</head>
<body>
<div class="container">
    <select name="gustos" id="selectGustos">
        <option th:each="gusto : ${gustos}" th:text="${gusto.nombre}" th:value="${gusto.id}"> </option>
    </select>
    <div class="row delete">
        <div class="col s12 l8">
            <form th:action="@{'/gustos/' + ${gusto.id} + '/delete'}" method="post">
                <button type="submit" class="button">Borrar</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

В <form> я делаю пост с переменной $ {gusto.id} , которая ни к чему не привязана (и не работает должным образом).

Что мне нужно сделать, это привязать значение идентификатора выбранного <option> к переменной $ {gusto.id} формы, чтобы мой контроллер знал, какой идентификатор должен быть удален.

Так что в основном мне нужен атрибут id выбранного <option> (который будет объектом типа Gusto) для перемещения в моем <form> к моему контроллеру.

Контроллер ожидает int в качестве идентификатора !!

Ответы [ 3 ]

0 голосов
/ 30 октября 2018 
th:onclick="'javascript:consultar();'"

<script type="text/javascript"> 
   function consultar() {

  var gustoId = $("#selectGustos option:selected").val();

    $.ajax({

        url: "/gustos/"+ gustoId + "/delete}",
        success: function(response) {

        }
    });         
}
</script>`
0 голосов
/ 30 октября 2018

Вы всегда можете использовать jquery для этого. На самом деле, я считаю, что это было бы самым простым решением для вашей текущей проблемы. Таким образом, вы всегда будете иметь правильный id в URL-адресе действия. 

$('#selectGustos').on('change', function() {
  var value = $(this).val();
  $('#gustosForm').attr('action', 'gustos/' + value + '/delete');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/app.css}" />
</head>
<body>
<div class="container">
    <select name="gustos" id="selectGustos">
        <option value="-1" selected="selected">Escoger Gusto</option>
        <option th:each="gusto : ${gustos}" th:text="${gusto.nombre}" th:value="${gusto.id}"> </option>
    </select>
    <div class="row delete">
        <div class="col s12 l8">
            <form id='gustosForm' th:action="@{'/gustos/' + ${gusto.id} + '/delete'}" method="post">
                <button type="submit" class="button">Borrar</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

Я добавил id к вашей форме, чтобы было проще получить ее значение. Еще одна вещь, вы должны добавить опцию по умолчанию в начале вашего выбора, чтобы пользователь не мог выбрать неправильное значение.

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

Добавить th:action="@{/gustos/{id}/delete(id=${gusto.id})}" вот так.

См. thymeleaf-construct-url-with-variable и standardurlsyntax-thymeleaf

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...