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">×</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>