Quiero mostrar en mi página datos que obtengo de la BD (MySQL) a través de Ajax. En mi vista tengo 3 select de los cuáles obtendrán la información para la consulta y un botón que realiza la acción. Sin embargo, cuando presiono el botón, no me pinta nada en la tabla que quiero llenar. Pero cuando arrojo un console.log si veo los datos, ordenados como un array de objetos. No me arroja errores como tal, pero no me muestra la información en la vista.
Mi código javascript es el siguiente:
$(document).ready(function() {
$('#searchData').click(function() {
var url = "<?php echo base_url('index.php/Dashboard_admin/search_report') ?>";
var id_compania = document.getElementById('id_compania').value;
var id_activity = document.getElementById('id_activity').value;
var month_ = document.getElementById('month_').value;
$.ajax({
url: url,
type: "POST",
data: {
'id_compania': id_compania,
'id_activity': id_activity,
'month_': month_
},
dataType: "JSON",
success: function(data) {
console.log(data);
var html = '';
var i;
for (i = 0; i < data.length; i++) {
html += '<tr>' +
'<td>' + data[i].dttime + '</td>' +
'<td>' + data[i].amount + '</td>' +
'<td>' + data[i].description + '</td>' +
'<td>' + data[i].frequency + '</td>' +
'<td>' + data[i].Month_pay + '</td>' +
'<td>' + data[i].Year_pay + '</td>' +
'<td>' + data[i].dttime_pay + '</td>' +
'</tr>';
}
$('#datos').html(html);
}
});
})
})
Mi conocimiento en ajax es bastante poco, por lo que hasta donde he llegado ha sido gracias a muchas dudas que he solucionado con preguntas de acá.
Este es el código de la vista:
<div class="row">
<div class="col">
<label>Company: </label>
<select id="id_compania" name="id_compania" class="form-control">
<option value="">-SELECT-</option>
<?php
for ($i = 0; $i < count($compania_list); $i++) {
echo '<option value="'.$compania_list[$i]->id_compania.'">'.$compania_list[$i]->nombrec.'</option>';
}
?>
</select>
</div>
<div class="col">
<label>Activities: </label>
<select id="id_activity" name="id_activity" class="form-control">
<option value="">-SELECT-</option>
<?php
for ($i = 0; $i < count($activity_list); $i++) {
echo '<option value="'.$activity_list[$i]->id_activity.'">'.$activity_list[$i]->activities.'</option>';
}
?>
</select>
</div>
<div class="col">
<label>Month: </label>
<select id="month_" name="month_" class="form-control">
<option value="">-SELECT-</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="col">
<center>
<button type="submit" class="btn btn-success" id="searchData">Search</button>
</center>
</div>
</div>
<hr>
<div class="row">
<table class="stripe hover multiple-select-row data-table-export nowrap">
<thead>
<tr>
<th class="table-plus datatable-nosort">Date</th>
<th class="table-plus datatable-nosort">Amount</th>
<th class="table-plus datatable-nosort">Description</th>
<th class="table-plus datatable-nosort">Frequency</th>
<th class="table-plus datatable-nosort">Month</th>
<th class="table-plus datatable-nosort">Year</th>
<th class="table-plus datatable-nosort">Datetime Pay</th>
</tr>
</thead>
<tbody id='datos'>
</tbody>
</table>
</div>
Incluso adjunto una imagen de como se ve en mi página. Yo asumo que mi controlador y mi modelo están bien, pues si me hace la consulta a la base de datos y me arroja la información correcta en el console.log, pero no me pinta la tabla.
Edición:
Anexo la función de mi controlador y la de mi modelo, estoy trabajando con CodeIgniter 3.
Controlador:
Esta función me sirve para cargar la vista y llenar los select con datos
public function show_report() {
if ( $this->admin->logged_id() ) {
$data['compania_list'] = $this->admin->get_compania_list_admin();
$data['activity_list'] = $this->admin->get_activity_list();
$this->load->view("reports", $data);
} else {
redirect("login_admin");
}
}//fin show_report
Y esta otra función es la que hace el trabajo de consultar al modelo
public function search_report() {
$id_compania = $this->input->post('id_compania');
$id_activity = $this->input->post('id_activity');
$month_ = $this->input->post('month_');
$data['search'] = $this->admin->search_report($id_compania, $id_activity, $month_);
echo json_encode($data);
//$this->load->view("reports", $data);
}
Y mi modelo es el siguiente:
function search_report($id_compania, $id_activity, $month_) {
$this->db->select("DATE_FORMAT(datetime, '%m/%d/%y') AS dttime, amount, description, frequency, Month_pay, Year_pay, DATE_FORMAT(datetime_pay, '%m/%d/%y') AS dttime_pay");
$this->db->from('payment_reports');
$this->db->join('compania', 'compania.id_compania = payment_reports.id_compania');
$this->db->join('activities', 'activities.id_activity = payment_reports.id_activity');
$this->db->where('payment_reports.id_compania=',$id_compania);
$this->db->where('activities.id_activity=', $id_activity);
$this->db->where('MONTH(datetime)=', $month_);
$this->db->where('YEAR(datetime) = YEAR(NOW())');
$query = $this->db->get();
return $query->result();
}
Edición 2:
Así se ve la página antes de presionar el botón, la imagen que subí anteriormente es como se ve después de que se presiona:
Edición 3:
Edito nuevamente mi pregunta esperando que pueda verla alguien, sigo sin solucionar mi problema y todo lo que podría indicar para solucionar el error, no me resulta. Lo último que se me ocurre es que no hay compatibilidad con la versión de CodeIgniter con la que estoy trabajando (que es 3, con PHP 7.4.25 de mi hosting).
Edición 4:
Ya conseguí que los select me den la información nueva sin necesidad de recargar la página y era añadir al ajax la opción async: true
y quiero compartirlo por si da el caso que alguien más lo necesita.
En mi mismo código agregué esa pequeña línea y ahora cada que cambia el valor de uno de mis select, me vuelve a recibir la información de los 3. Sin embargo, no me imprime nada en la tabla aún, solo en la consola.
$(document).ready(function() {
$('#searchData').click(function() {
var url = "<?php echo base_url('index.php/Dashboard_admin/search_report') ?>";
var id_compania = document.getElementById('id_compania').value;
var id_activity = document.getElementById('id_activity').value;
var month_ = document.getElementById('month_').value;
$.ajax({
url: url,
type: "POST",
async: true,
data: {
'id_compania': id_compania,
'id_activity': id_activity,
'month_': month_
},
dataType: "JSON",
success: function(data) {
console.log(data);
var html = '';
var i;
for (i = 0; i < data.length; i++) {
html += '<tr>' +
'<td>' + data[i].dttime + '</td>' +
'<td>' + data[i].amount + '</td>' +
'<td>' + data[i].description + '</td>' +
'<td>' + data[i].frequency + '</td>' +
'<td>' + data[i].Month_pay + '</td>' +
'<td>' + data[i].Year_pay + '</td>' +
'<td>' + data[i].dttime_pay + '</td>' +
'</tr>';
}
$('#datos').html(html);
}
});
})
Pero con el resto de la problemática, sigo igual.