CakePHP jQuery Ajax Helper (Easy Scriptaculous Replacement)
We created this cakephp ajax helper so we could easily replace Scriptaculous with jQuery without changing the code and still have built-in functionality like pagination working properly. The helper could still be improved, but we have decided to publicly release it so that CakePHP developers can utilize it for CakePHP Development.
Download It Here
(Updated 7/8/2009 : Fix for loading and indicator options)
To install it, all you need to do is to drop in the new ajax.php file into views/helpers/. This jQuery ajax library is using the same syntax as the original ajax lib(except for in-place editor). So, it makes replacing the Scriptaculous with jQuery a peace of cake.
The libraries needed are jquery.js, jquery.form.js(http://malsup.com/jquery/form/), and jquery.editable.js (http://www.appelsiini.net/projects/jeditable).
The only limitation the jQuery Ajax helper has compared to the original Ajax helper that it only supports updating a single div. So, you can’t update multiple divs with a single ajax call.
Here is the example usage:
Share This<?php echo $ajax->link('Ajax link', '/ajax_test/post_test', array( 'update' => 'ajax_reply' )); ?><?php echo $ajax->form('test', 'post', array('model' => 'Test', 'url' => '/ajax_test/post_test', 'update' => 'ajax_reply')); echo $form->input('Test.value', array('id' => 'test_observe')); echo $form->end('Submit'); ?><div id="ajax_editor">Test text...</div> <?php echo $ajax->editor('ajax_editor', '/ajax_test/editor_test', array( 'cancel' => 'Cancel', 'submit' => 'OK', 'onblur' => 'submit', 'tooltip' => 'Click to edit', 'callback' => "function(value, settings){ alert(value); }", )); ?><div id="ajax_reply"></div> <?php echo $ajax->observeField('test_observe', array( 'url' => '/ajax_test/post_test', 'update' => 'ajax_reply' )); ?>
Tags: cakephp ajax helper, CakePHP Developers, cakephp development, cakephp helpers, cakephp jquery helper
[…] released a replacement for the default AjaxHelper that uses jQuery. How many of you use the AjaxHelper for generating JavaScript code? I’m […]
May 4th, 2009 at 6:45 pmThis works. The Prototype ajax.php doesn’t. You win. Many thanks.
May 11th, 2009 at 11:06 pmHi,
Question…
May 13th, 2009 at 9:12 pmWhen Ajax update the div content, why the source code (right click) do not update? That is correct? Or just browser bug?
Thanks!
the autoComplete helper function does not work when i use your ajax helper in my file.
May 26th, 2009 at 3:27 amis a way the i fix this problem?
please full complete your ajax helper.
May 26th, 2009 at 3:29 amvery thanks for your work.
(( i like cakephp only with jquery ))
Hi, I can`t open the website of jquery.editable.js (http://www.appelsiini.net/projects/jeditable). It seems that the website no longer used. But I realy want to use your jquery helper, can you please email jquery.editable.js to my email address(blandy@crystal-asia.com), or provide a place for me to download it pl, thx.
May 30th, 2009 at 8:40 pmHmmm…. very very interesting … I prefer from far jQuery.
But now all my ‘loading’ and ‘complete’ callbacks doesn’t work anymore…
any advice plz
June 18th, 2009 at 3:10 pmWow, this looks pretty sweet. Will give it a try! Thanks.
June 19th, 2009 at 11:24 amplease create autocomplete function for your helper . it is very use full.
June 20th, 2009 at 12:07 amthanks
Nice script, thanks!
@David - Auto complete isn’t part of jQuery, its an external plugin.
June 27th, 2009 at 7:33 pmHello “Miles J”
July 8th, 2009 at 1:27 amyes , Auto complete isn’t a part of jquery , but it is a function in Ajax helper. when i use jquery helper the autocomplete doesn’t work
@Everyone, we have just updated the JQuery Ajax Helper with a fix for loading and indicator options.
Also, we plan to look into autoComplete. The only reason that it isn’t there now is that Scriptaculous has autoComplete built into the core, where JQuery achieves autoComplete by use of a Plug-in.
We may end up choosing a plugin and utilizing it to add autoComplete, however we are worried that we will not be able to get it work seamlessly by just dropping it into a project already written using the Cake Ajax Helper.
July 8th, 2009 at 10:28 amGREAT !!!! thanks a lot !!
I love you guys for that helper !!
Can I post this into my blog ?
July 10th, 2009 at 8:50 amI’ll link you for sure !
Sure, go ahead Seb. Thanks for the feedback on the helper. It is unfortunate we didn’t start contributing code until now. We have a lot of code to release, so keep us in your feed or follow us on Twitter
http://twitter.com/loadsys
July 10th, 2009 at 8:58 amIn the helper there is not:
July 17th, 2009 at 4:09 am/**
* FormHelper instance
*
* @var object
* @access public
*/
var $Form = null;
I add this code that it is necessary when I use AjaxHelper in the controllers
function __construct(){
if (is_null($this->Html)){
App::import(’Helper’, ‘Html’);
$this->Html = new HtmlHelper();
}
if (is_null($this->Javascript)){
App::import(’Helper’, ‘Javascript’);
$this->Javascript = new JavascriptHelper();
}
if (is_null($this->Form)){
App::import(’Helper’, ‘Form’);
$this->Form = new FormHelper();
}
}
July 17th, 2009 at 4:11 amFor use this Helper it is neccessary add this line:
July 17th, 2009 at 4:15 amvar $components = array(’RequestHandler’);
Hello everybody…
i’m new to cakephp stuff…
where will i put the jquery.js and jquery.form and
how will I call it from my contact view huhuhuh…
July 20th, 2009 at 8:33 pmany updates on updating multiple div with one ajax call?
July 22nd, 2009 at 10:27 pm[…] http://blog.loadsys.com/…easy-scriptaculous-replacement […]
July 23rd, 2009 at 10:11 amthank you , you are live savior
August 1st, 2009 at 2:17 pmthank you , you are life savior
August 1st, 2009 at 2:18 pmi’ve tried your helper and test on 5 browser ( IE8 , firefox 3.5 , opera, safari , and chrome 2.0.172.39 ) all pass except in chrome 2.0.172.39 , it’s shows me this error :
Notice (1024): XML cannot be read [CORE\cake\libs\xml.php, line 886]
Code | Context
$input = “undefined”
$this->__rawData = file_get_contents($input);
} else {
trigger_error(’XML cannot be read’);
Xml::load() - CORE\cake\libs\xml.php, line 886
Xml::__construct() - CORE\cake\libs\xml.php, line 854
RequestHandlerComponent::startup() - CORE\cake\libs\controller\components\request_handler.php, line 211
Component::startup() - CORE\cake\libs\controller\component.php, line 112
Dispatcher::_invoke() - CORE\cake\dispatcher.php, line 210
Dispatcher::dispatch() - CORE\cake\dispatcher.php, line 194
[main] - APP\webroot\index.php, line 88
is there anything i miss???
August 5th, 2009 at 1:30 pmDo you think any time soon you’ll be able to update a div with a single ajax call? There seems to be a whole lot of people interested in Cake + Jquery–is there anything we can do to promote this and get more support for it?
August 18th, 2009 at 3:54 pmThanks, this is really useful!
But when I try to submit a form with $ajax->form it sends me to the view of my action instead of updating the div with the action. When I do exactly the same (same views and actions) but with $ajax->link, it does work.
Any suggestions?
August 25th, 2009 at 6:42 pmOk, I overlooked that I had to add jquery.form.js.
August 26th, 2009 at 12:02 pmAnother interesting bug about this beautiful helper…
Now that my application is almost done I was validating it XHTML Strict 1.0 and then I found that your helper is adding attributes (”indicator” and “update” for my case) to each link in the generated pagination links.
The problem is that those attributes are not allowed in XHTML Strict…
any advice on this ?
August 27th, 2009 at 12:54 pmthanks in advance !
Hey there. Sortable is not supported, right?
September 4th, 2009 at 2:14 am[…] we typically had to allow users to comment on everything (photos, posts, news, articles, etc…). Here is the solution we came up with that worked very well […]
September 14th, 2009 at 9:30 am@Gambi
Why dont you use the jQuery Sortable it’s so much easy and customisable !
September 14th, 2009 at 2:53 pmThank you, very useful
September 23rd, 2009 at 4:59 amHey….
That is an interesting article. Very Helpful…
Thanks,
October 5th, 2009 at 11:45 amAslam Multani
Great work, very useful, thanks.
October 14th, 2009 at 7:59 amSTEFi
I made the switch from prototype to jquery but ran into one problem that I no longer was able to make Auto Update Divs with remoteTimer as that was left out from the new ajax helper. So I used one more jquery addon: http://github.com/ncr/at_intervals/blob/master/jquery.at_intervals.js and then made my own remoteTimer function in the helper. Here is the first draft of it working for anyone who needs this as well.
function remoteTimer($id,$name=’foo’,$frequency=1000,$options = null) {
October 15th, 2009 at 3:55 pmreturn $this->Javascript->codeBlock(”jQuery(’#{$id}’).at_intervals(function() {” . $this->remoteFunction($options) . “; return false;}, { name: ‘”.$name.”‘, delay: “.$frequency.” });”);
}
[…] developers can utilize it for CakePHP Development. CakePHP jQuery Ajax Helper Download Tutorial Posted in ajax | Tags: ajax, ajax helper, cakephp, framework, jquery, php, Scriptaculous […]
November 5th, 2009 at 2:53 amthank you, that’s great!
November 16th, 2009 at 5:17 pmnice helper..
November 23rd, 2009 at 1:36 pmthanks
Regarding problem with
Notice (1024): XML cannot be read [CORE\cake\libs\xml.php, line 886]
in Chrome and Safari:
I found that in Chrome the request_handler.php receives in env(’CONTENT_TYPE’) the XML and tryes to read posted data as XML => fails. So to fix the issue I’ve added header to the request to force request to be plain text.
To fix jquery ajax helper replace string:
$options[’beforeSend’] = “request.setRequestHeader(’X-Update’, ‘{$update}’);”;
to:
$options[’beforeSend’] = “request.setRequestHeader(’X-Update’, ‘{$update}’); request.setRequestHeader( ‘Content-type’, ‘text/plain’);”;
Hope this helps. Regards.
November 27th, 2009 at 3:39 amThanks to this helper I solve a compatibility problem with mozilla (netscape) populating combos (select) with ajax observeField.
jquery seems to be more portable between browsers.
thank you!
December 10th, 2009 at 6:13 pmThanks for this helper!
@Rostislav Palivoda: thank you. I’ve been struggling with this for awhile. great to see I can use this helper and continue to support Chrome.
Cheers!
December 10th, 2009 at 6:26 pm@all:
Here is the remoteTime function.
You don’t have to use anything special but jQuery it self.
It takes the same arguments as the original. Except ‘position’, and maybe something else.
Here is the code:
http://bin.cakephp.org/view/56397909
@author: Nice! Keep up the good work.
December 27th, 2009 at 8:58 pmI had this error.
Notice (1024): XML cannot be read
and I tried to use above replacement. but it was not enough for me.
then, I use this.
$options[’beforeSend’] = “request.setRequestHeader(’X-Update’, ‘{$update}’);request.setRequestHeader(’Content-type’,'application/x-www-form-urlencoded’);”;
Thank you.
December 28th, 2009 at 6:57 pmWhen I put the form into a div it send it twice. But when I remove the div “new_profile” it works fine:
$(document).ready(function(){
$(”#link_add_profile”).click(function () {
$(”.new_profile”).toggle(”slow”);
});
});
echo $ajax->link(__(’add Proflie’, true), ”, array(’id’ => ‘link_add_profile’));?>
form(’test’, ‘post’, array(’model’ => ‘Test’, ‘url’ => ‘/tests/test1/’, ‘update’ => ‘myProfile’));
January 14th, 2010 at 2:38 amecho $form->input(’Profile.city’);
echo $form->end(’Submit’);
?>
PS: your blog removes my html
January 14th, 2010 at 2:40 amУдачи вам! Я думаю у вас все получится
January 14th, 2010 at 3:29 amOn the Chrome problem for XML, for me worked:
February 24th, 2010 at 12:33 am[code]
$options[’beforeSend’] = “request.setRequestHeader(’X-Update’, ‘{$update}’); request.setRequestHeader( ‘Content-type’, ‘text/plain’);”;
[/code]
On the Chrome problem for XML, for me worked:
March 11th, 2010 at 6:32 pm[code]
$options[’beforeSend’] = “request.setRequestHeader(’X-Update’, ‘{$update}’); request.setRequestHeader( ‘Content-type’, ‘text/plain’);”;
[/code];