CakePHP的Ajax调用

Question

I am new to cakephp. I want to update dropdown corrosponding to a diffent dropdown. Most of the tutorials on the internet are outdated. This is my script file

<script type="text/javascript">
            $(document).ready(function($){
                    $('#city_change').change({
                            source:'<?php echo $this->Html->url(array("controller" =>"officers","action"=> "locality_ajax")); ?>
                    });
            });
</script>

My action in the controller

public function locality_ajax() {
            $city_name = $this->request->data['Post']['city']; 

            $locality = $this->Locality->find('all', array(
                'conditions' => array('city_name' => $city_name),
            ));
            $this->set('locality',$locality);
            $this->layout = 'ajax';
        }

Any help would be appreciated

Answer 1

If the Framework doesn't have ton of support, you should have chosen CodeIgniter or something widely used, so if you're stuck there are forums and ton of other help for that framework.

CakePHP is PHP and it runs on JQuery, CSS and other web standards. You don't have to use cakephp's built-in function if it isn't there. You can create your own PHP function within the framework since it runs on PHP, so you're OK if the help isn't there.

Lets say you have 2 select drop downs, and you want to update dropdown corresponding to a different drop-down, here is what you'd do:

<select name="select1" id="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

<select name="items" id="select2">

    <option value="3" label="1">Smartphone</option>
    <option value="8" label="1">Charger</option>

    <option value="1" label="2">Basketball</option>
    <option value="4" label="2">Volleyball</option>
</select>

add this JQuery to your file or the view:

$("#category").change(function() { 
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[label=' + id + ']');
$('#select2').html(options);
   // alert(options);
});

here is a JSFiddle: http://jsfiddle.net/PnSCL/2/ if you want to experiment.