CakePHP helpers are so powerful that when you begin to hack helpers here and there you discover a lot of possibilities which can save you a lot of time. Same thing happened when I had an idea to AJAX'ify the forms using some shortcut.
Let's try hacking the FormHelper and enable AJAX. We'll use jQuery Form plugin to submit forms via AJAX request (I don't know any other good plugins for forms).
What we'll be doing:
Converting a normal form like below one, to make it call AJAX(using jQuery lib) and alert us when form posted:
PHP:
-
<div class="jerks form">
-
<?php echo $form->
create('Jerk');?>
-
<fieldset>
-
<legend><?php __('Add Jerk');?></legend>
-
<?php
-
echo $form->
input('name');
-
?>
-
</fieldset>
-
<?php echo $form->
end('Submit');?>
-
</div>
1. Extend your FormHelper to something like AjaxFormHelper (Now normally I don't extend core helpers like this, but use a similar method similar to this (comment by grigri): http://cakebaker.42dh.com/2008/10/18/dont-abuse-the-apphelper-to-extend-the-core-helpers/#comment-110708 ) and overwrite create() method like this:
PHP:
-
function create
($model =
null,
$options =
array())
-
{
-
$output = "";
-
if(isset($options['ajax']) &&
$options['ajax']==
'true')
-
{
-
if(!
isset($options['id']))
-
{
-
-
}
-
-
$this->ajaxForm = $options['id'];
-
$url = "$('#".$options['id']."').attr('action')+'?ajax=1&flash_only=1";
-
-
if(@$options['response']=='inline')
-
{
-
$datatype = 'text';
-
$success = "$('#".$options['id']."_status').hide().html(responseText).fadeIn();
-
setTimeout(function(){
-
$('#".$options['id']."_status').fadeOut();
-
}, 5000);";
-
$url .= "&js=false'";
-
}
-
else {
-
$datatype = 'script';
-
$success = '';
-
$url .= "'";
-
}
-
-
// to-do: avoid multiple inclusion of this script
-
$output .= "<div id='".$options['id']."_status' style='display:none;'></div>";
-
$output .= "<script src='".$this->Html->url('/effects/js/jquery.form.js')."'></script>";
-
$output .= "<script>
-
$(document).ready(function() {
-
$('#".$options['id']."').ajaxForm({dataType: '".$datatype."', url: ".$url.",
-
beforeSubmit: function(){
-
$('#".$options['id']." .submit input').attr('disabled', true);
-
$('#progressIndicator').show();
-
$('#".$options['id']." .form_progress').show();
-
},
-
success: function(responseText, statusText){
-
$('#".$options['id']." .submit input').attr('disabled', false);
-
$('#progressIndicator').hide();
-
$('#".$options['id']." .form_progress').hide();
-
".$success."
-
},
-
});
-
});
-
</script>";
-
}
-
// unset js options
-
$output .= parent::create($model, $options);
-
-
return $this->output($output);
-
}
I'm not that good in explaining code flow, but you might have noted 3 get variables appended to our form action URL above. These variables are: 'ajax','flash_only' ,'js' and serves their own purpose that I'll tell in next steps.
2. Now we enable the AJAX in our form (CakePHP's $options array is so good that you can overwrite and modify almost many methods easily):
This will show a JS alert after form has been submitted successfully.
PHP:
-
<div class="jerks form">
-
<?php echo $ajaxForm->
create('Jerk',
array('ajax'=>
'true'));?>
-
<fieldset>
-
<legend><?php __('Add Jerk');?></legend>
-
<?php
-
echo $ajaxForm ->
input('name');
-
?>
-
</fieldset>
-
<?php echo $ajaxForm ->
end('Submit');?>
-
</div>
This will show an inline message after form has been submitted successfully.
PHP:
-
<div class="jerks form">
-
<?php echo $ajaxForm->
create('Jerk',
array('ajax'=>
'true' ,
'response'=>
'inline'));?>
-
<fieldset>
-
<legend><?php __('Add Jerk');?></legend>
-
<?php
-
echo $ajaxForm ->
input('name');
-
?>
-
</fieldset>
-
<?php echo $ajaxForm ->
end('Submit');?>
-
</div>
Note that ajax=true parameter we sent in create() method. This will tell helper to load this form via AJAX.
3. Now your form will be AJAX ready (if you've included this AjaxFormHelper properly). But because our controller function was made to process normal POST function, and flash message on success – we'll have to change that behavior. This is what a normal JerksController::add() method should look like:
PHP:
-
function add() {
-
if (!
empty($this->
data)) {
-
$this->Jerk->create();
-
if ($this->Jerk->save($this->data)) {
-
$this->Session->setFlash('Jerk saved.');
-
} else {
-
}
-
}
-
}
We don't need full action content from views/jerks/add.ctp to appear in response when AJAX is called. We can make this work traditional way by checking if it's an AJAX request in controller method itself and do needful, but I wouldn't want to modify all my controller functions to enable AJAX, so here's what I've come up with.
Remember the 3 GET variables above?
'ajax' => This one will determine if a given HTTP request is an AJAX request.
'flash_only' => This will tell if rendering should happen or not. Flash only means, after controller function is executed, do not render, just show flash message.
'js' => This is used for alert type, if this is not set, show inline alert. If set true, helper must show JS alert() on form success.
Inside your AppController::beforeFilter(), add this code:
PHP:
-
-
{
-
Configure::write('debug',0);
-
$this->layout = 'ajax';
-
$ this ->set('ajax', true);
-
if($_GET['flash_only'])
-
{
-
$ this ->set('flash_only', true);
-
//$ this ->autoRender = false;
-
}
-
-
if($_GET['js']=='false')
-
{
-
$ this ->set('js', 0);
-
}
-
else {
-
$ this ->set('js', 1);
-
}
-
}
Do not blame me for using GET variables, I found many issues with 'named' so I'm relying on normal GET variables.
Now you'll need to edit ajax.ctp layout file.
PHP:
-
<?php
-
if ($session->check('Message.flash'))
-
{
-
$strMessage = '';
-
$message = $session->read('Message.flash');
-
if(isset($message['params']['type']))
-
{
-
$type = $message['params']['type'];
-
$strMessage =
ucfirst($type).
": ".
$message['message'];
-
}
-
else {
-
$strMessage = $message['message'];
-
}
-
$session->del('Message.flash');
-
}
-
if(!
empty($this->
validationErrors))
-
{
-
$strMessage = '';
-
foreach($this->validationErrors as $model=>$errors)
-
{
-
foreach($this->validationErrors[$model] as $field=>$error)
-
{
-
$strMessage .= $error;
-
}
-
}
-
}
-
?>
-
<?
-
if($strMessage) {
-
if($js==1) {
-
?>
-
alert('<?=$strMessage;?>');
-
<? } elseif($js==0) {
-
-
} } ?>
-
<?
-
-
{
-
echo $content_for_layout;
-
}
-
?>
This should be self explanatory, even though this code definitely needs some refactoring. We're basically manipulating those 3 GET variables according to our need. In process, we're also checking validation errors occurred in form.
I have not used it under the production environment yet, so I'd really like to hear any pitfalls (if any) using this approach. Thanks for reading.
Abhimanyu Grover