Using the JsHelper in CakePHP to submit a form with AJAX 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:

<?php echo $this->Form->create('Post');?>
<legend><?php __('Add Post'); ?></legend>
echo $this->Form->input('message');
<?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');?>

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:

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

Published on Mar 10, 2019

Tags: AJAX | CakePHP Tutorial | jshelper

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.


Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.