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); } }
21 Comments
$headers = getallheaders();
if (isset($headers[‘x-requested-with’]))
mmmh… it looks ugly still.
how about putting this in a beforeFilter in app_controller?
yup works pretty nicely in the beforeFilter. Only thing i had to change was the case.
$headers[‘X-Requested-With’]
I played around some more. I think this mught be the a good solution as well.
if (env(‘HTTP_X_REQUESTED_WITH’))
{
$this->params[‘bare’] = ‘1’;
}
@gwoo: thanks for the tips!
Even better, I’m working on a new Cake component to help manage different types of requests. At some point, it will be added to the core. For now, you can download it at:
http://cakephp.org/pastes/show/5c65b074ae8f693407709b4b9ada1496
Just add the component to your controller:
var $components = array(‘Request’);
And put this in your beforeFilter( ) :
$this->Request->setAjax($this);
Also, the $ajax->form method doesn’t like to work with some browsers. I have found that the $ajax->submit likes a much broader range of browsers.
$ajax->submit(‘submit’, ‘Submit’, array(‘url’ => ‘action’, ‘update’ => ‘div’));
that’s good
col.
this is really nice
cool
Is there a way to submit “multipart/form-data” forms with CakePHP / Ajax ?
I can’t manage uploading files this way… Is there a trick or is it just impossible ?
@Sam: No, it is not possible to upload files with Ajax due to security restrictions in the browser (it is not allowed for Javascript to access the local file system). I think you have to use IFrames to get a similar effect.
Hi How are You?
great!
great
nice
Hi,
I Just want to know how to deal with the event handlers while sub,itting a form using Ajax !
@Mahul Banerjee: Hm, what event handlers are you talking about?
Very interesting.
cool
14 Trackbacks/Pingbacks
[…] cake baker » Submit a form with Ajax (tags: ajax) […]
[…] 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. […]
[…] La lista la componen tutoriales con técnicas diferentes, como tutoriales para arrastrar y soltar, hacer carritos de compra, formularios, herramientas para subir archivos y unos cuantos más. […]
[…] Submit a form with Ajax […]
[…] Submit a form with Ajax […]
[…] Submit a form with Ajax […]
[…] Submit a form with Ajax […]
[…] Submit a form with Ajax The new release of CakePHP (RC2) comes with a completely rewritten AjaxHelper::form() function (with the disadvantage that it breaks existing code). […]
cake baker » Submit a form with Ajax
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:
[…] Submit a form with Ajax The new release of CakePHP (RC2) comes with a completely rewritten AjaxHelper::form() function (with the disadvantage that it breaks existing code). […]
[…] Submit a form with Ajax […]
[…] Submit a form with Ajax : at CakeBaker […]
[…] Submit a form with Ajax […]
[…] Submit a form with Ajax : at CakeBaker […]