fetch data from database in codeigniter without refreshing page

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.