CakePHP: Using the JsHelper to submit a form with AJAX
Published on Oct 31, 2011 by Jamie MunroThe JsHelper in CakePHP 1.3 has replaced the AjaxHelper from CakePHP 1.2. I recently tried to implement the JsHelper without very much success; perhaps if I would have read the documentation more closely it would have been quite obvious what my mistake was. So in case you're like me and often skim over long documentation of a helper when you just need one function (in my case $this->Js->submit()) then you can often miss very important information. This article will hopefully help clarify it.
To avoid any potential skimming, I'm going to jump right to the solution. To create a form that submits via AJAX it's as simple as creating a view similar to the following:
<div> <?php echo $this->Form->create('Post');?> <fieldset> <legend><?php __('Add Post'); ?></legend> <?php echo $this->Form->input('message'); ?> </fieldset> <?php echo $this->Js->submit(__('Submit', true), array('update' => '#posts', 'url' => array('action' => 'add')));?> <?php echo $this->Form->end(null);?> <?php echo $this->Js->writeBuffer(array('inline' => 'true'));?> <?php echo $this->Html->script('jquery');?> </div>
The above view is using a fictional model called Post that accepts a message in the form. To make it submit via AJAX, there are three key elements that do it.
- <?php echo $this->Js->submit(__('Submit', true), array('update' => '#posts', 'url' => array('action' => 'add')));?>
- <?php echo $this->Js->writeBuffer(array('inline' => 'true'));?>
- <?php echo $this->Html->script('jquery');?>
The first line creates a submit button with an event attached to it that will perform an AJAX request. The second line outputs the events created. This is extremely important, without this second line (<?php echo $this->Js->writeBuffer(array('inline' => 'true'));?>) the submit button would just act like a normal form post. The last line simply includes the jQuery library to perform the AJAX submit.
Before I wrap up today's article, I think it's important to spend a few more minutes to discuss the writeBuffer function. I personally found it extremely frustrating when my form wasn't submitting via AJAX to the point I thoroughly reviewed the documentation to understand that by default almost every function output will automatically buffer its output. If you only have one or two JsHelper functions being used, you can disable this effect by setting 'buffer' => false on the specific calls.
Converting existing CakePHP forms to AJAX is as simple as calling two lines of code (potentially a third if you haven't already included the jQuery library): one to create the submit button and one to output the buffer of the JsHelper.