Ayuda con una plantilla HTML, para un proyecto Spring Boot con Thymeleaf [closed]

  Kiến thức lập trình

tengo un problema en este documento HTML. Resulta que yo tengo una tabla con registros de productos y al final unos botones para eliminar esos registros. Sin embargo al agregar el atributo ‘th:atrr’, me lanza un error. No se si hace parte de Thymeleaf o de Spring.

Cada que se presiona ese botón, se hace una petición de tipo DELETE para eliminar un producto usando su id a un backend por medio de JS:

<body>
    <nav th:replace="~{/fragments/fragments.html :: navbar}"></nav>

    <div class="container-fluid">
        <div class="row">
            <div class="col-6 scrollable-table">
                <table class="table mt-5 shadow border">
                    <thead>
                        <tr>
                            <th scope="col">Código</th>
                            <th scope="col">Nombre del producto</th>
                            <th scope="col">Cantidad en bodega</th>
                            <th scope="col">Precio</th>
                            <th scope="col">Eliminar</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="producto : ${productos}">
                            <th th:text="${producto.getProduct_id}" scope="row" class="align-middle"></th>
                            <td th:text="${producto.getProduct_nombre}" class="align-middle"></td>
                            <td th:text="${producto.getProduct_cant}" class="align-middle"></td>
                            <td th:text="${producto.getProduct_precio}" class="align-middle"></td>
                            <td class="align-middle text-center">
                                <button type="button" class="btn btn-outline-danger" th:attr="data-id=${producto.id}" onclick="eliminarProducto(this)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="bi bi-trash-fill" viewBox="0 0 16 16">
                                        <path
                                            d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" />
                                    </svg>
                                </button>                                
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
function eliminarProducto(btn) {

            var id = btn.getAttribute("data-id");

            console.log(id);

            // Confirmar con el usuario antes de realizar la eliminación
            var confirmacion = confirm("¿Estás seguro de que quieres eliminar este producto?");

            if (confirmacion) {
                // Realizar la solicitud DELETE al backend
                fetch(`http://localhost:8080/api/v1/producto/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error al eliminar el producto');
                        }
                        // Actualizar la interfaz o realizar otras acciones necesarias después de la eliminación
                        // Por ejemplo, puedes recargar la página o actualizar la lista de productos.
                        location.reload();
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        // Manejar errores, mostrar mensajes al usuario, etc.
                        alert('Error al eliminar el producto');
                    });
            }
        }
Sun Jan 14 22:39:32 COT 2024
There was an unexpected error (type=Internal Server Error, status=500).
An error happened during template parsing (template: "class path resource [templates/PRODUCTOS.html]")
org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/PRODUCTOS.html]")

Deseo encontrar una solución. Quiero hacer la petición al backend correctamente, y que se envié el id del producto para usarlo en la petición.

New contributor

Lonely Walker is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

1

LEAVE A COMMENT