Using the JsHelper in CakePHP to submit a form with AJAX

The JsHelper in CakePHP 2.x has replaced the AjaxHelper from CakePHP 1.x. 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. If you want to further enhance some stuff I highly recommend Organizing data with the jQuery Sortable plugin.

Implementing the JsHelper

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:

[code]
<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>
[/code]

The above view is using a fictional model called Post that accepts a message in the form for a JavaScript array. To make it submit via AJAX, there are three key elements that do it:

[code]
<?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’);?>
[/code]

The first line creates a submit button with a Javascript event handler 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.

Understanding the writeBuffer

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.

Now, once I understand what this helper is doing, it’s actually extremely useful. For example, if you were using several of the functions: sortable, draggable, submit, etc… the JsHelper is going to combine the Javascript statements into one function call when the writeBuffer function is finally called. That means everything will be combined and initialized all at once when the page has finished loading. Otherwise, your page could have 4 or 5 $(document).ready calls, one for each function call.

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.