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:

Be aware that there are significant javascript changes in 2.4 and this example is current as of 2.3.3

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="#" 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.

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.