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:
<?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' )); ?>
This works. The Prototype ajax.php doesn’t. You win. Many thanks.
Hi,
Question…
When 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.
is a way the i fix this problem?
please full complete your ajax helper.
very 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.
Hmmm…. very very interesting … I prefer from far jQuery.
But now all my ‘loading’ and ‘complete’ callbacks doesn’t work anymore…
any advice plz
Wow, this looks pretty sweet. Will give it a try! Thanks.
please create autocomplete function for your helper . it is very use full.
thanks
Nice script, thanks!
@David – Auto complete isn’t part of jQuery, its an external plugin.
Hello “Miles J”
yes , 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.
GREAT !!!! thanks a lot !!
I love you guys for that helper !!
Can I post this into my blog ?
I’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
In the helper there is not:
/**
* 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();
}
}
For use this Helper it is neccessary add this line:
var $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…
any updates on updating multiple div with one ajax call?
thank you , you are live savior
thank you , you are life savior
i’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 [COREcakelibsxml.php, line 886]
Code | Context
$input = “undefined”
$this->__rawData = file_get_contents($input);
} else {
trigger_error(‘XML cannot be read’);
Xml::load() – COREcakelibsxml.php, line 886
Xml::__construct() – COREcakelibsxml.php, line 854
RequestHandlerComponent::startup() – COREcakelibscontrollercomponentsrequest_handler.php, line 211
Component::startup() – COREcakelibscontrollercomponent.php, line 112
Dispatcher::_invoke() – COREcakedispatcher.php, line 210
Dispatcher::dispatch() – COREcakedispatcher.php, line 194
[main] – APPwebrootindex.php, line 88
is there anything i miss???
Do 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?
Thanks, 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?
Ok, I overlooked that I had to add jquery.form.js.
Another 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 ?
thanks in advance !
Hey there. Sortable is not supported, right?
@Gambi
Why dont you use the jQuery Sortable it’s so much easy and customisable !
😉
Thank you, very useful 🙂
Hey….
That is an interesting article. Very Helpful…
Thanks,
Aslam Multani
Great work, very useful, thanks.
STEFi
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) {
return $this->Javascript->codeBlock(“jQuery(‘#{$id}’).at_intervals(function() {” . $this->remoteFunction($options) . “; return false;}, { name: ‘”.$name.”‘, delay: “.$frequency.” });”);
}
thank you, that’s great!
nice helper..
thanks 🙂
Regarding problem with
Notice (1024): XML cannot be read [COREcakelibsxml.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.
Thanks 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!
Thanks 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!
@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.
I 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.
When 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’));
echo $form->input(‘Profile.city’);
echo $form->end(‘Submit’);
?>
PS: your blog removes my html
Удачи вам! Я думаю у вас все получится 🙂
On the Chrome problem for XML, for me worked:
[code]
$options[‘beforeSend’] = “request.setRequestHeader(‘X-Update’, ‘{$update}’); request.setRequestHeader( ‘Content-type’, ‘text/plain’);”;
[/code]
On the Chrome problem for XML, for me worked:
[code]
$options[‘beforeSend’] = “request.setRequestHeader(‘X-Update’, ‘{$update}’); request.setRequestHeader( ‘Content-type’, ‘text/plain’);”;
[/code];
This is the best page on the entire internet. Thank you.
/*
to avoid to print the invalid xhtml attribute eg. update=”id_2_update” modify your downloaded Ajax.php file and add this code after line 111
*/
if(isset($htmlOptions[‘update’])){
unset($htmlOptions[‘update’]);
}
First off, wonderful helper!
But I’m having the same problem as Jens, where if I put my ajax form inside of a div, it submits the form twice and returns an error message for duplicate entry.
If I remove the div and just place the form directly within my body tags, it works just fine.
Any suggestions?
Thanks!
Thats astounding, i in no way understood that Baidu is already producing which much manipulate on the look engine market. They even now possess a long way though to catch up with google. I feel sorry for ask however.
thats amazing like this ajax kit in jquery
Had a good read. Thanks for posting. despite i dont need it. i remember i was trying out scriptaculous, but as i heard about jquery, i was going only with jquery. i think it was the right decision? what dominates now? jquery or scriptaculous? just curios?
Very useful. Thank you for this googd informations
Works fine. Thanks a lot
Thanks for your help. It’s really easy to use the helper.
very helpful query infos..thanks