1

Buenas,
Estoy tratando de llamar de forma dinámica a los "id" en los tags con el "th:each", de la siguiente manera.

<div th:each="alumno : ${alumnos}" class="row" th:id="'card_' + ${alumno.id}" style="display: none">
    <div class="col s12 m10">
        <div class="card black darken-1">
            <div class="card-content lime-text text-darken-1">
                <span class="card-title" th:text="${alumno.nombres} + ' ' + ${alumno.apellidos}"></span>
            </div>
        </div>
    </div>
    <script th:inline="javascript">
        /*<![CDATA[*/

        $('#show_[${alumno.id}]]').click(function () {
            $('#card_[${alumno.id}]]').fadeToggle( "fast", "linear" );
        });

        /*]]>*/


    </script>
</div>

el resultado que espero(en jQuery ), de forma iterada, sería el siguiente:

<script th:inline="javascript">
        /*<![CDATA[*/

        $('#close_EclairLast').click(function () {
            $('#card123').fadeToggle( "fast", "linear" );
        });

        $('#show_1').click(function () {
            $('#card_1').fadeToggle( "fast", "linear" ); //aqui seria card_[1...n]
        });

        /*]]>*/


    </script>

existe alguna manera de por concatenar el valor del objeto ${alumno.id} en jquery para que sea dinamico???

Los id="show_n" genero tambien dinámicamente en una tabla...

<table class="striped grey lighten-5">
        <thead>
        <tr>
            <th>CI</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Telefono</th>
            <th>Acciones</th>
        </tr>
        </thead>

        <tbody>
        <tr th:each="alumno : ${alumnos}">
            <td th:text="${alumno.cedula}"></td>
            <td th:text="${alumno.nombres}"></td>
            <td th:text="${alumno.apellidos}"></td>
            <td th:text="${alumno.telefono}">0971490111</td>
            <td>
                <a class="btn-floating light-blue darken-4" th:id="'show_' + ${alumno.id}"><i class="material-icons">remove_red_eye</i></a>
                <a class="btn-floating light-green darken-4" th:id="'edit_' + ${alumno.id}"><i class="material-icons">mode_edit</i></a>
                <a class="btn-floating red darken-4" th:id="'remove_' + ${alumno.id}"><i class="material-icons">delete</i></a>
            </td>
        </tr>
        </tbody>
    </table>

Saludos.-

2
  • Hola @Edu! Bienvenido a StackOverflow, se me ocurren un par de cosas que podrías hacer, algunas evitando tener que replicar tantas veces esa etiqueta script. No obstante, antes de proponer nada me ha surgido una duda. Donde se encuentra ese elemento con id #show_n? No lo veo en el código que nos pasas.
    – frikinside
    Commented el 5 may. 2017 a las 8:27
  • Hola @frikinside , gracias por contestar... Actualicé el código en donde genero los el elemento #show_n , creo que ahí se entiende mejor lo que quiero hacer, agradecido desde ya!. Commented el 5 may. 2017 a las 18:04

2 respuestas 2

1

Bueno, creo que me respondré a mi mismo....

El camino que encontré para la solución fue el de agregarle a mis botones una nueva clase, "showdetalle" , y asi crear una función que utilice esa nueva clase...
el código html quedó así

<table class="striped grey lighten-5">
        <thead>
        <tr>
            <th>CI</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Telefono</th>
            <th>Acciones</th>
        </tr>
        </thead>

        <tbody>
        <tr th:each="alumno : ${alumnos}">
            <td th:text="${alumno.cedula}"></td>
            <td th:text="${alumno.nombres}"></td>
            <td th:text="${alumno.apellidos}"></td>
            <td th:text="${alumno.telefono}"></td>
            <td>
                <a class="btn-floating light-blue darken-4 showdetalle" th:id="'show_' + ${alumno.id}" th:value="${alumno.id}"><i class="material-icons">remove_red_eye</i></a> <!-- aqui se agrego la clase "showdetalle" -->
                <a class="btn-floating light-green darken-4" th:id="'edit_' + ${alumno.id}"><i class="material-icons">mode_edit</i></a>
                <a class="btn-floating red darken-4" th:id="'remove_' + ${alumno.id}"><i class="material-icons">delete</i></a>
            </td>
        </tr>
        </tbody>
    </table>

