Run modal only if there is a call

Asked

Viewed 123 times

3

I want to run the modal only if there is the call. Because it is taking too long to open the page.

Below follows 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 the 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>

  • 3

    Utilize Ajax. Every time you want to open determined modal, just make a request for a new page to capture, format and return the modal with the information (all this via JS).

  • Right. You have some example ?

  • 1

    There are several modals on the page?

  • 1

    where this variable comes from $count?

  • So. I’m using a datatable with 3,000 records. for each row it has the button that calls a modal with information from another table, which has link. It works perfectly in the current mode. only it takes 17 seconds to open the page, as you are also reading the sql of this modal. Since it is not displayed at the beginning, it is only to show the data when clicking the button. I made some examples, but it did not work.

  • This variable use within the tbody If I do not put this info, it does not present the data per line. That is, the modal comes with the same information on all lines.

  • @Robsonfreitas On the page https://cursos.alura.com.br/forum/topico-load-modal-ajax-47058 (Rodrigo Adolfo de Paula’s reply) he posted a nice example, but you can use a library if you can’t create the function. http://jquerymodal.com/#example-4

  • Okay, I’ll take a look.

  • So each button has a modal?

  • I fear as I send you an example by link ?

  • It’s not necessary.

  • http://riftec.com.br/ranking/temp.php In the action column, the left button. Limited to 5 records. but that would be the password.

Show 7 more comments

1 answer

1


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

First thing is to leave only 1 modal on the page. This single modal will serve for all buttons that 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>

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

The values of data-* you will load in PHP, as you have been doing. The values below (10 and 20) are for example only. The "types" you should also pick up by PHP according to the type of 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 necessary information and send to pagina.php (use the 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 internal part of the div class="modal-content", which is the HTML that matters.

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

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.