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:

$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

  1. mememe
    Posted January 18, 2006 at 10:02 pm | Permalink

    $headers = getallheaders();
    if (isset($headers[‘x-requested-with’]))

    mmmh… it looks ugly still.

  2. gwoo
    Posted January 20, 2006 at 3:06 am | Permalink

    how about putting this in a beforeFilter in app_controller?

  3. gwoo
    Posted January 20, 2006 at 8:05 am | Permalink

    yup works pretty nicely in the beforeFilter. Only thing i had to change was the case.

    $headers[‘X-Requested-With’]

  4. gwoo
    Posted January 20, 2006 at 6:40 pm | Permalink

    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’;
    }

  5. Posted January 20, 2006 at 7:23 pm | Permalink

    @gwoo: thanks for the tips!

  6. Nate
    Posted January 23, 2006 at 8:33 pm | Permalink

    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);

  7. Posted February 6, 2006 at 8:49 pm | Permalink

    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’));

  8. fatih
    Posted March 16, 2006 at 4:59 pm | Permalink

    that’s good

  9. ll
    Posted March 29, 2006 at 11:07 am | Permalink

    col.

  10. simul
    Posted March 29, 2006 at 11:30 pm | Permalink

    this is really nice

  11. Posted April 1, 2006 at 11:31 am | Permalink

    cool

  12. Sam
    Posted April 11, 2006 at 5:28 pm | Permalink

    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 ?

  13. Posted April 11, 2006 at 6:12 pm | Permalink

    @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.

  14. Posted April 25, 2006 at 7:43 am | Permalink

    Hi How are You?

  15. test
    Posted May 31, 2006 at 12:41 pm | Permalink

    great!

  16. tset
    Posted June 2, 2006 at 6:14 pm | Permalink

    great

  17. trimo
    Posted July 4, 2006 at 10:48 pm | Permalink

    nice

  18. Mahul Banerjee
    Posted August 21, 2006 at 4:24 am | Permalink

    Hi,

    I Just want to know how to deal with the event handlers while sub,itting a form using Ajax !

  19. Posted August 21, 2006 at 1:19 pm | Permalink

    @Mahul Banerjee: Hm, what event handlers are you talking about?

  20. Posted September 28, 2006 at 12:15 am | Permalink

    Very interesting.

  21. tester
    Posted October 2, 2006 at 11:21 am | Permalink

    cool


14 Trackbacks/Pingbacks

  1. […] cake baker » Submit a form with Ajax (tags: ajax) […]

  2. […] 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. […]

  3. […] 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. […]

  4. […] Submit a form with Ajax […]

  5. […] Submit a form with Ajax […]

  6. […] Submit a form with Ajax […]

  7. […] Submit a form with Ajax […]

  8. […] 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). […]

  9. 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:

  10. […] 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). […]

  11. […] Submit a form with Ajax […]

  12. […] Submit a form with Ajax : at CakeBaker […]

  13. […] Submit a form with Ajax […]

  14. […] Submit a form with Ajax : at CakeBaker […]