PHP open modal with results

Navigation
1

I am developing a query screen where you can see the collected water samples. A collection listing appears and on the collection side the view button. When you click preview 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>
    
asked by anonymous 02.12.2017 / 19:34

2 answers

0

I took the liberty of making some changes to the function, I believe you are more consistent. I changed the HTTP method to POST. Also note that I gave a console.log in the return data, so you will be able to 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);
});
    
02.12.2017 / 20:03
0

Cleo, below image of the error that appears in the console, I do not understand ...

    
02.12.2017 / 20:31
Control flow graph Css Hover Transition