0

I'm trying to fill a table in a jsp with a List I put in the model from a Spring controller but the table is not being filled. This is the page:

<%@ page import="cl.onvision.dte.be.utils.*" %>
<%
    String order  = request.getParameter("o");
    String search = request.getParameter("s");

    String strTitulo = "Gestor usuarios";
%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <title>Administrador / Inicio</title>
</head>

<body>
    <!-- Header layer -->
    <div class="container">
        <div class="row" style="background-color: rgb(255,130,0); padding: 10px">
            <div class="col-sm-3"><img src="/img/index/slogan150.png" /></div>
            <div class="col-sm-4"></div>
            <div class="col-sm-5 text-right text-white">
                <!--a href="/login/salir">Salir</a-->
                <%@include file="/views/include/bannerSesion.jsp"%>
            </div>
        </div>
    </div>

    <!-- Menu layer -->
    <div class="container">
        <ul class="nav nav-tabs nav-justified">
            <li class="nav-item"><a class="nav-link" href="/admin/inicio">Inicio</a></li>
            <li class="nav-item"><a class="nav-link" href="/admin/usuarios">Gestion Usuarios</a></li>
            <li class="nav-item"><a class="nav-link" href="/admin/contrib">Gestion Contribuyentes</a></li>
            <li class="nav-item"><a class="nav-link" href="/admin/alertas">Alertas</a></li>
            <li class="nav-item"><a class="nav-link active" href="/admin/ciudades">Ciudades</a></li>
        </ul>
    </div>
    <br />

    <!-- Search & button upper-layer -->
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <b>Búsqueda:</b>
                <input type="text" class="input-sm" style="height:25px" id="s" value="<%= (search==null)? "": search %>"
                    maxlength="20" size="20" autofocus />
                <input type="hidden" id="o" value="<%= (order==null)? "": order %>" />
            </div>
            <div class="col-sm-6 text-right">
                <button data-toggle="modal" data-target="#modaladd" class="btn btn-sm btn-success">
                    <i class="material-icons" style="font-size:22px">person_add</i>
                </button>
            </div>
        </div>
    </div>
    <div style="height:10px"></div>

    <!-- Data list -->
    <div class="container">
        <div class="table-responsive">
            <table class="table table-striped table-hover table-bordered table-condensed table-sm">
                <thead>
                    <tr>
                        <th style="text-align:center">#</th>
                        <th style="text-align:center">Nombre usuario</th>
                        <th style="text-align:center">Region</th>
                        <th style="text-align:center">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach var="ciudad" items="${ciudades}">
                        <tr>
                            <td style="text-align:center"><c:out value="${ciudad.id}"/></td>
                            <td style="text-align:center"><c:out value="${ciudad.nombre}"/></td>
                            <td style="text-align:center"><c:out value="${ciudad.region}"/></td>
                            <td class="pl-5">
                                <a href="/admin/usuario/eliminar/${ciudad.id}/">
                                    <button class="btn btn-sm btn-primary"><i class="material-icons"
                                            style="font-size:16px">remove_circle</i></button>
                                </a>
                                <a href="javascript:leerDatos(${ciudad.id});">
                                    <button class="btn btn-sm btn-warning"><i class="material-icons"
                                            style="font-size:16px">border_color</i></button>
                                </a>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>


    <a href="#" id="axls" style="display:none;" donwload>a</a>

    <!-- Modal 'add user' form-->
    <div class="modal" id="modaladd">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header bg-info text-white">
                    <h2 class="modal-title">Agregar nuevo usuario</h2>
                </div>

                <!-- Modal body -->
                <form method="post" action="/admin/usuario/agregar">
                    <div class="modal-body">
                        <div class="row" style="margin-bottom:10px">
                            <div class="col-sm-4"><label for="nom">Nombre de usuario:</label></div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="nomusu" id="nom" maxlength="40"
                                    required />
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:10px">
                            <div class="col-sm-4"><label for="run">RUN:</label></div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="runusu" id="run" maxlength="40"
                                    required />
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:10px">
                            <div class="col-sm-4"><label for="cla">Nueva clave:</label></div>
                            <div class="col-sm-8">
                                <input type="password" class="form-control input-sm" name="cla1usu" id="cla"
                                    maxlength="20" required />
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:10px">
                            <div class="col-sm-4"><label for="cla2">Repita la clave:</label></div>
                            <div class="col-sm-8">
                                <input type="password" class="form-control input-sm" name="cla2usu" id="cla2"
                                    maxlength="20" required />
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:10px">
                            <div class="col-sm-4"><label for="com">Comentarios:</label></div>
                            <div class="col-sm-8">
                                <textarea class="form-control input-sm" name="comentusu" id="com" rows="3"
                                    cols="80"></textarea>
                            </div>
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-success" value="Agregar nuevo usuario" />
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal 'update user' form-->
    <div class="modal" id="modalupdate">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header bg-info text-white">
                    <h2 class="modal-title">Modificar usuario</h2>
                </div>

                <!-- Modal body -->
                <form method="post" action="/admin/usuario/modificar">
                    <div class="modal-body">
                        <input type="hidden" name="uid" id="uid" value="" />
                        <div class="row" style="margin-bottom:10px">
                            <div class="col-sm-4"><label for="unom">Nombre de usuario:</label></div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="unomusu" id="unom" maxlength="40"
                                    readonly />
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:10px">
                            <div class="col-sm-4"><label for="urun">RUN:</label></div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control input-sm" name="urunusu" id="urun" maxlength="40"
                                    readonly />
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:10px">
                            <div class="col-sm-4"><label for="ucom">Comentarios:</label></div>
                            <div class="col-sm-8">
                                <textarea class="form-control input-sm" name="ucomentusu" id="ucom" rows="3"
                                    cols="80"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-success" value="Modificar datos" />
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>

