0

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.

Community
  • 1
  • 1
Diablo Geto
  • 457
  • 4
  • 21

1 Answers1

0

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.

Vasilis Lourdas
  • 1,179
  • 1
  • 16
  • 35
  • so u mean i should add this "'';" stuff in within the controller and set a final string than an array !! Will be great if u can give any exapmle or give any link , for cakephp 2.x example – Diablo Geto Aug 17 '12 at 13:28
  • It doesn't have to be CakePHP specific. Some code: `$.ajax({ url: 'myurl', data: {...}}).done(function(data){ $('#mySelectElementId').html(data); });` and the myurl should be a controller action from CakePHP that generates and the returns the html output (a string actually) using `echo $myHTMLOutput;` instead of `return $myHTMLOutput;` – Vasilis Lourdas Aug 17 '12 at 13:33
  • Actually the Problem was with the passing of parameter value. I tried using the changed method for 2.2 version of cake, and its working fine. Though i am accepting your answer, as it gave me the idea, to pass single string, and thus i was able to find that Jquery function was working fine. – Diablo Geto Aug 18 '12 at 08:50