Ajax Search Table Not Working / Cannot Fetch Data - Codeigniter - php

Question

I cannot simply fetch any data on my table, I tried to clean my code but still not working here is my code
Controller - I am not sure if this is correct or am i still missing something
function fetch()
{
$data = $this->level_model->fetch_data();
echo $this->load->view('levels', ['data' => $data], TRUE );
}
View
<select class='form-input input-lg col-md-6' name="search_text" id="search_text">
<?php
foreach ($courses as $row) {
echo '<option value="'.$row->course.'">'.$row->course.'</option>';
}
?>
</select>
Table
<table class="table table-striped table-bordered" style="width:100%;">
<thead>
<tr>
<th scope="col">Course</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="showdata">
</tbody>
</table>
Model - so here where I query so i can match the data and fetch it.
function fetch_data($query)
{
$this->db->select("*");
$this->db->from("levels");
if($query != '')
{
$this->db->like('course_year', $query);
}
$this->db->order_by('id', 'ASC');
return $this->db->get();
}
AJAX / JAVASCRIPT I am not quite sure if my ajax is right please kindy check
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"<?php echo base_url(); ?>levels/fetch",
method:"POST",
data:{query:query},
success:function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].course_year+'</td>'+
'<td>'+
'<a class="btn btn-primary item-edit" data="'+data[i].id+'"" href="javascript:;"><i class="fa fa-edit"></i> Edit </a> | '+
'<a class="btn btn-danger item-delete" data="'+data[i].id+'"" href="javascript:;"><i class="fa fa-remove"></i> Delete</a></td>'+
'</tr>';
}
$('#showdata').html(html);
}
})
}
$('#search_text').change(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>

Answer 1

Try changing your controller fetch method as below:
function fetch()
{
$data = $this->level_model->fetch_data(
$this->input->post('query');
);
echo $this->load->view('levels', ['data' => $data], TRUE );
}

Answer 2

When the document is loading you are calling the load_data function without passing value to the query parameter here.
<script>
$(document).ready(function(){
load_data();
You should give it a default value here like this
<script>
$(document).ready(function(){
load_data();
function load_data(query='')
{
$.ajax({
url:"<?php echo base_url(); ?>levels/fetch",
method:"POST",
data:{query:query},
success:function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].course_year+'</td>'+
'<td>'+
'<a class="btn btn-primary item-edit" data="'+data[i].id+'"" href="javascript:;"><i class="fa fa-edit"></i> Edit </a> | '+
'<a class="btn btn-danger item-delete" data="'+data[i].id+'"" href="javascript:;"><i class="fa fa-remove"></i> Delete</a></td>'+
'</tr>';
}
$('#showdata').html(html);
}
})
}
$('#search_text').change(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
Also you are not passing any data to your model .
function fetch()
{
$data = $this->level_model->fetch_data(
$_POST['query'];
);
echo $this->load->view('levels', ['data' => $data], TRUE );
}