In this article I will describe how you can submit a form with Ajax and CakePHP 1.2.x (this is a rewrite of an article I wrote for a very early version of CakePHP, you can find the original article below).
To use CakePHP’s Ajax helper you need the Prototype and script.aculo.us JavaScript frameworks (place the files to app/webroot/js). Those Javascript files have to be included in the “head” section of your layout (e.g. app/views/layouts/default.ctp) with:
<?php echo $javascript->link(array('prototype', 'scriptaculous')); ?>
In the snippet above we use the JavaScript helper, and for submitting the form we will use the Ajax helper, so we have to specify those helpers in either our controller or in our AppController with:
public $helpers = array('Javascript', 'Ajax');
Defining our form is very similar to defining a “normal” form:
<?php
echo $ajax->form('action', 'post', array('update' => 'mydiv'));
// add form elements
echo $form->end();
?>
<div id="mydiv">
This will be replaced with the ajax response
</div>
To avoid that the Ajax response gets rendered with the layout we use for the view, we have to add the RequestController to our controller. It will automatically select the Ajax layout when a controller action is called via Ajax.
public $components = array('RequestHandler');
The final step is to implement the action which handles the form data. It is done in the same way as with “normal” form data, so I leave this as an exercise for you ;-)
The new release of CakePHP (RC2) comes with a completely rewritten AjaxHelper::form() function (with the disadvantage that it breaks existing code). Let’s look how to use it:
$ajax->form(array('action' => '/controller/action'), 'post', array('update' => 'mydiv'));
I think this code is self-explanatory (if not, please write a comment). What’s cool about this code is the fact that it will also work when you disable JavaScript. The form will submit the form data in both cases to /controller/action. That means you have to distinguish in your action whether it is called via Ajax or not, and then you have at least to select the appropriate layout. You can do it in the following way (thanks to nate for this hint):
$headers = getallheaders();
if (isset($headers['x-requested-with']))
{
$this->layout = 'ajax';
}
You can access the form data in both cases as you are already used to with
$this->params['data']
That’s it. It is really that simple :)
Update (2006-03-16): The layout selection has changed (you still can use the approach described earlier), the new approach for doing the layout selection is:
class YourController extends AppController
{
var $components = array('RequestHandler');
function youraction()
{
... // do something
$this->RequestHandler->setAjax($this);
}
}
[…] web framework like Django or CakePHP, you’ll appreciate the tutorial by CakeBaker on how to submit a form with Ajax. It’s actually quite simple to do, and only requires a few lines of code. One especially […]
I tried on cakePHP 1.2.5, view code doesn’t work
@Amit: I just updated the article as it contained some outdated stuff. I hope this solves the issue you encountered.
[…] This post was mentioned on Twitter by Kingsley. Kingsley said: http://tinyurl.com/5f5vwf Submit a form with Ajax – cakebaker […]
What about cakePHP 1.3? How can I use this code for JS helper (inplace of javascript+ajax)
@Herman: This should still work with CakePHP 1.3. I never used the JS helper, but I think you simply have to use the form helper to create the form plus the submit() method of the JS helper to create the submit button.
Hope this helps!
[…] å¦‚æžœä½ æ˜¯ Django 或 CakePHPçš„ä½¿ç”¨è€…ï¼Œé‚£ä¹ˆä½ åº”è¯¥è¦æ„Ÿè°¢CakeBaker 的这个教程——《how to submit a form with Ajax》,而它最强大的功能在于,如果我们的æµè§ˆå™¨disable了Javascript,表å•ç…§æ ·èƒ½å¤Ÿæ£å¸¸æäº¤ã€‚ 15)Amberjack 站点导航(æºç ,演示) 在Webå¼€å‘,Amberjackç»å¯¹ä»¤äººè¿‡ç›®éš¾å¿˜çš„Javascriptåº“ï¼Œå®ƒèƒ½å¤Ÿå¸®åŠ©ä½ å¿«é€Ÿåœ°åˆ›å»ºç«™ç‚¹å¯¼èˆªã€‚Amberjack 最优秀的地方是,这个javascriptåº“åªæœ‰4K大å°ï¼Œä½†å´æœ‰ä»¤äººéš¾ä»¥ç½®ä¿¡çš„简易。 16)Prototype UI(æºç ,演示) […]
[…] å¦‚æžœä½ æ˜¯ Django 或 CakePHPçš„ä½¿ç”¨è€…ï¼Œé‚£ä¹ˆä½ åº”è¯¥è¦æ„Ÿè°¢CakeBaker 的这个教程——《how to submit a form with Ajax》,而它最强大的功能在于,如果我们的æµè§ˆå™¨disable了Javascript,表å•ç…§æ ·èƒ½å¤Ÿæ£å¸¸æäº¤ã€‚ […]
[…] å¦‚æžœä½ æ˜¯ Django 或 CakePHPçš„ä½¿ç”¨è€…ï¼Œé‚£ä¹ˆä½ åº”è¯¥è¦æ„Ÿè°¢CakeBaker 的这个教程——《how to submit a form with Ajax》,而它最强大的功能在于,如果我们的æµè§ˆå™¨disable了Javascript,表å•ç…§æ ·èƒ½å¤Ÿæ£å¸¸æäº¤ã€‚ […]