Loadsys

We are hiring CakePHP developers! Click here to apply.

Loadsys – CakePHP Blog

A Web Development Company Specializing in the CakePHP Framework.

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:


 <?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'
));
?>
Share This

Tags: , , , ,

Close
E-mail It