How to fill input data in BOOTSTRAP POPOVER

Question

Personal I have a code with a modal that contains a Bootstrap popover and I would like this information balloon to contain the data of these inputs.

Currently I can already get the data of the variables of php and move to javascript and when the modal is opened I can view this data in the fields. In the popover I can’t do the same.

Follows the code:

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

Answer 1

You have to use the modal and Popover events:

Modal: shown.bs.modal (when the modal becomes visible)
Of the Popover: shown.bs.popover (when the Popover is visible)

Using a separate function that will be called by the two events above, just pass to it the button that opened the modal, from where the information will be taken data-*.

Only you’re duplicating the ids #id_codigo, #id_nome etc., beyond which you put the names of data-* different:

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

And in the Popover and in the modal put data-nome and data-endereco.

To fix this, exchange id’s for class and adjust the names of data-* (as I did in the example below):

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

Answer 2

I’ll leave one more alternative, you can use the method content of function popover and use strings template to insert the fields into the content method, then just use expressions passing the values you took from 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>

Answer 3

$('#idpopover').popover({
    trigger: 'manual',
    placement: 'right',
    content: function() {
       var message = "A tua menssagem que seria o id da variabel"+ id_codigo;
         return message;
    }
});

I hope I’ve helped!