1

Estou desenvolvendo uma tela de consulta onde apresenta as coletas realizadas de água. Aparece uma listagem das coletas e no lado da coleta o botão visualizar. QUando clica em visualizar tem que abrir a modal, mas não está carregando os dados na 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>

2 Respostas 2

0

Tomei a liberdade de fazer algumas alterações na função, acredito que esteja mais coerente. Alterei o método HTTP para POST. Repare também que dei um console.log nos dados de retorno, assim você vai poder ver o que o servidor está enviando.

 $.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);
});
5
  • No console aparece isso:Uncaught SyntaxError: Unexpected end of input. 2/12/2017 às 19:26
  • Peço desculpas, escrevi um } a mais.
    – Cleo
    2/12/2017 às 19:45
  • eu consegui abrir a modal, mas ele está chamando a modal errada. Não estou localizando onde chamo a modal correta, sabe me dizer? 2/12/2017 às 20:15
  • nessa linha voce deve por no data-target o id do modal q deseja abrir. echo '<td>'.'<button type="button" class="btn btn-primary modalColetasFauna" data-toggle="modal" data-target="#VisualizarColetaFauna" value="' . $grupo->id_coleta . '"> Visualizar
    – Cleo
    2/12/2017 às 20:59
  • Valeu @Cleo , resolvido o meu problema. COnsegui chamar a modal correta, e resolvi i problema ajustando as consultas no banco de dados na model. 3/12/2017 às 18:41
0

Cleo, segue abaixo imagem do erro que aparece no console, não entendi...

inserir a descrição da imagem aqui

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 .