CakePHP Ajax Drag and Drop Sorting Tutorial
I have found that CakePHP is a great alternative when Ruby on Rails is not available, and in some regards I have found it surpasses Rails. One thing that is sorely lacking though is solid documentation. Both the Docs and API listing at cakephp.org are soley lacking in useful information - and the little but important details that are left out can cause endless hours of frustration for the developer new to Cake. I spent the bulk of the day trying to figure out something that would have taken a matter of seconds to do in either straight PHP or Rails, not just because I had existing code to reference, but also because of documentation that is both plentiful and useful. To that end, I thought I should make some attempt to lessen the hassle of anybody else having similar problems by presenting a brief and hopefully helpfuly tutorial on creating a drag and drop sortable list using CakePHP in combination with Prototype and Scriptaculous….
Set Up Your Model
The only thing that’s required here is a column in your database table to hold the sorted positions. For our purposes here, we’ll call it ‘position’ and it will be an integer datatype.
Set Up Your Controller:
Note: It’s important to remember to include the javascript and ajax helpers – without these – nothing will work. Don’t forget to turn on debugging in your config file…
All we have set up, aside from the javascript and ajax helpers, is an index function that will display all of our widgets, ordered by the position column in ascending order.
class WidgetsController extends AppController
var $name = 'Widgets';
var $helpers = array('html', 'javascript', 'ajax');
function index() {
$this->set('widgets', $this->Widget->findAll(null, null, 'position ASC', null, null));
}
}
Set Up Your View:
First, you need to include Prototype and Scriptaculous because CakePHP does not include these by default. In this example I assuming you have placed Prototype and all of the Scriptaculous files in the root of your js folder folder inside your app/webroot.
Then you’re going to use the $widgets array we set in our index controller to create an unordered list. What’s important is the id=“widgets” - we’re going to use that when we do our Ajax, and that each of the list items has the id as shown in the code, containing the id number of each respectie record. This is what the sorting action will use to identify the items later.
Finally, you’ll make your widgets item sortable and assign a url to target for an Ajax request: the ‘reorder’ action we’re going to create in our controller
` <?php echo $javascript->link(‘prototype’); ?>; echo $javascript->link(‘scriptaculous’); ?>
?>
-
<?php foreach ($widgets as $widget): ?>
-
Gordon B. Isnor writes about Ruby on Rails, Ember.js, Elm, Elixir, Phoenix, React, Vue and the web.
If you enjoyed this article, you may be interested in the occasional newsletter.I am now available for project work. I have availability to build greenfield sites and applications, to maintain and update/upgrade existing applications, team augmentation. I offer website/web application assessment packages that can help with SEO/security/performance/accessibility and best practices. Let’s talk
Follow @gordonbisnorcomments powered by Disqus