</div>
<div th:each="alumno : ${alumnos}" class="row" th:id="'card_' + ${alumno.id}" style="display: none">
    <div class="col s12 m10">
        <div class="card black darken-1">
            <div class="card-content lime-text text-darken-1">
                <span class="card-title"  th:inline="text" >
                    <b> [[${alumno.nombres}]] [[${alumno.apellidos}]] - [[${alumno.grupoSanguineo}]] </b> <a class="btn-floating black closedetalle" th:id="'close_' + ${alumno.id}" style="float: right; vertical-align: top;"><i class="material-icons">close</i></a>
                </span>
            </div>
            <div class="card-action" th:inline="text">
                <span class="white-text">
                    <span class="lime-text text-darken-1">CI:</span> [[${alumno.cedula}]] <span class="lime-text text-darken-1">Fecha de Nacimiento:</span> [[${alumno.fechaNacimiento}]] <span class="lime-text text-darken-1">Estado Civil:</span> [[${alumno.estadoCivil}]]<br/>
                    <span class="lime-text text-darken-1">email: </span> [[${alumno.email}]] <span class="lime-text text-darken-1">telefono:</span> [[${alumno.telefono}]] <span class="lime-text text-darken-1">Nacionalidad:</span> [[${alumno.nacionalidad}]]<br/>
                    <span class="lime-text text-darken-1">Direccion:</span> Calle1 y calle 2 - Asuncion<br/>
                </span>
                <span class="lime-text text-darken-1"><b>Contacto de Emergencia: [[${alumno.contactoEmergenciaNombre}]] - [[${alumno.contactoEmergenciaparentesco}]]</b></span><br/>
                <span class="white-text">
                    <span class="lime-text text-darken-1">Contacto:</span> [[${alumno.contactoEmergenciaTelefono}]] <span class="lime-text text-darken-1">Seguro Medico:</span> [[${alumno.contactoEmergenciaSeguroMedico}]]
                </span>
            </div>

        </div>
    </div>

</div>

y cree las siguientes funciones con jQuery:

$('.showdetalle').click(function () {
    var elId = $(this).attr('id');
    elId = elId.replace('show_', '#card_');
    console.log(elId);

   $(elId).fadeToggle( "fast", "linear" );

 });
$('.closedetalle').click(function () {
    var elId2 = $(this).attr('id');
    elId2 = elId2.replace('close_', '#card_');
    console.log(elId2);

    $(elId2).fadeToggle( "fast", "linear" );

});

así quedo mi código para realizar la funcion de "ocultar" y "mostrar"... gracias desde ya.-

1
  • Justo esa posibilidad era una de las que te iba a comentar. No es muy "elegante" pero es funcional. Otra posibilidad que te iba a comentar era la de utilizar un atributo propio data-idalumno para que almacenaras ahí el id y no tuvieras que hacer reemplazos de cadenas. Te lo comento por si quieres probar ese acercamiento también o incluso añadirlo a la respuesta. Por cierto, si esta respuesta (aunque sea tuya también) resuelve tu problema, marcala como aceptada.
    – frikinside
    Commented el 9 may. 2017 a las 6:48
0

tambien lo puedes hacer de esta manera saludos

  <th:block th:each="condicionComercial : ${CondicionesComerciales}">
                              <tr>
                                 <td><img th:src="@{${'/images/operadores/' + condicionComercial.idOperador + '.png'}}" width="30" height="30"/></td>
                                 <td th:text="${condicionComercial.restriccion}"></td>
                              </tr>
                           </th:block> 

saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.