Question:
I'm only wanting to run the modal if the call exists. Because it's taking a long time to open the page.
Below is the modal used:
<div class="modal fade" id="m_modal<?php echo $count ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="m-portlet m-portlet--full-height ">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Produtos Licenciados
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
</div>
</div>
<div class="m-portlet__body">
<div class="m-widget6">
<div class="m-widget6__head">
<div class="m-widget6__item">
<span class="m-widget6__caption">
Nº do Produto
</span>
<span class="m-widget6__caption">
Validade
</span>
<span class="m-widget6__caption">
Tipo
</span>
<span class="m-widget6__caption m--align-right">
Valor
</span>
</div>
</div>
<div class="m-widget6__body">
<?php
$comprador = $row['cod_comprador'];
$sqlrec = $db->prepare("SELECT pro.numero_produto, pro.validade, pro.tipo_produto, pro.valor_produto FROM prouto pro where rec.cod_comprador = '$comprador' ORDER BY pro.validade desc");
$sqlrec->execute(); $arec = 0 ;
while($rowrec=$sqlrec->fetch(PDO:: FETCH_ASSOC)){
$arec++; ?>
<div class="m-widget6__item">
<span class="m-widget6__text">
<? echo $rowrec['numero_produto']?>
</span>
<span class="m-widget6__text">
<?php echo date('d/m/Y', strtotime($rowrec['validade']));?>
</span>
<?php
switch ($rowrec['tipo_produto']) {
case '1':
echo "<span class='m-widget6__text'>Avulsa</span>";
break;
case '2':
echo "<span class='m-widget6__text'>Mensal</span>";
break;
}
?>
<span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
R$<? echo str_replace('.', ',', $rowrec['valor_produto'])?>
</span>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Here I call Modal
<a href="javascript:;" class="btn btn-secondary m-btn m-btn--icon m-btn--icon-only" data-toggle="modal" data-target="#m_modal<?php echo $count++ ?>">
<i class="la la-barcode"></i>
</a>Answer:
You can do this by calling an Ajax to load its content into the modal content.
First thing is to leave only 1 modal on the page. This single modal will serve for all the buttons that will open it, and leave only until the div class="modal-content" . The rest of the modal body will be sent by PHP in the Ajax request.
Modal:
<div class="modal fade" id="m_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
</div>
</div>
</div>
In the buttons, include two dataset attributes: one for the code that will be used in the database query ( data-codigo ) and another to identify what type of information will be loaded ( data-tipo ), because depending on the type, the content of the modal may vary.
The data-* values will be loaded by PHP, as you've been doing. The values below (10 and 20) are for example only. The "types" you should also get by PHP according to the button type.
Buttons:
↓ ↓
<a data-codigo="10" data-tipo="recibos" href="javascript:;" class="btn btn-secondary m-btn m-btn--icon m-btn--icon-only" data-toggle="modal" data-target="#m_modal">
<i class="la la-barcode"></i>
</a>
↓ ↓
<a data-codigo="20" data-tipo="registro" href="javascript:;" class="btn btn-secondary m-btn m-btn--icon m-btn--icon-only" data-toggle="modal" data-target="#m_modal">
<i class="la la-barcode"></i>
</a>
Script:
<script>
$('#m_modal').on('shown.bs.modal', function(e){ // ação quando a modal foi aberta
var codigo = e.relatedTarget.dataset.codigo; // pega o código para consulta ao BD
var tipo = e.relatedTarget.dataset.tipo; // pega o tipo de informação
// insere na modal um aviso de que está carregango
$(".modal-content").html("<div class='p-3'>Carregando...</div>");
$.ajax({
url: 'pagina.php', // página a ser consultada
dataType: "html",
type: "POST",
data: {
codigo: codigo, // no PHP você pega o valor com $_POST['codigo']
tipo: tipo // no PHP você pega o valor com $_POST['tipo']
},
success: function(data){
$(".modal-content", e.target).html("data"); // insere na modal o conteúdo HTML retornado
},
error: function(){
$(".modal-content", e.target).html("<div class='p-3'>Algum erro ocorreu!</div>");
}
});
})
</script>
The script above will take all the necessary information and send it to pagina.php (use whatever name you like) which should return the HTML code, such as:
<div class="m-portlet m-portlet--full-height ">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Produtos Licenciados
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
</div>
</div>
<div class="m-portlet__body">
<div class="m-widget6">
<div class="m-widget6__head">
<div class="m-widget6__item">
<span class="m-widget6__caption">
Nº do Produto
</span>
<span class="m-widget6__caption">
Validade
</span>
<span class="m-widget6__caption">
Tipo
</span>
<span class="m-widget6__caption m--align-right">
Valor
</span>
</div>
</div>
<div class="m-widget6__body">
<?php
$comprador = $row['cod_comprador'];
$sqlrec = $db->prepare("SELECT pro.numero_produto, pro.validade, pro.tipo_produto, pro.valor_produto FROM prouto pro where rec.cod_comprador = '$comprador' ORDER BY pro.validade desc");
$sqlrec->execute(); $arec = 0 ;
while($rowrec=$sqlrec->fetch(PDO:: FETCH_ASSOC)){
$arec++; ?>
<div class="m-widget6__item">
<span class="m-widget6__text">
<? echo $rowrec['numero_produto']?>
</span>
<span class="m-widget6__text">
<?php echo date('d/m/Y', strtotime($rowrec['validade']));?>
</span>
<?php
switch ($rowrec['tipo_produto']) {
case '1':
echo "<span class='m-widget6__text'>Avulsa</span>";
break;
case '2':
echo "<span class='m-widget6__text'>Mensal</span>";
break;
}
?>
<span class="m-widget6__text m--align-right m--font-boldest m--font-brand">
R$<? echo str_replace('.', ',', $rowrec['valor_produto'])?>
</span>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
The HTML above is just the inner part of the div class="modal-content" , which is the HTML of interest.
In place of $comprador = $row['cod_comprador']; you should use the value sent by Ajax, for example, $comprador = $_POST['codigo']; .
On the PHP page pagina.php you should do an if with the tipo value sent by Ajax ( $_POST['tipo'] ) to know what the HTML structure is for each case.