PHP open modal with results

Asked

Viewed 1,191 times

1

I am developing a consultation screen where presents the collected water. A list of collections appears and on the collection side the display button. When you click on view you have to open the modal, but you are not loading the data in the modal: VIEW:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html> 
<head>

 <?php include_once("application/views/_includes/head.php"); ?>

</head>

<body>


  <div id="wrapper">

     <?php include_once("application/views/_includes/navigation.php"); ?>
        <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav side-nav">
                <li class="active">
                    <a href="<?php  echo base_url(); ?>"><i class="glyphicon glyphicon-home"></i> Home</a>
                </li>
                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#dropadministrativo"><i class="fa fa-fw fa-gears"></i> Administrativo<i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="dropadministrativo" class="collapse">
                        <li>
                            <a href="<?php  echo base_url('adm_controle_acesso'); ?>">Controle de Acessos</a>
                        </li>
                        <li>
                            <a href="<?php  echo base_url('adm_dados_coletas'); ?>">Dados para Coletas</a>
                        </li>
                        <li>
                            <a href="<?php  echo base_url('adm_dados_gerais'); ?>">Dados Gerais</a>
                        </li>


                    </ul>
                </li>
                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#dropconsultas"><i class="fa fa-fw fa-search"></i> Consultas<i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="dropconsultas" class="collapse">
                        <li>
                            <a href="<?php  echo base_url('consulta_coletas'); ?>">Coletas</a>
                        </li>
                    </ul>
                </li>


                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#dropcadastros"><i class="fa fa-fw fa-edit"></i> Cadastros <i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="dropcadastros" class="collapse">
                        <li>
                            <a href="<?php  echo base_url('listar_coletas'); ?>">Coletas</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="<?php  echo base_url('exportacao_coletas'); ?>"><i class="glyphicon glyphicon-log-out"></i> Exportação</a>             
                </li>

                <li>
                    <a href="<?php  echo base_url('georreferenciamento'); ?>"><i class="glyphicon glyphicon-globe"></i> Georreferenciamento</a>
                </li>
                 <!-- JOnatas 2017 -->

                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#dropdadosbiologicos"><i class="fa fa-fw fa-gears"></i> Dados Biológicos<i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="dropdadosbiologicos" class="collapse">
                        <li>
                            <a href="<?php  echo base_url('listar_pontos_coletas'); ?>">Pontos de Coleta</a>
                        </li>
                        <li>
                            <a href="<?php  echo base_url('listar_coletas_fauna'); ?>">Coletas</a>
                        </li>
                        <li>
                            <a href="<?php  echo base_url('consulta_coletas_fauna'); ?>">Consultas</a>
                        </li>      
                 <!-- JOnatas 2017 -->  
            </ul>
    </div>
    <!-- /.navbar-collapse -->
  </nav>


  <div id="page-wrapper">

    <div class="container-fluid">

      <!-- Page Heading -->
      <div class="row">
        <div class="col-lg-12">
          <h1>
            Consultar Coletas Fauna
          </h1>
          <ol class="breadcrumb">
            <li>
              <i class="glyphicon glyphicon-home"></i>   <a href="<?php  echo base_url(); ?>">Home</a>
            </li>
            <li class="active">
              <i class="glyphicon glyphicon-search"></i> Consultas
            </li>
          </ol>
        </div>
      </div>
      <!-- /.row -->

      <div class="panel panel-default">
        <div class="panel-heading"><b>Filtros</b></div>
        <?php 
        $attr = array("class" => "form", "role"=>"form", "id"=>"pesquisa", "name" => "pesquisa");
        echo form_open("",$attr); ?>
        <br>
        <div class="container">
          <div class="row">
            <div class="col-md-3">
              <label>Data Inicial </label>
              <input class="form-control" type="date" value="<?php echo set_value("data_coleta_ini") ?>" name="data_coleta_ini" > 
            </div>
            <div class="col-md-3">
              <label>Data Final</label>
              <input class="form-control" type="date" value="<?php echo set_value("data_coleta_fim") ?>" name="data_coleta_fim" >
            </div>
            <div class="col-md-2">    
              <label>Hora Inicio</label>
              <input class="form-control" type="time" value="<?php echo set_value("hora_coleta_ini") ?>" name="hora_coleta_ini" >
            </div>
            <div class="col-md-2">    
              <label>Hora Fim</label>
              <input class="form-control" type="time" value="<?php echo set_value("hora_coleta_fim") ?>" name="hora_coleta_fim" >
            </div>
          </div>
          <div class="row">
            <br>
           <div class="col-md-3"><label>Tipo de Coleta</label>
              <select class="form-control" name="tpcoleta" >
                <option>Selecione </option>
                <?php 
                foreach ($grupos as $grupo):
                  echo '<option value="'.$grupo->id_tpcoleta.'"';
                if ($grupo->id_tpcoleta == set_value("tpcoleta"))
                  echo ' selected=selected';

                echo '>'.$grupo->tpcoleta.'</option>';


                endforeach;
                ?>
              </select>
            </div>
            <div class="col-md-7">    <label>Local da Coleta</label>
              <input class="form-control" type="text" value="<?php echo set_value("local_da_coleta") ?>" name="local_da_coleta" >
            </div>
          </div><br>
          <div class="row">
            <div class="col-md-4"> <input class="btn btn-success" type="submit" value="Consultar">
            </div>
          </div><br>
        </div>

        <?php echo form_close(); ?>

      </div>


      <!-- /.container-fluid -->
      <div class="panel panel-default">
        <div class="panel-heading"><b>Coletas Fauna</b></div>
        <div class="panel-body">
          <div class="table-responsive">
            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">   
              <thead>
                <tr >
                  <th>Código</th>
                  <th>Tipo da coleta</th>
                  <th>Local da coleta</th>
                  <th>Data da coleta</th>
                  <th>Horário</th>
                  <th>Horário de Verão</th>
                  <th>Informações<br>Adicionais</th>
                </tr >
              </thead>
              <tbody>
                  <?

                  if ($resultado > "")
                    foreach ($resultado as $grupo):
                    echo '<tr>';
                    echo '<td>'.($grupo->id_coleta).'</td>';
                    echo '<td>'.($grupo->tpcoleta).'</td>';
                    echo '<td>'.($grupo->local).'</td>';
                    echo '<td>'.date('d/m/Y', strtotime($grupo->data_coleta)).'</td>';
                    echo '<td>'.($grupo->hora_coleta).'</td>';
                    if($grupo->fuso_horario == 0)
                    {
                      echo '<td>'.'<label>Não</label>'.'</td>';


                    }else{
                     echo '<td>'.'<label>Sim</label>'.'</td>';
                   }

                   echo '<td>'.'<button type="button" class="btn btn-primary modalColetasFauna" data-toggle="modal" data-target="#VisualizarColetaFauna" value="' . $grupo->id_coleta . '"> 
                   Visualizar
                 </button>'.'</td>';
              //echo '<td>'.($grupo->hora_coleta).'</td>';
                 echo '</tr>';
                 endforeach; 
                 ?> 
              </tbody>
            </table>
          </div>
        </div>
      </div>  
    </div>

    <!-- /#page-wrapper -->
  <div class="modal fade bs-example-modal-lg" id="VisualizarColetaFauna" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body" id="VisualizarColetaFaunaBody">
              Aguarde carregando...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
  </div>

  <!-- /#wrapper -->

  <!-- jQuery -->
  <script src="assets/js/jquery.js"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="assets/js/bootstrap.min.js"></script>

  <!-- Morris Charts JavaScript -->
  <script src="<?php  echo base_url(); ?>assets/js/plugins/morris/raphael.min.js"></script>
  <script src="<?php  echo base_url(); ?>assets/js/plugins/morris/morris.min.js"></script>
  <script src="<?php  echo base_url(); ?>assets/js/plugins/morris/morris-data.js"></script>

  <!-- jQuery -->
  <script src="<?php  echo base_url(); ?>assets/vendor/jquery/jquery.min.js"></script>
  <!-- Bootstrap Core JavaScript -->
  <script src="<?php  echo base_url(); ?>assets/vendor/bootstrap/js/bootstrap.min.js"></script>
  <!-- Metis Menu Plugin JavaScript -->
  <script src="<?php  echo base_url(); ?>assets/vendor/metisMenu/metisMenu.min.js"></script>
  <!-- DataTables JavaScript -->
  <script src="<?php  echo base_url(); ?>assets/vendor/datatables/js/jquery.dataTables.min.js"></script>
  <script src="<?php  echo base_url(); ?>assets/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
  <script src="<?php  echo base_url(); ?>assets/vendor/datatables-responsive/dataTables.responsive.js"></script>



  <!-- Page-Level Demo Scripts - Tables - Use for reference -->
  <script>
    $(document).ready(function() {
      $('#dataTables-example').DataTable({
        responsive: true
      });
    });

    $('.modalColetaFauna').on('click', function() {
      $('#VisualizarColetaFaunaBody').html("Aguarde carregando...");
      $.ajax({
        type: "GET",
        url: '/portal/coletas_fauna/view/' + $(this).val(),
        success: function(data) {
          $('#VisualizarColetaFaunaBody').html(data);
        }
      })
    });

</script>

</body>

</html>

Modal:

            <img class="profile-img" src="assets/img/logo_lacos.png" width="100" height="100" align="left" > <h2 align="left">Informações da Coleta Biológica<span class="label label-primary" ></span></h2>
           <br>
           <br>
           <label>Localização</label>
           <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">   
            <thead>
              <tr>
                <th>Ponto</th>
                <th>Local</th>
                <th>Município</th>
                <th>UF</th>
                <th>Latitude (x)</th>
                <th>Longitude (y)</th>
                <th>Altitude</th>
              </tr>
            </thead>
            <tbody>
             <tr>    
               <?
               if ($resultado > "")
                 foreach ($resultado as $grupo):
                  echo '<td>'.($grupo->ponto).'</td>';
                  echo '<td>'.($grupo->local).'</td>';
                  echo '<td>'.($grupo->nome_municipio).'</td>';
                  echo '<td>'.($grupo->uf).'</td>';
                  echo '<td>'.($grupo->georef_latitude).'</td>';
                  echo '<td>'.($grupo->georef_longitude).'</td>';
                  echo '<td>'.($grupo->altitude).'</td>';
                endforeach; 
                ?> 
              </tr>
            </tbody>
          </table>

    <label>Dados Biológicos</label>
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">   
      <thead>
        <tr>
          <th>Filo</th>
          <th>Classe</th>
          <th>Subclasse</th>
          <th>Ordem</th>
          <th>Familia</th>
          <th>Gênero</th>
          <th>Espécie</th>
          <th>Seção</th>
          <th>Lote</th>
          <th>N° Indivíduos</th>
        </tr>
      </thead>
      <tbody>
       <tr>    
         <?
         if ($resultado2 > "")
           foreach ($resultado2 as $grupo2):
             echo '<tr>';
           echo '<td>'.($grupo2->filo).'</td>';
           echo '<td>'.($grupo2->classe).'</td>';
           echo '<td>'.($grupo2->subclasse).'</td>';
           echo '<td>'.($grupo2->ordem).'</td>';
           echo '<td>'.($grupo2->familia).'</td>';
           echo '<td>'.($grupo2->genero).'</td>';
           echo '<td>'.($grupo2->especie).'</td>';
           echo '<td>'.($grupo2->secao).'</td>';
           echo '<td>'.($grupo2->lote).'</td>';
           echo '<td>'.($grupo2->numindividuos).'</td>';
           echo '<tr>';
           endforeach; 
           ?> 
         </tr>
       </tbody>
     </table>
