Using a Thickbox Modal Window with AJAX

Thickbox is a great javascript plugin to jQuery that you can use to create modal windows within SilverStripe pages.  You can de-clutter your interfaces and re-use small snippets of common functions when you add in AJAX.  Before we begin there is a little homework:

• Read the AJAX Basics Recipe on the Doc Wiki
• Its a good idea to use some kind of naming convention with your methods and template so you don't get them confused.  I typically prepend them with lower case ajax.

For this example we will be creating a simple Clock that will be returning the time through a custom template in a Thickbox.  This is not very complex but it does illustrate the possibilities with modals and AJAX calls.

We will start with a standard Page type that has been created.  The Absolute URL to access our page is /my-page/

Lets begin

First, lets create the template we will be using to populate our Thickbox window.  You will need to create this at the top level of your template directory, as we will be using renderWith() to send the content to the browser.

/mysite/templates/ajaxClock.ss

<h1>Clock</h1> $Time <a href="#" false">Close This</a>

 

Notice the javascript onClick event, the function tb_remove() is required to close the Thickbox window when using the optional modal=true setting.

Next, lets get our requirements squared away.  The best place to do this is in the init() function of the Controller you will be using Thickbox from.

/mysite/code/model/Page.php (Page_Controller class):

public function init() { parent::init(); Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery-packed.js'); Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/thickbox/thickbox-code/thickbox.js'); Requirements::css(THIRDPARTY_DIR . '/jquery/plugins/thickbox/thickbox-code/thickbox.css'); }

 

And lets add the function to return the template and data in that same class:

public function ajaxTime() { if( Director::is_ajax() ) { $time = date(); $return = array('Time' => $time); return $this->renderWith('ajaxClock',$return); } }

 

Now from our Page AJAX calls will have access to /my-page/ajaxTime after we flush.   You can use Firebug to check out what happens.

The last step is to add the proper link to our regular Page template to invoke our Thickbox Clock.

/mysite/templates/Page.ss:

... <!-- Somewhere, anywhere really --> <a href="$URLSegment/ajaxTime?height=200&width=300&modal=true" class="thickbox">What time is it?</a> ...

 

After flushing you should see these links included in your Pages.  Clicking on the link above will bring up a nice Thickbox with your content.  Merely adding the class="thickbox" will make everything work (thanks to the magic of the jQuery team and Cody Lindley).

That's all!

Thickbox working smoothly within your SS pages with AJAX.  Go ahead and add all those nerdy frameworks and acronyms to your resume.

Note: If you want to use the Loading Bar animation that comes with Thickbox, you will have make the following change to the core jsparty library.

/jsparty/jquery/plugins/thickbox/thickbox-code/thickbox.js:

var tb_pathToImage = "/jsparty/jquery/plugins/thickbox/images/loadingAnimation.gif";

 

About the Author