title: Codeigniter Form dropdown filter function using ajax, loads page very slow in dropdown onchange event
body: <p>I have been using ajax enabled filter function in codeigniter form dropdown in onchange event. It displays the data based on the form dropdown value selected wherein <code>&lt;div id="ajax-content"&gt;&lt;/div&gt;</code> is just the part of the page to be loaded along with the data being retrieved. The ajax enabled filter seems to be working fine in the first filter but when you select value in the form dropdown the second,third ,fourth and so on time, the page load very slow as well as the data retrieval. Is there a way to improve the loading speed and data retrieval of this ajax enabled filter function? Here are my codes</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
   $('#select_id').change(function () {
  
  document.getElementById('ajax-content').style.backgroundColor='white';
  $('#ajax-content').html('&lt;img src="&lt;?php echo base_url()?&gt;/img/loading7.gif"
   style="position:relative; margin:350px; margin-top:250px;" /&gt;');
  var course_id = $("#select_id").val();
  var postData = {'course_id':course_id};
  
  $.ajax({
    url: "&lt;?php echo base_url(); ?&gt;students/get_ajax_course_student/",
    async: false,
    type: "POST",
    cache: false,
    data: postData,
    dataType: "html",
    success: function(data) {
      setTimeout(function(){
      $('#ajax-content').html(data);
      document.getElementById('ajax-content').style.backgroundColor='#f5f5f5';
      },2000);
     },
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>  &lt;div id="ajax-content"&gt;
    &lt;?php
        $cnt=0;
     echo form_open('students/del_student/'.$tennant_id);
      foreach($data_student as $row)
      {
        $cnt++;
     echo"&lt;input type='hidden' name='course_occasion_id' 
      value=".$row-&gt;course_occasion_id."&gt;";
        ?&gt;
         &lt;address&gt;
       &lt;div class="row-fluid"&gt;
  
        &lt;div class="span2"&gt;&lt;input type='checkbox' name='student_id[]' value="&lt;?php echo
        $row-&gt;id;?&gt;"  &gt;&lt;/div&gt;
        &lt;div class="span4"&gt;&lt;?php echo anchor("students/student/
         $row-&gt;id/$tennant_id",$row-&gt;first_name);?&gt;&lt;/div&gt;
        &lt;div class="span4"&gt;&lt;?php echo $row-&gt;last_name;?&gt; &lt;/div&gt;
        &lt;div class="span2"&gt;&lt;?php echo $row-&gt;status;?&gt; &lt;/div&gt;
       &lt;/div&gt;
       &lt;/address&gt;
      &lt;?php
       }
       ?&gt;
       &lt;address&gt;
        &lt;div class="row"&gt;
          &lt;div class="span3"&gt;&lt;strong&gt;&lt;?php echo $total_student;?&gt;&lt;/strong&gt; &lt;/div&gt;
          &lt;div class="span2"&gt;&lt;strong&gt;&lt;?php if(isset($total_rows)) echo $total_rows;?&gt;
       &lt;/strong&gt;&lt;/div&gt;
        &lt;/div &gt;
        &lt;input type="hidden" name="delete_student_action" id="delete_student_action"
         value="&lt;?php echo $delete_student_action; ?&gt;"&gt;
        &lt;/address&gt;
        &lt;div class="row"&gt;
          &lt;div class="span2"&gt;&lt;?php echo form_submit(array('class'=&gt;'btn btn-danger btn-
         large',"name"=&gt;"delete","id"=&gt;"delete","disabled"=&gt;"true"),$btn_delete);?&gt;&lt;/div&gt;
          &lt;div class="span4"&gt;&lt;?php if(isset($links)) echo $links;?&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;? echo form_close();?&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>     function get_ajax_course_student($tennant_id='',$sort_by = 'first_name',
       $sort_order= 'asc'){
       //$data = $this-&gt;data;
       $data['fields'] = $this-&gt;fields;
       $data['sort_by']        = $sort_by;
       $data['sort_order']     = $sort_order;
       $data['tennant_id'] = $this-&gt;session-&gt;userdata('username');
       $this-&gt;load-&gt;model('ajax_student_model');
       $course_id = $this-&gt;input-&gt;post('course_id');
       $data['ajax_req'] = TRUE;
       $data['selected_value'] = "";
       $data['status_value']   = "";
       $data['date_value']     = "";
       $data['dropdown'] = $this-&gt;ajax_student_model-&gt;get_dropdown
       ($this-&gt;session-&gt;userdata('username'));
       if(isset($course_id)){
       $data['ajax_req'] = TRUE;
       $result=$this-&gt;ajax_student_model-&gt;get_occasion_id($course_id);
       if(empty($result)){
       log_message('error', 'Some variable did not contain a value.');
       }
       else{
       $students = $this-&gt;ajax_student_model-&gt;get_student($result);
       $data["data_student"] = $students['rows'];
      }
      $this-&gt;load-&gt;view('view_student',$data);
      }
     }
  </code></pre>
  
  <p>Meanwhile, using console.log function shows that the whole page was loaded in onchange event</p>