AJAX Select box in CakePHP

When I created my first personal CakePHP web site, this was something that had me quite frustrated.  I struggled and struggled to figure out and understand how to do a simple “if I change this select box, how can I populate another one”.

I had previously done this a million times in other languages with a simple Javascript onchange() function that would do my AJAX and populate my other select box.

To solve this problem, I checked CakePHP’s web site and did not find anything useful.  Don’t forget this was almost a year ago, I find the web site has come a long way now.  Because I couldn’t find a could example, I did the next best thing, I dove write into the form helper and ajax helper.  Shortly after, I found enough information to start my trial and error process.

Excellent, now we are getting some where.  Now that we know this, let’s create our two select boxes and make our second one populate through AJAX.

In this example, I have a country select list.  After you choose a country, my second select box will be populated with cell phone carriers based on the country selected.

[code]echo $form->input(‘country_id’, array(‘options’ => $countries, ’empty’ => ‘– Select –‘), null, array(‘id’ => ‘country_id’, ‘label’ => ‘Country’));

$options = array(‘url’ => ‘update_select’,’update’ => ‘UserCarrierId’);
echo $ajax->observeField(‘UserCountryId’, $options);

echo $form->input(‘carrier_id’, array(‘options’ => $carriers, ’empty’ => ‘– Select –‘), null, array(‘id’ => ‘carriers’, ‘label’ => ‘Carrier’));
[/code]

Let’s break down what is happening here.  The first thing we do is create a country select box.  The $countries variable is passed in to our view from our controller.  We simple did a $this->Country->find(‘list’) to populate it.

Next up, we create an empty select item with “– Select –” in it.  Because we need to reference this field later, we also give it an id of “country_id”.  It’s important to note that CakePHP automatically converts this to UserCountryId.  User comes from our form name that is specified during our form create.  And finally, we assign it a label of “Country”.

Now let’s discuss the “meat and potatoes” of this example.  We start by creating an options JavaScript array, in this array we provide a URL of “update_select” and a field to update, “UserCarrierId”.  We then echo out a function from our AJAX helper.  We are telling it to observe our country_id field and passing in the options above.  What this does is create Javascript code that says “when country_id changes call our update_select function in our users_controller and when it’s done, update our carrier_id field”.

The last thing we do in this example is create our carrier_id field.  By default $carriers is empty, however, we use a variable here because if our validation fails during submit, we can populate the $carriers variable in our controller and not force the user to re-select a country to populate it.

Below is the contents of “update_select.ctp”:

[code]echo “<option value=\”\”>– Select –</option>\n”;
foreach($carriers as $k => $v) {
 echo “<option value=\”$k\”>$v</option>\n”;
}
[/code]

This code receives the same $carriers variable, but this time it is populated with the carriers only for our country that we previously selected.

That’s it for today’s article and hopefully you can avoid the headaches I had to go through to create this for the first time. If you’re looking to explore how to do this with another server-side language be sure to checkout my Node.js tutorial as I’ve compiled a list of examples that perform this very similar functionality.