CakePHP - Update Dropdown list

Question

I know you guys may have already answered loads of questions like this but I really need some help in my situation. I couldn't find any answer that suits me.

I have 2 dropdown lists in a form (form id MapInitForm) :

• Zone : a list of my zones (id : zoneSelect), already populated

• Territory : a list of my territories (id : territorySelect)

I do have a zone_id in my Territories table.

So when I select one Zone, I need to get all associated Territories. And when I select one territory, I'll need to do some PHP stuff;

EDITED thanks to Mark's answer.

    $('#MapInitForm #zoneSelect').change(function(){
        var zone_id = $(this).val(); 

        var zone_id = $(this).val();
        var targeturl = $(this).attr('rel') + '?id=' + zone_id;
        $.ajax({
                type: 'get',
                url: targeturl,
                beforeSend: function(xhr) {
                        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                },
                success: function(response) {
                        if (response.content) {
                                $('#territorySelect').html(response.content);
                        }
                        else {
                            console.log(response.content);
                        }
                },
                error: function(e) {
                        alert("An error occurred: " + e.responseText.message);
                        console.log(e);
                }
        }); 

    });

In my controller :

   public function zone_territories_ajax() {
    $this->request->onlyAllow('ajax');
    $id = $this->request->query('id');
    if (!$id) {
        throw new NotFoundException();
    }

    $this->loadModel('Territory');
    $data = $this->paginate('Territory', array('Territory.zone_id =' => $id));
    // $data = $this->Territory->find('all', array('condition' => array('Territory.zone_id =' => $id)));

    $this->set('zoneTerritories', $data);
}

In my view :

   $url = $this->Html->url(array('controller' => 'zones', 'action' => 'zone_territories_ajax'));

        echo $this->Form->create('Map');
        echo $this->Form->input('zone_id', array(
            'options' => $zones, 
            'empty' => '--- Select one ---', 
            'id' => 'zoneSelect', 
            'rel' => $url
            ));
        echo $this->Form->input('zone_territory_id', array(
            'empty' => '--- Select one zone ---', 
            'id' => 'territorySelect', 
            ));
        echo $this->Form->end();    

And finally in my zone_territories_ajax.ctp :

    if (!empty($zoneTerritories)) {
        $k = 0;
    foreach($zoneTerritories as $zoneTerritory):
        echo '<option value="' . $k . '">' . $zoneTerritory['Territory']['name'] . '</option>';
        $k++;
        endforeach;
   }
   else {
       echo '<option value="0">' . __('noOptionAvailable') . '</option>';
   }

In my console, I'm getting undefined for console.log(response.content); But I'm getting the correct values for the selected zone (I see those in my console again) but nothing happens on the second dropdown list.

What did I do wrong ?

Answer 1

You are lucky, just a while back I wrote something about AJAX and CakePHP: http://www.dereuromark.de/2014/01/09/ajax-and-cakephp

And in particular, you can see a full blown example of exactly that functionality here: http://sandbox.dereuromark.de/sandbox/ajax_examples/chained_dropdowns

The code is linked at the bottom - see github

Basically:

    $('#source').change(function() {
            var selectedValue = $(this).val();

            var targeturl = $(this).attr('rel') + '?id=' + selectedValue;
            $.ajax({
                    type: 'get',
                    url: targeturl,
                    beforeSend: function(xhr) {
                            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                    },
                    success: function(response) {
                            if (response.content) {
                                    $('#target').html(response.content);
                            }
                    },
                    error: function(e) {
                            alert("An error occurred: " + e.responseText.message);
                            console.log(e);
                    }
            });
    });