4

Pessoal possuo um código com um modal que contém um Bootstrap popover e gostaria que nesse balão de informações, contenha os dados desses inputs.

Atualmente já consigo pegar os dados das variáveis do php e passar para o javascript e quando o modal é aberto consigo visualizar esses dados nos campos. No popover não consigo fazer o mesmo.

Segue o código:

$(function () { $(".glyphicon-search").click(function () {

    var id_codigo = $(this).data('codigo');
    var id_nome = $(this).data('nome');
    var id_endereco = $(this).data('endereco');

    $(".modal-body #id_codigo").val(id_codigo);
    $(".modal-body #id_nome").val(id_nome);
    $(".modal-body #id_endereco").val(id_endereco);
    })
    })

    $(document).ready(function(){
    $('[data-toggle="popover"]').popover({html: true});   
 });

HTML


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <?php
    $codigo = 1;
    $nome = "Zé";
    $endereco = "Rua";
    ?>

    <br>
    <br>
    <br>
    <br>

    <div class="container">
    <button type="button" class="btn btn-primary" data-toggle='modal' data-target='#Alt' 
    data-codigo='$codigo' 
    data-situacao='$nome'
    data-distribuidora='$endereco' 
    >MODAL</button>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="Alt" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body">
    <p>
    <input readonly id='id_codigo' type='text'><br><br>
    <input readonly id='id_nome' type='text'><br><br>
    <input readonly id='id_endereco' type='text'><br><br>
    <button
    id='id_button' type="button" class="btn btn-info" data-position="top-left" title="Contato" 
    data-toggle="popover" 
    data-placement="down" data-content="Nome: <input readonly id='id_nome' style='Border:0' type='text'>
    <br>Endereço:<input readonly readonly id='id_nome' style='Border:0' type='text'>
    <br>Contato:<input readonly readonly id='id_endereco' style='Border:0' type='text'>">Contato</button></p>
    </div>
    </div>

    </div>
    </div>

3 Respostas 3

0

Vou deixar mais uma alternativa, vc pode utilizar o método content da função popover e utilizar template strings para inserir os campos dentro do método content, aí é só utilizar expressões passando os valores que pegou do Php:

$(function () { 
  $(".btn-primary").on('click', function () {

    var id_codigo = $(this).data('codigo');
    var id_nome = $(this).data('nome');
    var id_endereco = $(this).data('endereco');

    $(".modal-body #id_codigo").val('1');
    $(".modal-body #id_nome").val('Zé');
    $(".modal-body #id_endereco").val('Rua');
  })
})
// apenas para exemplo
let valor1 = 'Bla bla';
let valor2 = 'Testes';
let valor3 = 'Outro Teste';

$(document).ready(function(){
  $('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
      return `Nome: <input id='id_nome' readonly style='Border:0' type='text' value='${valor1}'>
    <br>Endereço: <input id='id_endereco' readonly style='Border:0' type='text' value='${valor2}'>
    <br>Contato: <input id='id_codigo' readonly style='Border:0;' value='${valor3}' type='text'>` 
     }
  });   
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
<?php
$codigo = 1;
$nome = "Zé";
$endereco = "Rua";
?>

<br>
<br>
<br>
<br>

<div class="container">
<button type="button" class="btn btn-primary" data-toggle='modal' data-target='#Alt' 
data-codigo='$codigo' 
data-situacao='$nome'
data-distribuidora='$endereco' 
>MODAL</button>
</div>
<!-- Modal -->
<div class="modal fade" id="Alt" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>
<input readonly id='id_codigo' type='text'><br><br>
<input readonly id='id_nome' type='text'><br><br>
<input readonly id='id_endereco' type='text'><br><br>
<button
id='id_button' type="button" class="btn btn-info" data-position="top-left" title="Contato" 
data-toggle="popover" 
data-placement="down">Contato</button></p>
</div>
</div>

</div>
</div>

2
  • Opa. Ótimo estou quase lá. Eu gostaria que essas variáveis " let valor1" tivessem o mesmo valor do id que estão contidos nos inputs. Como faço?
    – Carlos
    Commented 12/09/2019 às 19:06
  • Do mesmo jeito que está populando os inputs do modal pode popular o popover, só que os valores tem que estarem dentro de variáveis tipo let id_nome = valordoPHP e no input do popover vc coloca ${id_nome}.
    – LeAndrade
    Commented 12/09/2019 às 19:14
0
$('#idpopover').popover({
    trigger: 'manual',
    placement: 'right',
    content: function() {
       var message = "A tua menssagem que seria o id da variabel"+ id_codigo;
         return message;
    }
});

Espero ter ajudado!

0

Você tem que usar os eventos da modal e do popover:

Da modal: shown.bs.modal (quando a modal fica visível)
Do popover: shown.bs.popover (quando o popover fica visível)

Utilizando uma função separada que será chamada pelos dois eventos acima, basta você passar para ela o botão que abriu a modal, de onde serão tiradas as informações dos data-*.

Só que você está duplicando as ids #id_codigo, #id_nome etc., além do que você colocou os nomes dos data-* diferentes:

data-codigo='$codigo' 
data-situacao='$nome'
data-distribuidora='$endereco'

E no popover e na modal colocou data-nome e data-endereco.

Para corrigir isso, troque os id's por class e ajuste os nomes dos data-* (como fiz no exemplo abaixo):

$(function () {
   
   function contatos(e){
      
      e = $(e);
      var id_codigo = e.data('codigo');
      var id_nome = e.data('situacao');
      var id_endereco = e.data('distribuidora');

      $(".id_codigo").val(id_codigo);
      $(".id_nome").val(id_nome);
      $(".id_endereco").val(id_endereco);

   }
   
   $('#Alt').on('shown.bs.modal', function(e){
      // passa o botão que abriu a modal
      e = e.relatedTarget;
      contatos(e);
   });

   $('[data-toggle="popover"]')
   .popover({html: true})
   .on('shown.bs.popover', function(){
      // busca o botão que abriu a modal pelo atributo data-target
      var e = $("[data-target='#"+ $(this).closest(".modal").attr("id")+"']");
      contatos(e);
   });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container">
   <button type="button" class="btn btn-primary" data-toggle='modal' data-target='#Alt' 
   data-codigo='1' 
   data-situacao='Zé'
   data-distribuidora='Rua' 
   >MODAL</button>
</div>
<!-- Modal -->
<div class="modal fade" id="Alt" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>
<input readonly class='id_codigo' type='text'><br><br>
<input readonly class='id_nome' type='text'><br><br>
<input readonly class='id_endereco' type='text'><br><br>
<button
id='id_button' type="button" class="btn btn-info" data-position="top-left" title="Contato" 
data-toggle="popover" 
data-placement="down" data-content="Nome: <input readonly class='id_nome' style='Border:0' type='text'>
<br>Endereço:<input readonly readonly class='id_endereco' style='Border:0' type='text'>
<br>Contato:<input readonly readonly class='id_codigo' style='Border:0' type='text'>">Contato</button></p>
</div>
</div>

</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .