title: cakephp jshelper chained select
body: <p>I've been working on this problem for a few days now with no luck.  I'm trying to implement a simple ajax call in CakePHP 2.0 that will populate a select list based on the selection of another select list.  In my database I have vehicle makes and vehicle models.  The models have a make_id field.  When a user selects a make, I want the model select list populated with only models that have a make_id of the one previously selected.  When I view the request in Firebug, it's sending back all models regardless of make_id.  I found this small tutorial that attempts to explain how to populate a select based off another select, but I'm still having no luck.  <a href="http://bakery.cakephp.org/articles/Calderoy/2011/01/18/how_to_create_an_observefield_equivalent_in_the_new_jshelper" rel="nofollow">http://bakery.cakephp.org/articles/Calderoy/2011/01/18/how_to_create_an_observefield_equivalent_in_the_new_jshelper</a></p>
  
  <p>Here is my JsHelper code, found in my view file:</p>
  
  <pre><code>$this-&gt;Js-&gt;get('#CarMakeId')-&gt;event(
  'change',
  $this-&gt;Js-&gt;request(
      array('controller' =&gt; 'CarModels', 'action' =&gt; 'get_model'),
          array(
              'async' =&gt; true, 
              'update' =&gt; '#CarCarModelId',
              'dataExpression' =&gt; true, 
              'method' =&gt; 'post', 
              'data' =&gt; $this-&gt;Js-&gt;serializeForm(array('isForm' =&gt; true, 'inline' =&gt; true))
          )
      )
  );
  </code></pre>
  
  <p>And here is my controller method:</p>
  
  <pre><code>public function get_model() {   
          $models = $this-&gt;CarModel-&gt;find(
              'all', 
                  array('conditions', 
                      array('CarModel.make_id' =&gt; $this-&gt;data['Car']['make_id'])
                  )
              );
          $this-&gt;set('car_models', $models);
  }
  </code></pre>
  
  <p>Finally, here is my get_model view file:</p>
  
  <pre><code>if($car_models) {
  echo "&lt;option value=''&gt;-- Select --&lt;/option&gt;\n";
  foreach($car_models as $model) {
  echo "&lt;option value=".$model['CarModel']['id']."&gt;".$model['CarModel']['name']."&lt;/option&gt;\n";
  }
  </code></pre>
  
  <p>}</p>
  
  <p>This is the javascript that is created via JsHelper:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  $(document).ready(function () {$("#CarMakeId").bind("change", function (event)     {$.ajax({async:true, data:$("#CarMakeId").serialize(), dataType:"html", success:function (data, textStatus) {$("#CarCarModelId").html(data);}, type:"post", url:"\/Dropbox\/CartrackerV3\/CarModels\/get_model"});
  return false;});});
  </code></pre>
  
  <p>//]]>
  </p>
  
  <p>I have included the RequestHandler helper in my controller.  It's also worth noting that I am getting a response from the ajax call.  After I choose a make, the first option in models changes from a blank option to the -- Select -- option, which comes from the get_model view file, however it is still listing every model in the database, not just the ones with the correct make_id.</p>