CakePHP, draggable/droppable in jQuery

Andrey Vystavkin — Sat, 27 Mar 2010 09:41:13 +0000

Working on bunch of CRUD routines in CakePHP, I finally got tired of multiple checkboxes and decided to write a small helper for jQuery UI drag-n-drop functionality.

In response to Teknoid post, I’ve made couple of additional tweaks to dynamic select boxes, and got quite nice combination of selectboxes and dynamic lists.

The main requirement of the script was:

On Selectbox value changed, return the list of related items (in #base-list div-element)
Add drag/drop functionality to the base-list ul elements as well as add arrow-west/arrow-east addition/deletion of the elements
After all the movements are over, to be able to save dragged values in CakePHP form to be saved.
Result: here.
Sample MySQL DB file: Here

The view/helpers/droppable.php looks like:

 tag
    */
    function droppableElements($outside = false) {
        $js_code = "";
 
        $js_code = '
                    var $baseDiv = $(\'#base-list\');
                    var $targetDiv = $(\'#target-list\');
 
                    $(\'li\', \'#baseUl\' ).draggable({
                        accept: \'#baseUl > li\',
                        revert: \'invalid\',
                        helper: \'clone\',
                        cursor: \'move\'
                    }); 
 
                    $(\'li\', \'#targetUl\' ).draggable({
                        accept: \'#targetUl > li\',
                        revert: \'invalid\',
                        helper: \'clone\',
                        cursor: \'move\'
                    }); 
 
                    $targetDiv.droppable({
                        accept: \'#baseUl > li\',
                        activeClass: \'ui-state-highlight\',
                        drop: function(ev, ui) {
                            moveItem(ui.draggable, $targetDiv);
                        }
                    });
 
                    $baseDiv.droppable({
                        accept: \'#targetUl > li\',
                        activeClass: \'ui-state-highlight\',
                        drop: function(ev,ui) {
                            moveItem(ui.draggable, $baseDiv);
                        }
                    });
 
                    $(\'#baseUl > li\').click(function(ev){
                        moveItemClicked($(this), $(this).parent());
                    });
 
                    $(\'#targetUl > li\').click(function(ev){
                        moveItemClicked($(this), $(this).parent());
                    });';
 
            if($outside) {
                $this-&gt;out .= $this->Javascript->codeBlock($js_code);
                return $this->out;
            } else {
                return $js_code;
            }
 
    }
 
    /*
    *   @var string $boxId - observed selectBox id element
    *   @var string $eventType - default 'change'
    *   @var string $jsonAction - method call, i.e '/departments/ajax_get_list/departments/company_id/'
    */
 
    function observeSelectBox($boxId, $eventType = 'change', $jsonAction) {
        $js_script = "";
 
        $js_script ='
          $(\'#'.$boxId.'\').live(\''.$eventType.'\', function(){
            if($(this).val().length != 0) {
            $.getJSON(\''.$jsonAction.'\',
                {searchParam: $(this).val() }, 
 
                function(items) {
                    $(\'.jq_list\').remove();
                    generateBaseList(items);
 
                '.$this->droppableElements().'
                }
            );
        }
        } );';
 
        $this->out .= $this->Javascript->codeBlock($js_script);
 
        return $this->out;
    }
 
}?>

For using so-called ajax_get_list method, I’ve written a small function in app/app_controller.php that get all the id,name list array based on couple of arguments:

In order to use this method, you should have a small layout in related views folder, that looks like:


    // somewhere in views/departments/ajax_get_list.ctp
   if(isset($items)) {
        echo $javascript->object($items);
 }?>

The view of ajax_get_list method will output serialized array of the method. For the initial view, you need to add 2 div-elements and one select box. Div elements have static id’s which are used by jQuery script to look-up (base-list, and target-list).
In our view, it should look like:

  echo $droppable->observeSelectBox('company-id','change','/departments/ajax_get_list/departments/company_id/');?>
 
         Load company departments: 
         print $form->select('Company.id', $companies, null, array('id'=>'company-id'), 'Company Departments);?>
 
        div('right block', $html->div('target-title', 'Container', array(), false),array('id'=>'target-list'),false);?> 
 
        div(null,null, array('id'=>'base-list'));
?>

And that’s about it, once you finish dragging the li-elements to the target-list, and save the form, its values will appear in ['Container']['item_ids'] array where you can do whatever you want with it.
To make things simple, you can download a small sample of code of these files here, as well as database sample file.

CakePHP: jQuery styling of flash messages

Andrey Vystavkin — Fri, 30 Jan 2009 14:38:30 +0000

CakePHP session flash messages is one of the most useful things for usability, and user notification. Trying to make it more fancy, I came to jQuery framework with its HighlightFade plugin.

Adding just a couple of lines, we can get nice effects, looking the same as WordPress messages in Posting/Editing:

      var $j = jQuery.noConflict(); //I'm using Prototype as well, so we don't need conflicts
$j(document).ready(function() {
       if( $j("#flashMessage") ){ 
          $j("#flashMessage").highlightFade({color:'#24F273',speed:2000, iterator:'exponential'});
       }
});

Thus, next time you will pass $this->Session->setFlash('Foo');, your flash message with default

 $session->flash();?>

will be used with above HighLight effect.

Andrey Vystavkin Blog » jQuery

CakePHP, draggable/droppable in jQuery

CakePHP: jQuery styling of flash messages