11 Feb

Thickbox Helper for CakePHP

CakePHP, Latest Developments

It's quite difficult to copy-paste JavaScript for same thing again and again. That's why I've come up with Thickbox helper for CakePHP – as a result of a project which involved lot of thickboxes implementations. For those who don't know what it is be sure to check Thickbox jQuery Plugin.

To use it, just include this helper in your controller and Its implementation is very simple:

1. For inline content:

PLAIN TEXT
PHP:
  1. <?
  2. $thickbox->setProperties(array('id'=>'domId', 'height'=>'300', 'width'=>'334')); // set height, width and DOM ID
  3. $thickbox->setPreviewContent('click me'); // the link which will trigger thickbox on click
  4. $thickbox->setMainContent('<div>see it??</div>'); // the content which will be shown in thickbox
  5. echo $thickbox->output();
  6. ?>

 

2. For AJAX:

PLAIN TEXT
PHP:
  1. $thickbox->setProperties(array('id'=>'domId','type'=>'ajax','ajaxUrl'=>'/controller/action'));
  2. $thickbox->setPreviewContent("Click me to see thickbox");
  3. echo $thickbox->output();

Here's the helper:

PLAIN TEXT
PHP:
  1. <?php
  2. class ThickboxHelper extends AppHelper {
  3.  
  4.     var $helpers = array('Javascript', 'Html');
  5.    
  6.     /**
  7.      * Set properties - DOM ID, Height and Width, Type of thickbox window - inline or ajax
  8.      *
  9.      * @param array $options
  10.      */
  11.     function setProperties($options = array())
  12.     {
  13.         if(!isset($options['type']))
  14.         {
  15.             $options['type'] = 'inline';
  16.         }
  17.         $this->options = $options;
  18.     }
  19.    
  20.     function setPreviewContent($content)
  21.     {
  22.         $this->options['previewContent'] = $content;
  23.     }
  24.  
  25.     function setMainContent($content)
  26.     {
  27.         $this->options['mainContent'] = $content;
  28.     }
  29.    
  30.     function reset()
  31.     {
  32.         $this->options = array();
  33.     }
  34.    
  35.     function output()
  36.     {
  37.         extract($this->options);
  38.         if($type=='inline')
  39.         {
  40.             $href = '#TB_inline?';
  41.             $href .= '&inlineId='.$id;
  42.         }
  43.         elseif($type=='ajax')
  44.         {
  45.             $ajaxUrl = $this->Html->url($ajaxUrl);
  46.             $href = $ajaxUrl.'?';
  47.         }
  48.                
  49.         if(isset($height))
  50.         {
  51.             $href .= '&height='.$height;
  52.         }
  53.         if(isset($width))
  54.         {
  55.             $href .= '&width='.$width;
  56.         }
  57.        
  58.        
  59.         $output = '<a class="thickbox" href="'.$href.'">'.$previewContent.'</a>';
  60.        
  61.         if($type=='inline')
  62.         {
  63.             $output .= '<div id="'.$id.'" style="display:none;">'.$mainContent.'</div>';
  64.         }
  65.        
  66.         unset($this->options);
  67.        
  68.         return $output;
  69.     }
  70.    
  71.     function beforeRender()
  72.     {
  73.         $out = $this->Html->css('/effects/css/thickbox.css').'<script src="'.$this->Html->url('/effects/js/thickbox-compressed.js').'"></script>';
  74.         $view =& ClassRegistry::getObject('view');
  75.         $view->addScript($out);
  76.     }
  77.  
  78. }
  79. ?>

 

You'll need to copy the thickbox files to /app/webroot/effects. You can keep it in any folder for that matter, but as our team is following plugins – it's made that way.

- Abhimanyu Grover

2 Responses to “Thickbox Helper for CakePHP”

Subscribe to comments with RSS Feed or TrackBack from your own site.

  1. Robert McWay said,

    on Sat, 14 March, 2009 at 9:56 pm

    Great Helper Guys…one small problem i was hoping you guys could give me some insight on…after i use an ajax call to display a form with your helper, when the form is submitted and the thickbox closes, it redirects the original page to a different url. Any idea how i can keep it on the same page after the thickbox closes? Thanks in advance.

    Regards,
    Robert McWay

  2. Abhimanyu Grover said,

    on Mon, 16 March, 2009 at 5:34 am

    Robert, All you would want to do is prevent default action using JS/jQuery, it has nothing much to do with this helper.

Leave A Reply







Hire us

Contact us to get a free quote on your project.