Today I’ve been working on UI optimization for my CakePanel plugin: Ajax Forms.
Ajax is often used to speed up an application when sending forms: with AJAX the client’s browser does not need to re-load the page, just send data to the already opened HTTP channel and get some data back.
CakePanel provides two methods to implement AjaxForm: explicit javascript configuration and the automagically way!
Automagically Ajax Form:
// View's form declaration:
$this->Form->create( 'Model', array( 'ajax'=>true ));
// Controller's action:
if ( $this->request->is('post') || $this->request->is('put') ) {
if ( $this->Model->save($this->request->data) ) {
// A confirm notification (supplied by CakePower)
$this->Session->confirm( 'Form saved!', '/path-to-redirect' );
} else {
// An error notification (supplied by CakePower)
$this->Session->error('Errors found!');
}
}
NOTE: We use the confirm() and error() methods supplied by the SessionComponent aliased by CakePower. These methods handle a flash message and redirect when the form is submitted “normally” and a JSON response when AJAX.
You change nothing than “ajax=>true” in the form declaration!!!
With this basic code we obtain a fully ajaxed form with Model’s validation rules proof JSON response.
To notify or To redirect? That it the question!
When submitting a form the CakePHP way there always be a change of page but not with AJAX requests: while post-data is being submitted to the client the page does not change, it is a Javascript stuff to read the server response and decide if redirect.
Let me figure you a real world example about the CakePHP Blog Tutorial. After a new post is correctly saved the logic perform a session message and a redirect to the index page:
// The CakePHP way:
if ($this->Post->save($this->request->data)) {
$this->Session->setFlash('Your post has been updated.');
$this->redirect(array('action' => 'index'));
// The CakePOWER way:
if ($this->Post->save($this->request->data)) {
$this->Session->confirm( 'Your post has been updated.', array('action' => 'index') );
The same behavior is applied to the edit() action (link to the edit action blog tutorial)
When we change our $this->Form->create() code to implement an Ajax Form with the “ajax=>true” option we need to change this behavior:
- the create action needs to redirect
- the edit action needs to notify the user if success but does not really needs to redirect!
Why a user have to be redirecter after edit a post content? I think he may wish to continue editing…
Ajax Form take care of redirects and notifications automagically!
The JSON response is also able to send redirect to the listening client’s JS based upon the REST method in use:
- POST, DELETE: redirect will be followed by the JS engine (also display a confirmation message)
- PUT: redirect is ignored, a confirmation message is displayed
NOTE: Images below display how AjaxForm handle a blocking notification with redirect (on the left) and simple (non blocking) notification (on the right). Both types of UI can be detailed as “confirm”, “error”, “alert” or “message” so the color and other style properties changes.
Server side you will use these 4 methods to notify users about events:
$this->Session->confirm( $message, $redirect ); $this->Session->error( $message, $redirect ); $this->Session->alert( $message, $redirect ); $this->Session->message( $message, $redirect );
How to force an Ajax Form to always redirect or not:
You can force a form to use redirect by passing a “_redirect” param when creating the form:
$this->Form->create( 'Model', array( 'ajax'=>true, '_redirect'=>true ));
This way an edit ajaxed form may implement redirect and a new entry form may not… it’s your choice!
NOTE: you can even set “_redirect” to false to force the Ajax Form to never redirect to!
Data Validation Proof!
One CakePHP amazing feature is Model’s Data Validation and it’s automagic propagation to form’s fields to display errors.
CakePanel’s AjaxForm does not break this behavior!
This image display how an AjaxForm can be filled up with errors informations just like a norma form:
- you don’t need to change anything in you presentational code!
- you don’t need to change anything in your logic!
- you don’t need to change anything in your Javascript!
It’s simple, It’s Magic!, It’s CakePower!
Explicit Javascript Configuration:
to be done… but it’s so simple!
