How to assign the id of a selected

Question

I'm completely editing the original question sience I've got an answer in this post that gave me some guidance:

I've got this ThymeLeaf template:

<!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>

In the <form> I'm doing a post with the variable ${gusto.id} that's not being binded to anything (and not working properly).

What I need to do is bind the selected <option>'s id value to the form's ${gusto.id} variable so that my controller then know's which id needs to be deleted.

So basically I need the selected <option>'s (which it will be an Object of type Gusto) id attribute to travel in my <form> to my controller.

The controller is expecting an int as the id !!

You need to add a parameter to your action url `th:action="@{/gustos/{id}/delete(id=${gusto.id)}"` something like this. — M. Deinum, Oct 30 '18 at 14:27
Thanks for the answer ... now I'm getting this error: Could not parse as expression: "@{/gustos/{id}/delete(id=${gusto.id)}" (deleteGusto:18) — Nacho Zve De La Torre, Oct 30 '18 at 14:39
The problem is your `form` isn't inside the `th:each`... So you probably need either some javascript or make the select part of the form and submit the `id` to delete as a parameter instead as part of the path. — M. Deinum, Oct 30 '18 at 18:34

Alien · Answer 1 · 2018-10-30T14:43:31.237

1

Add th:action="@{/gustos/{id}/delete(id=${gusto.id})}" like this.

Refer thymeleaf-construct-url-with-variable and standardurlsyntax-thymeleaf

edited Oct 30 '18 at 14:43

answered Oct 30 '18 at 14:28

Alien

15,141
6
37
57

Thanks for the answer ... now I'm getting this error: Could not parse as expression: "@{/gustos/{id}/delete(id=${gusto.id)}" (deleteGusto:18) – Nacho Zve De La Torre Oct 30 '18 at 14:39
Thanks brother ... now I have this error: Exception evaluating SpringEL expression: "gusto.id" (deleteGusto:18) !!! Why is this so anti-logic ? – Nacho Zve De La Torre Oct 30 '18 at 14:46
iterate gustos before

– Alien Oct 30 '18 at 14:53
I'm guessing it is because it doesn't knows to which id I'm refering to. Sience the id in the – Nacho Zve De La Torre Oct 30 '18 at 14:54
you can create a outer div which will serve to select and form both. so iterate gustos inside that div.
– Alien Oct 30 '18 at 14:57
Can you put it in code if you have time ?? Sorry, I'm pretty new to this – Nacho Zve De La Torre Oct 30 '18 at 14:59
see https://stackoverflow.com/questions/28560999/thymeleaf-loop-iteration-in-div-tag-and-create-rows – Alien Oct 30 '18 at 15:02
sorry,i cant do that. please accept and upvote the answer if it has given the solution of main problem. otherwise everything is new question actually. – Alien Oct 30 '18 at 15:06
Should I delete the question then ? Cause the answer is not solving my problem, even thought it helped for know-how – Nacho Zve De La Torre Oct 30 '18 at 15:16
Initiate a new question instead of deleting this. – Alien Oct 30 '18 at 15:19
plz help, I'm stuck with this :( – Nacho Zve De La Torre Oct 30 '18 at 16:13

Alain Cruz · Accepted Answer · 2018-10-30T16:34:09.893

You could always use jquery for this. In fact, I believe it would be the easiest solution for your current issue. This way, you will always have the correct id in the action 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>

I added an id to your form, so that it would be easier to fetch it's value. One more thing, you should add a default option in the beginning of your select, so that the user can't choose a wrong value.

This is more what I wanted !! I'll try it out! Thanks Alan <3 — Nacho Zve De La Torre, Oct 30 '18 at 16:33

Kaique Dias · Answer 3 · 2018-10-30T16:53:33.493

0

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>`

edited Oct 30 '18 at 16:53

answered Oct 30 '18 at 15:29

Kaique Dias

45
1
10

thanks, updated the question sience the problem is not in there – Nacho Zve De La Torre Oct 30 '18 at 15:36
Sorry, I do not understand where the problem is. Is your select working correctly? – Kaique Dias Oct 30 '18 at 16:21
Is it the problem sending the form? – Kaique Dias Oct 30 '18 at 16:22
Yes, the problem is sending the form with the selected options's id being the variable that makes it dinamic ! – Nacho Zve De La Torre Oct 30 '18 at 16:23
I need to get the id of the selected option, and then concatenate it in the th:action so it travels in the post – Nacho Zve De La Torre Oct 30 '18 at 16:24
The problem for me is here: th:action="@{'/gustos/' + ${gusto.id} + '/delete'}" , you should do th:action=" '@{/gustos/'+${gusto.id}+'/delete}' " – Kaique Dias Oct 30 '18 at 16:27
That's not the prob ... the prob is the id !! It doesn't knows to which id I'm reffering to, and I don't know how to tell the template to get the id of the selected option in the – Nacho Zve De La Torre Oct 30 '18 at 16:29
I understood, to solve this I think you will have to use ajax – Kaique Dias Oct 30 '18 at 16:32
If you decide to use ajax tell me that I will help you – Kaique Dias Oct 30 '18 at 16:38

How to assign the id of a selected element to another variable for further processing ? ThymeLeaf

3 Answers3

How to assign the id of a selected