Execute modal only if there is a call

3

I want to execute the modal only if the call exists. Because it's taking too long 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>
    
asked by anonymous 03.06.2018 / 21:00

1 answer

1

You can do this by calling an Ajax to load its contents into modal content.

First thing is to leave only 1 modal on the page. This only mode will be used for all buttons that open it, and only leave it up to 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>

On the buttons, add two dataset attributes: one for the code that will serve the database query ( data-codigo ) and another to identify what kind of information will be loaded ( data-tipo ) , because depending on the type, the modal content may vary.

The values of data-* will load with PHP, as you have been doing. The values below (10 and 20) are for example only. The "types" you should also get by PHP according to the type of the button.

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 above script will take all the necessary information and send it to pagina.php (use whatever name you want) that 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 inside of div class="modal-content" , which is HTML that matters.

Instead of $comprador = $row['cod_comprador']; you should use the value sent by Ajax, for example, $comprador = $_POST['codigo']; .

On the pagina.php PHP page you should make a if with the tipo value sent by Ajax ( $_POST['tipo'] ) to know the HTML structure for each case.

    
04.06.2018 / 01:07