The Bakery Everything CakePHP

Ok we are going to use a simple contact form for our example. The form will have a text field for the contacts name and a select box for the contacts state. We need two models, Contact and State, a contacts_controller.php and a view.ctp for your form.

We'll assume you already have a contacts table with id, name, and state_id fields and a states tables with an id and name field. The state_id field is a foreign key to the states id. Now let's move on to the model. Your Contact model should look something like this:

Model Class:

Download code <?php 
class Contact extends AppModel {

    var $name = 'Contact';

    var $belongsTo = array(
            'State' => array('className' => 'State',
                'foreignKey' => 'state_id',
                'conditions' => '',
                'fields' => '',
                'order' => ''
            )
        );
}
?>
Your State model should look something like this:

Model Class:

Download code <?php 
class State extends AppModel {

    var $name = 'State';
}

?>
Now let's move on to your contacts_controller which should start out looking something like this:

Controller Class:

Download code <?php 
    class ContactsController extends AppController {

        var $name = 'Contacts';
        var $uses = array('Contact', 'State');
    var $helpers = array('Html', 'Form', 'Ajax', 'Javascript');
}
?>
What is important to note here is that we need to make sure that we include the Ajax helper. Now lets add following method to your contacts_controller. This function is responsible for updating the database and returning the updated value back to the view. This is where most of the other methods choke on the select boxes. Instead of returning the state's name, they return the state's id. The database gets update properly, however, the state's id is sent back to the view. I modified this method to work with CakePHP and the common scenario of handling foreign key associations in a select box. Let's add the ajax_update method and then talk about it.

Controller Class:

Download code <?php 
    function ajax_update($id,$sub){ 
//Step 1. Update the value in the database
        $value = $this->params['form']['value']; //new value to save 
        $this->Contact->id = $id; 
        if (!$this->Contact->saveField($sub, $value,true)) { // Update the field
             $this->set('error', true); 
        } 
        $contact = $this->Contact->read(array($sub), $id); 
//Step 2. Get the display value for the field if the field is a foreign key
                // See if field to be updated is a foreign key and set the display value
        if (substr($sub,-3) == '_id'){
            // Chop off the "_id"
            $new_sub = substr($sub,0,strlen($sub)-3); 
            // Camelize the result to get the Model name
            $model_name = Inflector::camelize($new_sub);
                        // See if the model has a display name other than default "name"; 
            if (!empty($this->$model_name->display_field)){
                $display_field = $this->$model_name->display_field;
            }else {
                $display_field = 'name';
            }
                        // Get the display value for the id
            $value = $this->$model_name->field($display_field,array('id' => $value));
        }

//Step 3. Set the view variable and render the view.
                $this->set('value',$value); 
        $this->beforeRender();
        $this->layout = 'ajax'; 
    } 

?>
This method is passed the id of the contact record to update and the updated value. There are three steps to this method. First, it updates the database with the new value. Then, we check to see if the field that was just updated is a foreign key select box, if so, we either get the Model's $display_field or the default display field "name." The last step is setting the view variable and rendering the view.

Now we also need a method for handling the view so we also add the following method the controller:

Controller Class:

Download code <?php 
    function view($id = null) {
        if (!$id) {
            $this->Session->setFlash(__('Invalid Contact.', true));
            $this->redirect(array('action'=>'index'));
        }
        $this->set('contact', $this->Contact->read(null, $id));
                // Build the states array and set the view variable
        $states = $this->State->find('list');
        foreach ($states as $key => $value) {
            $stateListAjax[] = array($key,$value);
        }
        $this->set('stateListAjax', $stateListAjax);

    }       

?>
This method creates the array of states to be used for the select box and sets the view variables.

Now, we need to include the RequestHandler component and disable debuging output for the AJAX calls, so modify your app_controller so it looks like this:

Controller Class:

Download code <?php 
class AppController extends Controller {
    
    var $components = array('RequestHandler');

    function beforeRender() {
        if($this->RequestHandler->isAjax() || $this->RequestHandler->isXml()) { 
            Configure::write('debug', 0); 
        } 
    }
}?>

Now we can move on to the view where we need to include the Protoype and Scriptaculous libraries and add two