Helping you solve those tough coding problems!

Using the JsHelper in CakePHP to submit a form with AJAX Using the JsHelper in CakePHP to submit a form with AJAX

Published on Mar 10, 2019 by Jamie Munro

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.




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:


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

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.

Tags: CakePHP | jshelper | CakePHP

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP