Pass values from a table to a modal dialog (JSP)

Question

Pass values from a table to a modal dialog (JSP)

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Good afternoon everyone! I'm trying to pass values from a table to a modal window, but I'm not getting it ... I've tried something jquery, but I do not know what I might be doing wrong ... I will post the code, which is working, but without changes I made in the attempts ...

WhenIclickonchange,Iwouldliketotakethevaluesandmovetothedialog.

Thankyouallforthehelp:)

<c:iftest="${fn:length(lista) > 0 }">
                    <table class="table table-hover">
                        <tr>

                            <th >Código</th>
                            <th>Nome</th>
                            <th>Descrição</th>
                            <th>Medida</th>
                            <th>Fornecedor</th>
                            <th>Quantidade Mínima</th>
                            <th>Quantidade Máxima</th>
                            <th>Estoque</th>
                            <th>Categoria</th>
                            <th>Preço</th>
                            <th></th>
                        </tr>
                        <c:forEach items="${lista }" var="mat">
                            <tr>

                                <td>${mat.codigo }</td>
                                <td>${mat.nome }</td>
                                <td>${mat.descricao }</td>
                                <td>${mat.medida }</td>
                                <td>${mat.fornecedor }</td>
                                <td>${mat.qtd_Min }</td>
                                <td>${mat.qtd_Max }</td>
                                <td>${mat.estoque }</td>
                                <td>${mat.categoria.categoria }</td>
                                <td>${mat.preco }</td>

                                <td><a href="#DialogAlterarMaterial" class="btn btn-xs btn-info" data-toggle="modal">Alterar</a> 
                                    <a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>

                </c:if>

     <!--  ----------------------------------------------Painel para Alteração---------------------------------------------------------------------------- -->

                      <div id="DialogAlterarMaterial" class="modal fade"
                            aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
                            tabindex="-1" style="display: none;">

                            <div class="modal-dialog" style="width: 800px;">
                                <div class="modal-content">

                                    <div class="modal-header">
                                        <button class="close" aria-hidden="true" data-dismiss="modal"
                                            type="button">×</button>
                                        <h4 class="modal-title">Cadastro de Materiais</h4>
                                    </div>
                                    <div class="modal-body" style="min-height: 500px;">

                                        <form action="alterar.html" method="post">
                                            <div class="form-group" style="width: 80px; float: left;margin-top: 0%">
                                                <label for="codigo">Código</label> <input name="codigo"
                                                    class="form-control" type="text" value="${mat.codigo }">
                                            </div>
                                            <div class="form-group"
                                                style="width: 300px; float: left; margin-top: 9%; margin-left: -10.5%">
                                                <label for="nome">Nome</label> <input name="nome"
                                                    class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 430px; float: left; margin-left: 2%; margin-top: 9%;">
                                                <label for="descricao">Descrição</label> <input
                                                    name="descricao" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 130px; float: left; margin-left: 0%; margin-top: 0%">
                                                <label for="unimed">Unidade de Medida</label> <input
                                                    name="unimed" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 155px; float: left; margin-left: 2%;margin-top: 0%">
                                                <label for="preco">Preço</label> <input name="preco"
                                                    class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 430px; float: left; margin-left: 2%;margin-top: 0%">
                                                <label for="fornecedor">Fornecedor</label> <input
                                                    name="fornecedor" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 85px; float: left; margin-left: 0%;">
                                                <label for="qtdMin">Qtd. Mínima</label> <input
                                                    name="qtd_Min" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 85px; float: left; margin-left: 2%;">
                                                <label for="qtdMax">Qtd. Máxima</label> <input
                                                    name="qtd_Max" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 85px; float: left; margin-left: 2%;">
                                                <label for="estoque">Estoque</label> <input
                                                    name="estoque" class="form-control" type="text">
                                            </div>
                                            <div class="form-group"
                                                style="width: 130px; float: left; margin-left: -38%;margin-top: 10%;">
                                                <label for="categoria">Categoria</label> <select 
                                                    name="categoria" class="form-control" type="text" onchange='CheckCat(this.value);'>
                                                    <option selected disabled hidden>Categoria</option>
                                                    <c:forEach items="${cBean.listarCategoria}" var="cat">
                                                    <option  value="${cat.categoria }">${cat.categoria }</option>



                                                    </c:forEach>
                                                </select>
                                            </div>
                                            <div class="form-group"
                                                style="width: 130px; float: left; margin-left: -19%;display: none; margin-top: 10%" id="Outros">
                                                <label for="catOutros">Outros</label> <input name="catOutros"
                                                    class="form-control" type="text" >
                                            </div>

                                            <div style="width: 30px; margin-top: 25%;float: right;margin-right: 8%">
                                                <button class="btn btn-primary" type="submit">Cadastar</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>




     <!--  --------------------------------------------Fim do Painel para Alteração---------------------------------------------------------------------------- -->

javascript java jquery jsp

asked by anonymous 06.11.2016 / 19:18

2 answers

0

Change this line in the code by adding .children() that will be round

Before:

var linha = $('#linha' + id); //temos o <tr> atribuidos a variavel linha

After:

var linha = $('#linha' + id).children(); //temos o <tr> atribuidos a variavel linha

19.09.2017 / 22:00

How to configure multiple Nginx on a server? Arrange accented words in a list

score 1 · Accepted Answer

To solve this problem you can adopt several alternatives, among them:

Generate a unique identifier for each <td>
Retrieve the fields <td> in order according to <tr> parent .

I will comment a little on the two and give you a sample code for you to locate.

Option 1 - Generate unique identifier for each <td>

You need to make sure that each row in the column has a unique identifier, so you can use it to distinguish the <td> . In this case I'll use the código field.

It would look something like this:

<table class="table table-hover">
<tr>
    <th >Código</th>
    <th>Nome</th>
    <th>Descrição</th>
    <th>Medida</th>
    <th>Fornecedor</th>
    <th>Quantidade Mínima</th>
    <th>Quantidade Máxima</th>
    <th>Estoque</th>
    <th>Categoria</th>
    <th>Preço</th>
    <th></th>
</tr>
<c:forEach items="${lista}" var="mat">
    <tr>
        <td id="codigo${mat.codigo}">${mat.codigo }</td>
        <td id="nome${mat.codigo}">${mat.nome }</td>
        <td id="descricao${mat.codigo}">${mat.descricao }</td>
        <td id="medida${mat.codigo}">${mat.medida }</td>
        <td id="fornecedor${mat.codigo}">${mat.fornecedor }</td>
        <td id="qtd_Min${mat.codigo}">${mat.qtd_Min }</td>
        <td id="qtd_Max${mat.codigo}">${mat.qtd_Max }</td>
        <td id="estoque${mat.codigo}">${mat.estoque }</td>
        <td id="categoria${mat.codigo}">${mat.categoria.categoria }</td>
        <td id="preco${mat.codigo}">${mat.preco }</td>
        <td><a href="#DialogAlterarMaterial" class="btn btn-xs btn-info alterar" data-toggle="modal" data-id="${mat.codigo}">Alterar</a>
            <a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
        </td>
    </tr>
</c:forEach>

In the end, the html generated will look like this:

<!-- ... -->
<td id="codigo0202">0202</td>
<td id="nome0202">teste</td>
<td id="descricao0202">teste</td>
<!-- ... -->

Then, with JQuery you can retrieve these values through the data-id attribute added on the button and thus will have an identifier of each <td> :

$(".alterar").on('click', function(){
   var id = $(this).data('id'); //recuperar qual o id da linha
   //agora vamos usar o id da linha para recuperar cada campo..
   var nome = $('#nome' + id).text(); //vai retornar nome da linha do botão
   var descricao = $('#descricao' + id).text(); //vai retornar descricao da linha do botao
   //..assim por diante..
   //agora voce pode jogar esses valores no seu modal
   //depois de jogar tudo, voce pode exibir seu modal manualmente:
   $("#DialogAlterarMaterial").modal();
});

Option 2 - Retrieve values according to parent <tr>

The other alternative is to retrieve the values according to the parent of the button. Logic is equivalent to the logic explained above, but simpler. You only need this time to add the id of the line to the <tr> tag which is a container for the entire line.

It would look something like this:

<table class="table table-hover">
    <tr>
        <th >Código</th>
        <th>Nome</th>
        <th>Descrição</th>
        <th>Medida</th>
        <th>Fornecedor</th>
        <th>Quantidade Mínima</th>
        <th>Quantidade Máxima</th>
        <th>Estoque</th>
        <th>Categoria</th>
        <th>Preço</th>
        <th></th>
    </tr>
    <c:forEach items="${lista}" var="mat">
        <tr id="linha${mat.codigo}">
            <td>${mat.codigo }</td>
            <td>${mat.nome }</td>
            <td>${mat.descricao }</td>
            <td>${mat.medida }</td>
            <td>${mat.fornecedor }</td>
            <td>${mat.qtd_Min }</td>
            <td>${mat.qtd_Max }</td>
            <td>${mat.estoque }</td>
            <td>${mat.categoria.categoria }</td>
            <td>${mat.preco }</td>
            <td><a href="#DialogAlterarMaterial" class="btn btn-xs btn-info alterar" data-toggle="modal" data-id="${mat.codigo}">Alterar</a>
                <a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
            </td>
        </tr>
    </c:forEach>
</table>

What's interesting to note in this code is the line: <tr id="linha${mat.codigo}">... You are no longer leaving each tag <td> unique in the table, but rather each parent or container of <td> ie <tr> .

So you can retrieve the values of each td using JQuery as follows:

$(".alterar").on('click', function(){
       var id = $(this).data('id'); //recuperar qual o id da linha
       //agora vamos usar o id para recuperar a linha inteira ou o <tr>
       var linha = $('#linha' + id); //temos o <tr> atribuidos a variavel linha
       var nome = $(linha[1]).text(); //vai retornar nome da linha do botão
       var descricao = $(linha[2]).text();.text(); //vai retornar descricao da linha do botao
       //..assim por diante..
       //agora voce pode jogar esses valores no seu modal
       //depois de jogar tudo, voce pode exibir seu modal manualmente:
       $("#DialogAlterarMaterial").modal();
    });

In the code above, you may notice that the line will contain a JQuery object that has all <td> 's inside it as indexes of a Array . Simply access these indices to retrieve each field you need to set up your modal.

I hope I have helped.