<script>
    function ordenarDatos(campo) {
        url = 'gestionUsuarios.jsp?o=' + campo + '&s=' + $('#s').val();
        document.location.href = url;
        return null;
    }

    /*function descargarXls()
    {
        url1 = '${pageContext.request.contextPath}/ExtraerXlsUsuarios.do';

        $.ajax( {url: url1,
            success: function(result)
            {
                //$('#axls').attr('href', "../"  + result);
                location.href = "../"  + result; //$('#axls').attr('href');
            } });
    }*/

    $('#s').keypress(function (event) {
        if (event.which == 13) {
            document.location.href = 'gestionUsuarios.jsp?o=' + $('#o').val() + '&s=' + $('#s').val();
            return null;
        }
    }
    );

    function leerDatos(id) {
        $.post("/admin/usuario/ver/" + id + "/", function (obj) {
            obj = JSON.parse(obj);
            $('#uid').val(obj.id);
            $('#unom').val(obj.nom);
            $('#urun').val(obj.run);
            $('#ucom').val(obj.com);

            $('#modalupdate').modal('show');
            obj = null;
        });
    }

    /*$().ready( function()
    {
        v = $('#s').val();
        $('#s').val('');
        $('#s').val(v);
    });*/


</script>

</html>

I'm putting the list into the model right, as you can see in the chrome developer tools:

enter image description here

I can't see the problem here, I need help trying to figure out why the table is not being filled.

2 Answers2

1

Try including the <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> athe top of your code. Also, make sure your object name ciudades is spelled as it is in your controller.

Morteza
  • 642
  • 7
  • 17
-1

Well my problem was thwo things:

  1. I'm using tomcat as webapp which doesn't bring JSTL embeddeb. So I had to add the dependency in the pom.xml.The version is important if you want to use EL's.
  <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>jstl</artifactId>
       <version>1.2</version>
   </dependency>
  1. I had to add the taglib on top of the JSP to access the <c:> tags. Thanks to @Morteza Bandi for the heads up.

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>