Modal Helper for ColdMVC

So during my spare time I have been working on a wedding site for myself and its written in a coworker's Coldfusion framework ColdMVC. Within learning the language I decided I was going to create my own custom helper for a modal window. I went with the jQuery modal library jQModal. The way I created the helper you can use whatever modal window library you want this is just one that I like. But anyways enough with that let's look at some code.

So a typical ColdMVC directory will look like this. Inside I have a Helpers folder. This folder is where you will put your CFCs that contain your helper functions. I do believe you can override the built in functions if they are the same name and function name? I am not positive but I can find out.

My modal CFC contains one function called display and this is where you would put your HTML to render your modal window. Since I went with jQModal I have had to add some certain classes that only pertain to that library. Your function might be different.

view plain print about
1<cffunction name="Display" returntype="any">
2        <cfargument name="ID" required="true" />
3        <cfargument name="URL" required="false" default="" />
4        <cfargument name="Content" required="false" default="" />
5        <cfargument name="Label" required="false" default="" />
6        <cfargument name="Title" required="false" default="Modal Window" />
7        <cfargument name="Loading" required="false" default="" />
8        
9        <cfset var html = "" />
10        
11        <cfsavecontent variable="html">
12            <cfoutput>
13            <script type="text/javascript">
14                $(document).ready(function() {
15                    $('###arguments.ID#').jqm({
16                            modal: true,
17                            trigger: 'a.modal_link#arguments.ID#'
18                            <cfif arguments.URL NEQ "">
19                                ,ajax: '#arguments.URL#'
20                                ,ajaxText: "#arguments.Loading#"
21                            </cfif>
22                    });
23                });
24            </script>
25            
26            <div id="#arguments.ID#" class="jqmWindow">
27                <div class="modal_title">#arguments.title# <div class="floatright text_right"><a href="##" class="jqmClose">Close</a></div></div>
28                <div class="text_left">
29                    <div class="modal_content content">
30                        #arguments.Content#
31                    </div>
32                </div>
33            </div>
34            <a href="##" class="modal_link#arguments.ID#">#arguments.label#</a>
35            </cfoutput>
36        </cfsavecontent>
37        
38        <cfreturn html>
39    </cffunction>

The function itself accepts an ID which is required and must be unique. This is for the fact that if you want to have multiple modal windows on your page we need them to be unique. The URL argument is used if you are doing an AJAX call. This will do a refresh every time you make a call to the modal window. The content argument is used if you want to send in content to the window by using cfsavecontent and passing the variable to the function. The label argument is used for the link. This can be modified if you want to do something different to display for the user to trigger the modal window. Title is the title of the argument. By default the window will just say "Modal Window" this is incase I forgot to include a title of course you don't HAVE to have a title, but I like it. Loading is just some HTML that I display for the AJAX calls so the user just doesn't see a blank window.

So that's the function now how do we use it? Well there are two ways I use the modal window. Well there is two different ways you can use it. First is if you want to take some content and pass it to the modal window. Here is how I do that:

view plain print about
1<cfsavecontent variable="text">
2Hello World!
3</cfsavecontent>
4
5<cfoutput>
6#$.modal.display(label="Click Me", Content=text, id="displaycontent", title="How We Met")#
7</cfoutput>

Now if you are not familiar with ColdMVC I suggest visiting: Tony Nelson's blog and read up on some of his posts explaining the ins and outs on the framework. But just for this blog I will explain that $ replaces the helper scope inside ColdMVC so you don't have to type out helpers every time. That's one way I call the modal helper. The next way is by making an AJAX request.

This way is a bit more trickier:

view plain print about
1#$.modal.display(ID="loginWindow", URL="#linkTo({controller='wedding',action='loginform'},'currentView=#cgi.path_info#')#",label="Login", loading="<div class='text_left'>Loading<marquee style='width: 1.5em;'>.....</marquee>")#

