define dynamic variables in jQuery, with Thymeleaf

Question

define dynamic variables in jQuery, with Thymeleaf

Navigation

#1 by (1 votes)

1

Good,
I am trying to dynamically call the "id" in the tags with the "th: each", as follows.

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

the result I expect (in jQuery ), iterated, would be as follows:

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

is there any way to concatenate the value of the object $ {pupil.id} in jquery so that it is dynamic ???

The id="show_n" also dynamically generated in a table ...

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

Greetings .-

jquery thymeleaf materialize

asked by Edu Appleyard 05.05.2017 в 07:02

source

1 answer

Zoom, rotate and move inside an ImageView on Android The 'addEventListener' property of null can not be read

score 1 · Accepted Answer

Well, I think I'll answer myself ...

The path I found for the solution was to add a new class to my buttons, "showdetalle", and thus create a function that uses that new class ...
the html code stayed like this

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

and create the following functions with 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" );

});

so I leave my code to perform the function of "hide" and "show" ... thanks from now .-