php

2 answers

0


I took the liberty of making some changes to the function, I believe it is more coherent. I changed the HTTP method to POST. Also note that I gave a.log console to the return data, so you can see what the server is sending.

 $.ajax({
      method: 'POST',
      url: "/portal/coletas_fauna/view/"+ $(this).val(),
      beforeSend: function(xhr) {
          $('#VisualizarColetaFaunaBody').html("Aguarde carregando...");
       }
   }).done(function( data ) {
   console.log(data);
   $('#VisualizarColetaFaunaBody').html(data);
});

  • On the console appears this:Uncaught Syntaxerror: Unexpected end of input.

  • I’m sorry, I wrote an } too.

  • I managed to open the modal, but it is calling the wrong modal. I am not locating where I call the correct modal, you can tell me?

  • on that line Voce must put the id of the modal q to open in the data-target. echo '<td>'. '<button type="button" class="btn btn-Primary modalColetasFauna" data-toggle="modal" data-target="#Visualizarcoletafauna" value="' . $group->id_collection . '"> View

  • Thanks @Cleo , solved my problem. I managed to call the correct modal, and solved i problem by adjusting the queries in the database in the model.

0

Cleo, below picture of the error that appears on the console, do not understand...

inserir a descrição da imagem aqui

Browser other questions tagged php

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