Not able to display data through ajax in codeigniter - php

Question

i want to show the restaurant after selecting its area from dropdown list. but my code did not show the restaurant name and the menu button of that restaurant please tell me where i did mistake
Its my model code
function select_record($table, $where = NULL)
{
$this->db->select();
if ($where) $this->db->where($where);
$this->db->from($table);
$query = $this->db->get();
// echo $this->db->last_query();
return $query->result();
}
Controller code
public function get_rests()
{
$cit_id = $this->input->post('cit_id');
$area = $this->input->post('areaID');
$where = array(
'city_id' => $cit_id,
'city_area_id' => $area
);
$data = $this->bulk->select_record('restaurant', $where);
$html = '<div class="container" id="">
<table align="centre" class="table table-condensed table-striped table-hover no-margin"style="width:70%" id="">
<thread>
<tr style="width: 56%;">
<th> No. </th>
<th style=""> Restaurant Names </th>
</tr>
</thread>
<tbody>
<th> <span value="'. $data[0]->restaurant_id . '" class="res_id"></span></th>
<th style=""> </th>
<th style=""> <span value="'. $data[0]->restaurant_name . '" class="res_id"></span> </th>
<th style="width: 1%" > </i>See Menu </th>
</tr>
</tbody>
</table>
</div>';
echo json_encode(array(
'data' => $html
));
}
Script code
function get_rests() {
var city_id = $('#city_id').val();
var area_id = $("#area_id").val();
$.ajax({
type: "POST",
url: "<?=base_url();?>index.php/Bulk_Controller/get_rests",
data: {
cit_id: city_id,
areaID: area_id
},
dataType: 'json',
cache: false,
success: function (response) {
alert(response);
$('#restaurant').html(response.data);
}
});
}
Its view code
<div id="restaurant">
</div>
when i did alert(response.data);
<div class="container" id="">
<table align="centre" class="table table-condensed table-striped table-hover no-margin"style="width:70%" id="">
<thread>
<tr style="width: 56%;">
<th>
No.
</th>
<th style="">
Restaurant Names
</th>
</tr>
</thread>
<tbody>
<th>
<span value="1" class="res_id"></span></th>
<th style="">
</th>
<th style="">
<span value="salten paper" class="res_id"></span>
</th>
<th style="width: 1%" >
</i>See Menu
</th>
</tr>
</tbody>
</table>
</div>
Please tell me where i did mistake

Answer 1

You are not putting the response from ajax properly. $('#restaurant').html(response.data); should be:
$('#restaurant').html(response);
Also change
url: "<?=base_url();?>index.php/Bulk_Controller/get_rests",
to
url: "<?=base_url();?>index.php/bulk_controller/get_rests",

Answer 2

Try the below,
You should return it rather than echo, Also you have to set the request header as json
Model:
function select_record($table, $where = NULL)
{
$this->db->select('*');
$this->db->from($table);// this should come right after select statement
if ($where) $this->db->where($where);
$query = $this->db->get();
// echo $this->db->last_query();
return $query->result();
}
Controller:
public function get_rests()
{
$cit_id = $this->input->post('cit_id');
$area = $this->input->post('areaID');
$where = array(
'city_id' => $cit_id,
'city_area_id' => $area
);
$data = $this->bulk->select_record('restaurant', $where);
$html = '<div class="container" id="">
<table align="centre" class="table table-condensed table-striped table-hover no-margin"style="width:70%" id="">
<thread>
<tr style="width: 56%;">
<th> No. </th>
<th style=""> Restaurant Names </th>
</tr>
</thread>
<tbody>
<th> <span value="'. $data[0]->restaurant_id . '" class="res_id"></span></th>
<th style=""> </th>
<th style=""> <span value="'. $data[0]->restaurant_name . '" class="res_id"></span> </th>
<th style="width: 1%" > </i>See Menu </th>
</tr>
</tbody>
</table>
</div>';
return $this->output->set_content_type('application/json')->set_output(json_encode(array(
'data' => $html,
)));
}
Script:
function get_rests() {
var city_id = $('#city_id').val();
var area_id = $("#area_id").val();
$.ajax({
type: "POST",
url: "<?=base_url();?>index.php/Bulk_Controller/get_rests",
data: {
'cit_id': city_id,
'areaID': area_id
},
dataType: 'json',
cache: false,
success: function (response) {
alert(response);
console.log(response)
$('#restaurant').html(response.data);
}
});
}