dynamic drop down with cakephp and Jquery

Question

Hi all want to generate a dynamic drop down for Cities , as per the selection of country in cakephp 2.2 app. I am quite new to cakephp.Moreover i hardly find any tutorial for they are mostly for 1.3 or 1.2 version. I am having Drop down menus for country and city in Profile add view. Here is my code in the countries Controller though :

  public function citylist() {
         $this->layout=false;
         Configure::write('debug', 0);
         if($this->request->is('ajax')){    
        $country=$this->Country->read(null, $this->request['url']['country_id']);
        $code=$country['Country']['country_code'];
        $cities=$this->Country->City->find('list',array('conditions' =>array('City.country_code' => $code),'recursive' => -1,'fields' => array('id', 'name')));
        $this->set('cities',$cities);
}}

and my jquery code is this:

$(document).ready(function(){
$('#ProfileCountryId').live('change', function() {
if($(this).val().length != 0) {
  $.getJSON('/crush/countries/citylist',
              {country_id: $(this).val()},
              function(cities) {
                if(cities !== null) {
                  populateCityList(cities);
                }
    });
  }
});
});

      function populateCityList(cities) {
var options = '';

$.each(cities, function(index, city) {
options += '<option value="' + index + '">' + city + '</option>';
});
$('#ProfileHomeLocation').html(options);
$('#city-list').show();
}

I tried making changes but it really confusing as in diff examples i see very diff ways. I am not sure wether to check that request type as ajax or should i fetch the parameter value through request->data or params[url].

I followed these two existing answers and it confused me further. cakephp pass dropdown value in ajax The connection was reset issue in CakePHP 2.2.

The error is strange that first time page is loaded it shows error in console "Failed to load resource: the server responded with a status of 500 (Internal Server Error)". However if i load reload and then select the first value in the drop down. It gives error

GET http://example.com/crush/countries/citylist?country_id=103 500 (Internal Server Error) jQuery.ajaxTransport.sendjquery-1.7.2.js:8240 jQuery.extend.ajaxjquery-1.7.2.js:7719 jQuery.each.jQuery.(anonymous function)jquery-1.7.2.js:7245 jQuery.extend.getJSONjquery-1.7.2.js:7262 (anonymous function)citylist.js:4 jQuery.event.dispatchjquery-1.7.2.js:3332 jQuery.event.add.elemData.handle.eventHandle

Don't know what to do further.

Answer 1

In cases like yours, where a dynamic drop down box is involved, I use the ajax() jQuery's method to retrieve the data and replace the whole content of the select element. So, instead of returning the JSON data through your AJAX call, instead you can return the full HTML option elements and replace the content of the select element with $('myselectelement').html(data). This works fine.