The first thing I do is use the built in ColdMVC linkTo() function to link to my controller and pass the action of loginform. Again, ColdMVC is going to know how to use that and render the correct view. The only other thing different is I pass in some HTML for loading so I can display loading to the user while the page loads. *note my best use of the marquee tag ;)* And that's pretty much it. I have some custom css for displaying the modal window and it comes out looking like this:

Example of non AJAX modal:

Example of AJAX modal:

Note I am in no way the best designer. I am sure someone could design a better window. I am up for suggestions.

Also here is a link to the jQuery plugin I used jQModal

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Scott Smith's Gravatar Does this plugin sit on top of jqueryui dialog? I'm on my phone so I haven't opened the plugin and looked yet. Just wondering because I just used that for the first time the other day and now I am curious.
# Posted By Scott Smith | 7/15/10 7:04 PM
Ryan Vikander's Gravatar No I am not using jQuery UI at all for this modal. But you could if you wanted to. Just replace the HTML with whatever you wanted to use for your modal window. The Coldfusion syntax doesn't really need to change much.
# Posted By Ryan Vikander | 7/15/10 7:10 PM
Scott Smith's Gravatar I actually meant is jqmodal using jqueryui dialog?
# Posted By Scott Smith | 7/15/10 7:21 PM
Ryan Vikander's Gravatar No, it isn't built ontop of jquery ui.
# Posted By Ryan Vikander | 7/16/10 12:50 AM
Tony Nelson's Gravatar Good stuff. As for "I do believe you can override the built in functions if they are the same name and function name?", you're correct. If you want to override any ColdMVC helper, just create a helper with the same name and the framework will use your helper instead of its own.

Also, while your markup does work, I'm not a huge fan of seeing #$ next to each other. It just doesn't read that well. To get around that, you could also create a displayModal() view helper that just delegated the request to the display helper, so your code would look like this:

#displayModal(label="Click Me", Content=text, id="displaycontent", title="How We Met")#

Otherwise you could also create a custom tag, which could allow your code to look like the following:

<c:modal label="Click Me" Content="#text#" id="displaycontent" title="How We Met" />

or even

<c:modal label="Click Me" id="displaycontent" title="How We Met">
   Hello World!
</c:modal>

Nice work though. Glad to see you're using the framework. :)
# Posted By Tony Nelson | 7/16/10 11:01 AM
Joe Banken's Gravatar I haven't tested the code yet, but looks good so far. Would it be possible to just generate a link and/or call the Modal from JS? I just ask because sometimes I would like an <a> and other times I want a <input type="button">. Looks like you could possibly pass it in through the "label" argument.

Another approach would be that you could separate the <div class="jqmWindow"> and js into separate functions so that they could be included into a layout. Then have a function to create your link to the modal. Example:

On a layout all modals would run through this...
#$.modal.renderContainer()#

In the layout header...
#$.modal.renderJS()#

Then in the view just create a link function so I could do whatever with it...
#$.modal.renderLink()#

Then I can do this for a modal that would show a quick view of a product stats.

<a href="#$.modal.renderLink(view="product/modal.cfm",id=product)#">Product Stats</a>

or

<input type="button" value="Product Stats" onclick="#$.modal.renderLink(view="product/modal.cfm",id=product)#"/>

To know that modal should be rendered instead of regular link you would have to have $.modal.renderLink() automatically append a par that would be like "&renderModal=true".
# Posted By Joe Banken | 7/18/10 11:26 PM
Ryan Vikander's Gravatar You just have to specify what the trigger is. Right now I have it set to a.modal_link and the ID that you pass in. That can be changed to whatever you wish.

Also to determine whether you want a button or a text link you could specify an argument to determine what to render. I think I get what you are saying by separating the function into separate functions. Maybe we will have to talk later and come up with something.
# Posted By Ryan Vikander | 7/19/10 10:57 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.6.004. Contact Blog Owner