I want to show in my page data that I get from the DB (MySQL) through Ajax. In my view I have 3 selects from which they will obtain the information for the query and a button that performs the action. However, when I press the button, it doesn't paint anything for me in the table I want to fill. But when I throw a console.log if I see the data, ordered as an array of objects. It doesn't throw me errors as such, but it doesn't show me the information in the view.
My javascript code is as follows:
$(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);
}
});
})
})
My knowledge in ajax is quite little, so as far as I have come it has been thanks to many doubts that I have solved with questions from here.
This is the view code:
<div >
<div >
<label>Company: </label>
<select id="id_compania" name="id_compania" >
<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 >
<label>Activities: </label>
<select id="id_activity" name="id_activity" >
<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 >
<label>Month: </label>
<select id="month_" name="month_" >
<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 >
<center>
<button type="submit" id="searchData">Search</button>
</center>
</div>
</div>
<hr>
<div >
<table >
<thead>
<tr>
<th >Date</th>
<th >Amount</th>
<th >Description</th>
<th >Frequency</th>
<th >Month</th>
<th >Year</th>
<th >Datetime Pay</th>
</tr>
</thead>
<tbody id='datos'>
</tbody>
</table>
</div>
I am attaching the function of my controller and that of my model, I am working with CodeIgniter 3 and my version of PHP in the Hosting is 7.4.25.
Controller:
This function helps me to load the view and fill the select with data
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
And this other function is the one that does the job of querying the model
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);
}
And my model is the following:
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();
}
I asked this question on the Stack Overflow page in Spanish, however, no one has answered it and I have been trying to solve it for more than a month. A solution that they tried to give me was to append JSON.parse but it throws me the following error:
Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at Object.success (show_report:329:24) at i (script.js:2:28017) at Object.fireWith [as resolveWith] (script.js:2:28783) at A (script.js:4:14035) at XMLHttpRequest.<anonymous> (script.js:4:16323)
Even if I added the MIME header in my backend where I return the json_decode(response of my query) but it didn't make any changes header('Content-Type: application/json');
I ask the question with the help of the translator because my English is very bad, but if I need to solve this and I don't know what else to do
CodePudding user response：
change dataType in ajax like:
dataType: "html",
let me know if this solved your problem
CodePudding user response：
First, you need to move your datos id to the tbody. Then, set your javascript like this.
$(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 ) {
$('#datos').append('<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>');
}
});
})
})