fetch data from database in codeigniter without refreshing page - php

Question

I am new on codeigniter I tried to fetch data which is filter by date from database and display it in my view page through ajax without refreshing my page.
I tried lot but didn't get the solution .
Here is my controller:
public function sohan_by_date(){
/* Check the validation of search by date function*/
$this->form_validation->set_rules('start_date', 'Start Date', 'trim|required');
$this->form_validation->set_rules('end_date', 'End Date', 'trim|required');
if($this->form_validation->run()){
/* display data from database from comparing the date in database*/
$date1=$this->input->post('start_date');
$date2=$this->input->post('end_date');
$start_date=date('Y-m-d', strtotime($date1));
$end_date=date('Y-m-d', strtotime($date2));
$check=$this->task->get_by_date_sohan($start_date,$end_date);
if($check){
$data['result']=$this->task->get_by_date_sohan($start_date,$end_date);
$this->load->view('admin/sohan_task_by_date', $data);
return json_encode($data);
}
else{
redirect('task/sohan_task');
}
}
else{
redirect('task/sohan_task');
}
}
Here is my model:
public function get_by_date_sohan($start_date,$end_date){
/* This display all task of sohan from database by date*/
$this->db->select('*');
$this->db->from('task_form');
$this->db->where('name','sohan');
$this->db->where('date >= ',$start_date);
$this->db->where('date <= ',$end_date);
$query=$this->db->get();
return $result=$query->result();
}
Here is my ajax:
<script type='text/javascript' language='javascript'>
$('#getdata').click(function(){
$.ajax({
type: "POST",
url: "<?php echo base_url();?>task/sohan_by_date",
dataType: "json",
success: function(data){
debugger;
$('#result_table').html(data);
},
error: function() { alert("oops..."); }
});
});
</script>
here is my view:
<div class="form-body">
<div data-example-id="simple-form-inline">
<?php
$attributes = array('class' => 'form-inline');
echo form_open('', $attributes);
?>
<div class="form-group">
<input type="text" class="form-control" name="start_date" id="start_date" placeholder="Start Date" >
</div>
<div class="form-group">
<input type="text" class="form-control" name="end_date" id="end_date" placeholder="End Date">
</div>
<button type="submit" class="btn btn-default" id="getdata">Check</button>
<?php
echo form_close();
?>
</div>
</div>
<div id='result_table'>
<?php include('date.php');?>
</div>
My date.php file is:
<table class="table table-striped table-hover table-responsive">
<thead>
<tr class="success">
<th>Name</th>
<th>Date</th>
<th>Work</th>
<th>Partner</th>
<th>Director</th>
<th>Time</th>
<th>Task</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach($result as $row) { ?>
<tr>
<td><?php echo $row->name;?></td>
<td><?php echo $row->date;?></td>
<td><?php echo $row->work;?></td>
<td><?php echo $row->partner;?></td>
<td><?php echo $row->director;?></td>
<td><?php echo $row->time;?></td>
<td><?php echo $row->task;?></td>
<td><?php echo $row->status;?></td>
</tr>
<?php } ?>
</tbody>
</table>
When I am fetching data normally without any using ajax and display in view then it working properly but page is refreshing.It means my controller and my model is working properly.But when I used ajax to display data without refreshing page then its not working ..please help me to find the solution .I dont have much more knowledge in ajax.

Answer 1

I got the Answer now its working perfectly. here i am going to share my answer.
Here is Jquery:
$('#myform').submit(function (event) {
dataString = $("#myform").serialize();
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>task/sohan_by_date",
data:dataString,
success:function (data) {
$('#task').html(data);
}
});
event.preventDefault();
});
Here is my controller:
public function sohan_by_date(){
/* Check the validation of search by date function*/
$this->form_validation->set_rules('start_date', 'Start Date', 'trim|required');
$this->form_validation->set_rules('end_date', 'End Date', 'trim|required');
if($this->form_validation->run()){
/* display data from database from comparing the date in database*/
$date1=$this->input->post('start_date');
$date2=$this->input->post('end_date');
$start_date=date('Y-m-d', strtotime($date1));
$end_date=date('Y-m-d', strtotime($date2));
$check=$this->task->get_by_date_sohan($start_date,$end_date);
if($check){
$data['result']=$this->task->get_by_date_sohan($start_date,$end_date);
$this->load->view('admin/date', $data);
return json_encode($data);
}
else{
redirect('task/sohan_task');
}
}
else{
redirect('task/sohan_task');
}
}
Here is a form in view:
<?php
$attributes = array('class' => 'form-inline','id'=>'myform');
echo form_open('', $attributes);
?>
My all code in details I already explain in my question if any one got stuck like this problem please compare my above question and my this answer.
Thank you

Answer 2

First give an id attribute to ua form.It is not necessary, you can get data by class also.But it might be a good practice.
<?php
$attributes = array('class' => 'form-inline','id'=>'myform');
echo form_open('', $attributes);
?>
Now in ua clicks,get the form variables by form.serialize method in ajax.
var str =$('#myform').serialize();
$.ajax({
url: '<?php echo site_url('task/sohan_by_date'); ?>',
async: false,
type: 'POST',
data:str,
dataType: 'html',
success: function(data)
{
alert(data);
},
error:function(error)
{
alert(error)
}
});
Now change ua controller code as:
if($check)
{
$this->task->get_by_date_sohan($start_date,$end_date);
}
if ua getting the data in alert as array,use json.stringify() to alert the data.. Good luck.