So you have a link that opens a blank target you would like to open in a modal, eh?
In this example I will present a simple approach using ColdMVC and Progressive Enhancement. What is Progressive Enhancement you ask? That is a hell of a question… and the more you research it, I guarantee you will find an ongoing debate on whether an escalator is Progressive Enhancement or Graceful Degradation. Regardless, the basis of Progressive Enhancement is the approach of building functionality in its simplest form to work in non-modern browsers and then enhancing it to work awesome in modern browsers while Graceful Degradation is the approach of building something awesome for modern browsers and then attempting to accommodate non-modern browsers.
Got it? Good. Let’s get started…
If you are unsure what a layout is, I will defer you to the ColdMVC documentation and a nice post by Tony Nelson about layouts and how they function within ColdMVC:
In this example I will be using ColdMVC, jQuery, and jQueryUI to demonstrate how to take a simple link to a blank target and then hijack it to load in a modal with a modal layout.
Here is what your project should look like:
A quick note before we get started… if you are starting a new project while reading this post, be sure to set ‘datasource=’ equal to blank in your config.ini as we will not be connecting to a datasource.
1 2 3 4 5
Let’s get coding…
Here is our standard layout/default.cfm, controller/UserController.cfc, view/user/list.cfm, and view/user/show.cfm prior to enhancment.
1 2 3 4 5 6 7 8
1 2 3 4 5 6 7 8 9 10 11 12 13
At this point the ‘Open Me!’ link should open the blank target ‘This is my content!’ as demonstrated in the images below…
Working? Cool! Let’s enhance it!
Let’s start by updating our standard layout to load jQuery, jQueryUI, and application.js.
1 2 3 4 5 6 7 8 9 10 11 12
Now lets add a modal layout.
To load the correct layout by discerning regular requests from ajax requests, update your controller by adding the function annotation @ajaxLayout and set it to load layouts/modal.cfm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Next let’s update view/list.cfm by adding a class of ‘modal’ to our anchor tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
Ok, let’s check it out. If all is correctly in place.
When ‘Open Me!’ is clicked…
…The click event should be hijacked and a jQueryUI Dialog should open containing the view/user/show.cfm in the modal layout.
Yeehaa! We have modal layout Progressive Enhancment with ColdMVC, jQuery, and jQueryUI.