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">×</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>