title: Searching data using Ajax in CakePHP
body: <p>I am using CakePHP 2.3.6. In one of my projects, I have to implement the <code>Searching</code> feture, using AJAX. Normally, this is working, but I want that the page won't reload, the result table will be immediately updated with the data.</p>
  
  <p>This is the <code>Controller</code> code:</p>
  
  <pre><code>public function searchData(){
      $this-&gt;set(............);
      $this-&gt;set(............);
      $this-&gt;set(............);
      if($this-&gt;request-&gt;is('post')){
  $this-&gt;layout='ajax';
  $this-&gt;autoRender=false;
         if(!empty($data)){
            $data=$this-&gt;request-&gt;data;
            // Generating options
            .
            .
            .
            $result=$this-&gt;ModelName-&gt;find('all',$options);// "$options" is generated options
            if(!empty($result)){
  $this-&gt;set(compact($result));
  $this-&gt;set('_serialize',array('result'));
  print_r(json_encode($result));
               $this-&gt;Session-&gt;setFlash("Searching Applicants Successful");
               $this-&gt;set('result',$result);
            }else
               $this-&gt;Session-&gt;setFlash("No data found");
         }else
            $this-&gt;Session-&gt;setFlash("You didn't give any info to search for");
      }
  }
  </code></pre>
  
  <p>My <code>View</code> file(search_data.ctp) :</p>
  
  <pre><code>&lt;h3&gt;Search Result&lt;/h3&gt;
  &lt;?php
      echo $this-&gt;form-&gt;create();
      echo $this-&gt;Form-&gt;input('field1',array('type'=&gt;'text,'div'=&gt;false));
      echo $this-&gt;Form-&gt;input('field2',array('type'=&gt;'text,'div'=&gt;false));
      echo $this-&gt;Form-&gt;input('field3',array('type'=&gt;'text,'div'=&gt;false));
      echo $this-&gt;Form-&gt;input('field4',array('type'=&gt;'text,'div'=&gt;false));
      echo $this-&gt;Form-&gt;submit('Search');
      echo $this-&gt;Form-&gt;end();
  &lt;div id="searchResult"&gt;
  &lt;?php if(!empty($result)){?&gt;
         &lt;table class="table table-striped table-bordered table-hover"&gt;
             &lt;thead&gt;
                &lt;th&gt;Field 1&lt;/th&gt;
                &lt;th&gt;Field 2&lt;/th&gt;
                &lt;th&gt;Field 3&lt;/th&gt;
                &lt;th&gt;Field 4&lt;/th&gt;
             &lt;/thead&gt;
             &lt;tbody&gt;
  &lt;?php foreach($result as $applicant){?&gt;
                 &lt;tr&gt;
                    &lt;td&gt;&lt;?php echo $result['ModelName']['field1'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?php echo $result['ModelName']['field2'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?php echo $result['ModelName']['field3'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?php echo $result['ModelName']['field4'];?&gt;&lt;/td&gt;
                 &lt;/tr&gt;
  &lt;?php }?&gt;
             &lt;/tbody&gt;
         &lt;/table&gt;
  &lt;?php
       }else
          echo "No data found";
  ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here, what I want is, when I submit the form, the "result" <code>div</code> will immediately appear, with the result data, organized in the table. I want to use <code>Ajax</code> here, so that users will get the result immediately, it'll improve the performance and user experience.</p>
  
  <p>I've seen some youtube videos, where they load another page with the result, and shows that page in a <code>div</code> (it is called "success" <code>div</code> most of the time :) ), using <code>Ajax</code>. I can do it. But, I just want to do everything in 1 page, I don't want to use 2 pages to do it.</p>
  
  <p>I tried this for ajax request and update my "result" <code>div</code>(in my <code>search_data.ctp</code> file) :</p>
  
  <pre><code>$this-&gt;Js-&gt;get('.search-form')-&gt;event('submit',$this-&gt;Js-&gt;request(array('controller'=&gt;'cntrlr_name','action'=&gt;'searchData'),array('async'=&gt;true,'update'=&gt;'#searchResult')));
  </code></pre>
  
  <p>And when I run the page, this is the output :</p>
  
  <pre><code>[{"Applicant":{"id":"3","name":"Name 2","email":"ssaha.316@gmail.com","mobile":"9082730572","contact_phone":"3465360980","office_phone":"2437845693","correspondence_address":"Correspondence Address 2","permanent_address":"Permanent Address 2","preferred_work_areas":"Field 1, Field 2, Field 3","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"},"ApplicantAcademicQualification":[{"id":"2","applicant_id":"3","level":"Bachelor(Pass)","degree_title":"B.A.","passing_year":"1999","institution":"Institution 2","result":"4.2","major":"Bengali Literature","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}],"ApplicantEmploymentHistory":[{"id":"2","applicant_id":"3","employer":"Employer 2","position_held":"Position 2","industry":"Industry 2","department":"Department 2","major_responsibilities":"Responsibility 2","job_location":"Local","key_achievement":"Achievement 2","served_from":"1999-08-15","served_till":"2010-02-12","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}],"ApplicantOther":[{"id":"2","applicant_id":"3","academic_activities":"Academic Activities 2","non_academic_activities":"Non Academic Activities 2","main_reason_for_applying":"Reason 2","worked_before":"0","last_position":"","work_location_constraint":"1","ready_to_join_on":"2008-08-14","expected_salary":"30k+","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}],"ApplicantProfessionalQualification":[{"id":"2","applicant_id":"3","name_of_certificate":"Certificate 2","institute":"Institute 2","from":"2002-10-17","to":"2007-10-12","location":"Local Ins.","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}],"ApplicantTraining":[{"id":"2","applicant_id":"3","title":"Title 2","institute":"Institute 2","training_year":"1995","location":"In Company","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}]},{"Applicant":{"id":"2","name":"Name 1","email":"user1@email.com","mobile":"715414918934","contact_phone":"2357295090","office_phone":"083656987398","correspondence_address":"Address 1_1","permanent_address":"Address 1_2","preferred_work_areas":"Field 1, Field 2, Field 3","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"},"ApplicantAcademicQualification":[{"id":"1","applicant_id":"2","level":"Secondary","degree_title":"S.S.C","passing_year":"2009","institution":"Institute 1","result":"4","major":"Science","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}],"ApplicantEmploymentHistory":[{"id":"1","applicant_id":"2","employer":"Employer 1","position_held":"Position 1","industry":"Industry 1","department":"Department 1","major_responsibilities":"Responsibilities 1","job_location":"Local","key_achievement":"Achievements 1","served_from":"2005-03-12","served_till":"2007-11-26","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}],"ApplicantOther":[{"id":"1","applicant_id":"2","academic_activities":"Academic Activities 1","non_academic_activities":"Non Academic Activities 1","main_reason_for_applying":"Reason 1","worked_before":"1","last_position":"Last Position 1","work_location_constraint":"1","ready_to_join_on":"2008-07-10","expected_salary":"20k-25k","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}],"ApplicantProfessionalQualification":[{"id":"1","applicant_id":"2","name_of_certificate":"Certificate 1","institute":"Institute 1","from":"2011-10-11","to":"2012-09-11","location":"Local Ins.","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}],"ApplicantTraining":[{"id":"1","applicant_id":"2","title":"Title 1","institute":"Institute 1","training_year":"2013","location":"Local Ins.","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}]}]
  </code></pre>
  
  <p>Is it possible ? How can I do it ? Please help me.</p>
  
  <p>Thanks.</p>