HTML - Ayuda! lista select Option con thymeleaf.

Ayuda! lista select Option con thymeleaf.

Publicado por Facundo (2 intervenciones) el 11/07/2022 23:33:22

Hola gente de este hermoso foro. Mi nombre es facundo y estoy aqui de nuevo por una pregunta mas que me a llevado horas de trabajo y no e dado con el codigo para que funcione.
Les explico: Estoy haciendo un formulario para crear rutinas de gimnasio donde se cargan ejercicios(Entidades) que estan listos para formar parte de rutina(otra entidad)

Mi problema es que en el formulario no me reconoce el campo del select como algo para llenar, me lo envia nulo.
Les dejare el codigo a continuacion del html:
Miren la linea 116.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panel del Usuario</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Gymstinct</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Usuarios</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
Crear o buscar
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Crear Ejercicio nuevo</a>
<a class="dropdown-item" href="#">Buscar Ejercicios</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Crear usuario nuevo</a>
</div>
</li>

</ul>

</div>
</nav>

<br>

<div style="float: left;">

<div class="card" style="width: 18rem;">
<img src="/12.jpg" class="card-img-top" alt="...">
<div class="card-body" >
<h5 class="card-title" th:text="${usuario.nombre}" > </h5>
<p class="card-text" >Puede modificar datos, agregar rutinas o revisar los pagos.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item" > Nº de Tel: <a th:text="${usuario.telefono}"> </a> </li>
<li class="list-group-item"> Nombre de usuario: <a th:text="${usuario.username}"> </a></li>
<li class="list-group-item"> Edad: <a th:text="${usuario.edad}"> </a> </li>
<li class="list-group-item"> Vencimiento: <a th:text="${usuario.alta}"> </a> </li>
</ul>
<div class="card-body">
<a > <button type="button" class="btn btn-info" style="color: black" > <strong>Modificar </strong></button> </a>

<a ><button type="button" class="btn btn-info" style="color: black" > <strong>Crear rutina </strong> </button></a>
<br> <br>
<button type="button" class="btn btn-info" ><a style="color: black" > <strong>Vencimiento</strong></a></button>
</div>
</div>

</div>

<form th:action="@{/admin/rutina}" method="POST" >

<table >
<tr><th>Rutina</th></tr>
<tr> <th>Nombre de rutina:</th> <th><input type="text" name="nombre"></th> </tr>
<tr> <th>Objetivo:</th> <th><input type="text" name="objetivo"></th> </tr>
<tr> <th>Fecha de inicio</th> <th><input type="date" name="fechainicio1"></th> <th>Fecha de finalizacion</th> <th><input type="date" name="fechafinal1"></th> </tr>

</table>

<br><br>

<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home"> Dia 1</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Dia 2</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Dia 3</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Dia 4</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-dia5" role="tab" aria-controls="settings">Dia 5</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">

<table >
<thead>
<tr>
<th scope="col" >Ejercicio</th>
<th scope="col">Repeticiones</th>
<th scope="col">Serie</th>

</tr>
</thead>

<tbody >
<tr >
<td> <select th:field="*{listaeje}"> <option name="ejercicio1" th:each="listaeje: ${listaeje}" th:value="${listaeje}" th:text="${listaeje.nombre}" > </select> </td>

</tr>

</tbody>
</table>

</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-dia5-list">...</div>
</div>
</div>
</div>

<button type="submit" class="btn btn-success">Crear</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>

No se por que envia el ejercicio1 como nulo o directamente no lo envia. Th:value ya lo e probado usando ejelista.id y no hay caso siempre llega nulo. El error de consola dice que es nulo o a veces que no esta presente.

les dejo el codigo del controlador

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@GetMapping("/panelusuario")
public String paneldelusuario(ModelMap modelo2,ModelMap modelo, @RequestParam int id){

List<Ejercicio> ejer= ejerepo.findAll();

modelo2.addAttribute("listaeje", ejer);

Usuario usuario= userepo.getById(id);

modelo.put("usuario", usuario);

return "panelusuario.html";
}

@PostMapping("/rutina")
public String crearutina(@RequestParam String nombre, @RequestParam String objetivo, @RequestParam String fechainicio1, @RequestParam String fechafinal1, @RequestParam String ejercicio1) throws ParseException{

SimpleDateFormat formato = new SimpleDateFormat("yyyy-MM-dd");
Date fechainicio= formato.parse(fechainicio1);
Date fechafinal= formato.parse(fechafinal1);

List<Ejercicio> ejercicios = null;
ejercicios.add(ejerepo.getById(ejercicio1));

rser.crearrutina(nombre, objetivo, fechainicio, fechafinal, ejercicios);

return "inicio.html";
}

Ojala alguien pueda ayudarme. Este proyecto es muy importante y lo necesito para insertarme en el mundo laboral. Amo programar pero esta vez me supero. Llevo tantas horas y buscando soluciones y nada :(

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder