Fill Bootstrap modal with a div value

Asked

Viewed 859 times

0

I have a table in which the loader value inside it through PHP needs to be in the value of some inputs that are in a modal boostrap window. I’ve tried several solutions, but they don’t work. When I click on the table row, it loads the modal, but the field is empty. I intend to do so, using the table line to load the modal, and not a button to load the modal. follows the code: HTML table

<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td id="teste"><?php echo $linha['PLACA'] ?></td>
    <td><?php echo $linha['NOME'] ?></td>
    <td><?php echo $linha['ANO'] ?></td>
    <td><?php echo $linha['CPF'] ?></td>
</tr>

Modal window:

<!-- Modal editar cadastro veículo -->
        <div class="modal fade bd-example-modal-lg" id="modal_editar_veiculo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Alterar dados do veículo</h5>
              </div>
              <div class="modal-body">
                    <form class="modal_novo_item">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Nome" id="nome" name="nome">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Ano" id="ano" name="ano"> 
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-12">
                        <input type="text" placeholder="Placa" id="placa"  name="placa">
                     </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <select name="proprietario">
                        <?php listar_editar( $link ); ?>
                        </select>
                    </div>
               </div>
              </form>

                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
                <button type="button" class="btn btn-primary">Alterar</button>
                <button type="button" class="btn btn-danger">Excluir</button>
              </div>
            </div>
          </div>
        </div>

The window is open, but it doesn’t work. In another project I had already done this, with another jQuery code, however, what loaded the modal was a button. I tried to fit my code, but nothing. Grateful from now on.

Jquery that should be working:

 <!--Open modal for editions -->
<script type="text/javascript">
$(document).ready(function (){
    var valorDaDiv = $("#teste").text();    
    $("#placa").val(valorDaDiv);
 };
</script>
jquery html5 twitter-bootstrap

  • What is the html of the table?

  • And version of bootstrap?

  • The first item is the table row, on which I want to click, and open the modal. Want to see the whole table?

  • Bootstrap 4.0.0

  • it would be good because here it worked normal.

  • There must be something else going on

  • With those codes I sent? I don’t think

  • Boy, you can edit the question by putting the used libraries?

Show 3 more comments

2 answers

1

$(document).ready(function(){ 
  $("tr[data-toggle='modal']").click(function(){
    
    //valores das células da linha clicada
    var a = $(this).text();

    //split de a porque cada valor está separado por um \n (nova linha)
    var n = a.split('\n');

    //atribuindo os valores aos devidos inputs
    $("#placa").val(n[1]);
    $("#nome").val(n[2]);
    $("#ano").val(n[3]);
  });
});              
                
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.js"></script>

<table width="300">

<tr data-toggle="modal" data-target="#modal_editar_veiculo">
    <td>ASD 123</td>
    <td>Igor</td>
    <td>2018</td>
    <td>CPF</td>
</tr>

<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>QWE 456</td>
    <td>dvd</td>
    <td>19eAntigamente</td>
    <td>CPF 2</td>
</tr>

<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>AAA 001</td>
    <td>Leo</td>
    <td>2021</td>
    <td>CPF 3</td>
</tr>

</table>
    
    
 <div class="modal fade bd-example-modal-lg" id="modal_editar_veiculo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md" role="document">
     <div class="modal-content">
        <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel">Alterar dados do veículo</h5>
              </div>
              <div class="modal-body">
                    <form class="modal_novo_item">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Nome" id="nome" name="nome">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Ano" id="ano" name="ano"> 
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-12">
                        <input type="text" placeholder="Placa" id="placa"  name="placa">
                     </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <select name="proprietario">
                        <?php listar_editar( $link ); ?>
                        </select>
                    </div>
               </div>
              </form>

                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
                <button type="button" class="btn btn-primary">Alterar</button>
                <button type="button" class="btn btn-danger">Excluir</button>
              </div>
            </div>
          </div>
        </div>

  • Still doesn’t work here

  • to use version 3.1 of jquery for all other functions, and 4.0.0 pro bootstrap

  • @Igor So, see version 3.1 of jquery and boostrap 4.0.0 at http://kithomepage.com/sos/filler-modal.html. Even the answer has been edited for these libraries.

  • @Igor something you are doing wrong or some other library is conflicting.

  • It works just right

  • Well, with the files in the directory it works. But I need to use only their CDN. Could you please send me the BS and Jquery CDN links used there? I want to make sure I got the same one that you will use and work

  • are the ones in the answer

Show 2 more comments

0


You can pick up the text from the first td and play in the field of modal with the event .click:

$(document).ready(function (){
   $("[data-toggle='modal']").click(function(){
      var valorDaDiv = $("td:first", this).text();
      $("#placa").val(valorDaDiv);
   });
});

Example:

$(document).ready(function (){
   $("[data-toggle='modal']").click(function(){
      var valorDaDiv = $("td:first", this).text();
      $("#placa").val(valorDaDiv);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<table>
<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>123</td>
    <td>nome</td>
    <td>ano</td>
    <td>cpf</td>
</tr>
<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>456</td>
    <td>nome</td>
    <td>ano</td>
    <td>cpf</td>
</tr>
</table>
<!-- Modal editar cadastro veículo -->
        <div class="modal fade bd-example-modal-lg" id="modal_editar_veiculo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Alterar dados do veículo</h5>
              </div>
              <div class="modal-body">
                    <form class="modal_novo_item">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Nome" id="nome" name="nome">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Ano" id="ano" name="ano"> 
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-12">
                        <input type="text" placeholder="Placa" id="placa"  name="placa">
                     </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <select name="proprietario">
                        <?php listar_editar( $link ); ?>
                        </select>
                    </div>
               </div>
              </form>

                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
                <button type="button" class="btn btn-primary">Alterar</button>
                <button type="button" class="btn btn-danger">Excluir</button>
              </div>
            </div>
          </div>
        </div>

If you want to put each text in the modal fields, use .eq(), where .eq(0) is the text of the first td and so on:

$(document).ready(function (){
   $("tr[data-toggle='modal']").click(function(){
      var placa = $("td:eq(0)", this).text();
      var ano = $("td:eq(1)", this).text();
      var nome = $("td:eq(2)", this).text();
      $("#placa").val(placa);
      $("#nome").val(ano);
      $("#ano").val(nome);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<table>
<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>123</td>
    <td>fulano</td>
    <td>1997</td>
    <td>cpf</td>
</tr>
<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>456</td>
    <td>ciclano</td>
    <td>2000</td>
    <td>cpf</td>
</tr>
</table>
<!-- Modal editar cadastro veículo -->
        <div class="modal fade bd-example-modal-lg" id="modal_editar_veiculo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Alterar dados do veículo</h5>
              </div>
              <div class="modal-body">
                    <form class="modal_novo_item">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Nome" id="nome" name="nome">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Ano" id="ano" name="ano"> 
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-12">
                        <input type="text" placeholder="Placa" id="placa"  name="placa">
                     </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <select name="proprietario">
                        <?php listar_editar( $link ); ?>
                        </select>
                    </div>
               </div>
              </form>

                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
                <button type="button" class="btn btn-primary">Alterar</button>
                <button type="button" class="btn btn-danger">Excluir</button>
              </div>
            </div>
          </div>
        </div>

  • Still not working. It must be because of the listing in Php, about which you spoke of repeating the id. In case the 'data-toggle="modal"' is always repeated, as if it were the identifier

  • Note that I took the ids.... do not need them.

  • this Popper.min.js is not necessary!

  • It’s not no... eh that my pure bootstrap pro link is not working anymore.

  • @Leocaracciolo Take a look at this... I think you kill easy: https://answall.com/q/295309/8063

  • It is vdd, with this library of your answer have to put it. I did test and proved

  • @Leocaracciolo È, when you have some features you have to have the Popper

  • But in my answer I didn’t use it and it works well, other libraries

  • @Leocaracciolo I have a link to CDN but the pig is not working, then I put those there mermo

Show 4 more comments

Browser other questions tagged jquery html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.