3

Estou querendo executar o modal somente se existir a chamada. Pois está demorando muito para abrir a página.

Abaixo segue o modal utilizado:

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

Aqui eu chamo o 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>

12
  • 3
    Utilize Ajax. Toda vez que você quiser abrir determinado modal, basta fazer uma requisição para uma nova página capturar, formatar e retornar o modal com as informações (tudo isso via JS). Commented 3/06/2018 às 19:07
  • Certo. Você tem algum exemplo ? Commented 3/06/2018 às 21:24
  • 1
    São vários modais na página?
    – Sam
    Commented 3/06/2018 às 22:04
  • 1
    de onde vem essa variavel $count?
    – user60252
    Commented 3/06/2018 às 22:13
  • Então. estou usando um datatable com 3 mil registro. para cada linha ele tem o botão que chama um modal com informações de uma outra tabela, que tem ligação. Ele funciona perfeitamente do modo atual. só que demora 17 segundos para abrir a página, pois está lendo também a sql desse modal. Como ela não é exibida de início, é só para aparecer os dados ao clicar no botão. Fiz alguns exemplos, mas não deu certo. Commented 3/06/2018 às 22:14

1 Resposta 1

1

Pode fazer desta forma chamando um Ajax para carregar o respectivo conteúdo no conteúdo da modal.

Primeira coisa é deixar apenas 1 modal na página. Essa única modal servirá para todos os botões que forem abri-la, e deixe apenas até a div class="modal-content". O resto do corpo da modal será enviado pelo PHP na requisição do Ajax.

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>

Nos botões, inclua dois atributos dataset: um para o código que servirá na consulta ao banco de dados (data-codigo) e outro para identificar que tipo de informação será carregada (data-tipo), pois dependendo do tipo, o conteúdo da modal pode variar.

Os valores dos data-* você irá carregar pelo PHP, como vem fazendo. Os valores abaixo (10 e 20) são apenas para exemplo. Os "tipos" também você deve pegar pelo PHP de acordo com o tipo do botão.

Botões:

          ↓               ↓
<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>

O script acima irá pegar todas as informações necessárias e enviar para pagina.php (use o nome que desejar) que deverá retornar o código em HTML, tal como:

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

O HTML acima é apenas a parte interna da div class="modal-content", que é o HTML que interessa.

No lugar de $comprador = $row['cod_comprador']; você deverá usar o valor enviado pelo Ajax, por exemplo, $comprador = $_POST['codigo'];.

Na página PHP pagina.php você deverá fazer um if com o valor tipo enviado pelo Ajax ($_POST['tipo']) para saber qual a estrutura de HTML para cada caso.

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 .