Yesterday a reader wrote me with an interesting question. He was using ColdFusion's Ajax controls to load content into a cfdiv. Within the content loaded via Ajax, he had a simple form with some checkboxes. He wanted to use jQuery to support a "Check All" button. For some reason though the event handler he used never worked. Let's take a look at his initial code.
Dave asks:
I have a question regardingmasks.
I'm usingwhich includes a few phone number entry fields. I'm applying a mask of "999-999-9999" (since it's all US phone numbers). The resulting HTML includes a CF generated script that focuses the cursor on any fields that contain a mask in order to apply it to the initial value.
Is there a way to disable this but retain the mask? My client is saying that the page "jumps" to the phone number fields instead of loading at the top of the page.
Patricks asks:
Having an interesting dilemma that I cannot seem to come up with a working solution to. I have a text box that we need people to enter a time into. I dont want it to be a mask but rather onBlur the string "completes" with the proper format. For example, the user enters 3:29.2 for their time, onBlur the result needs to be 00:03:29.20. Or the user enters 4.6, onblur should result in 00:00:04.60. Just curious if you could point me in the right direction or come up with a demo, I think this would be very useful to many folks as a blog entry.
So let me state right off - I really don't like formatting in JavaScript. If I'm doing any kind of Ajax development and need the data to look nice, I will almost always do the formatting in ColdFusion first. ColdFusion has spoiled me, what can I say? So please keep that in mind when reviewing my solution. There are probably a hundred different ways to do this (better) but hopefully this will be helpful anyway.
A few days ago I did some mentoring with a ColdFusion developer in Baton Rouge. He was also doing some Flex and I got to take a look at some of his work. He was making use of a feature I had not seen before, ExternalInterface. This is a rather interesting little feature. It lets you create a bridge between your Flex code and JavaScript code on the page. This is not the same as the Flex Ajax Bridge (which apparently was a Labs product and then moved into core Flex 3). I plan on looking at that more later, but here is some basic info about ExternalInterface.
Have you ever wondered how you could create JavaScript data from ColdFusion? Now before you say anything, I'm not talking about AJAX. While using AJAX to load data into the client is probably the most often used way to do this, it certainly isn't the only way. Consider the following example.
Links
May 31
Just a quick recap of external blog posts. My last entry for this was back on April 26th.
- Sports Tournament Style Brackets with jQuery and jQuery UI (3)
- Sports Tournament Style Brackets with jQuery and jQuery UI (2)
- jQuery FTW (May 16)
- Sports Tournament Style Brackets with jQuery and jQuery UI
- Open Question: When not to RIA?
- jQuery FTW (May 2)
- Detecting an End of Session Event with jQuery
As yet another followup to my blog entry on CFTHREAD, a user asked about how to present a 'Please stand by' type message while the threads were running. This is fairly trivial with JavaScript and CFFLUSH:
Just a quick note to say my latest Adobe Developer Center article just went live: Using Dreamweaver, InContext Editing, and Spry to build a dynamic site. Looks like I need to update the bio though. If you've never looked at, or even heard of, InContext Editing, definitely read the article. I was really pleasantly surprised by how cool it worked.
Simple CFCHART/jQuery Demo
May 15
I had some time to kill today and I decide to mix cfchart up with some jQuery love. You can see the demo of this here. When the chart loads, click on the bars, and you will see a detail load beneath the graph.
The code behind this is fairly trivial. I've got a file I include to generate my chart data. Normally this would be a proper database query. The main template's code consists of:
The code behind this is fairly trivial. I've got a file I include to generate my chart data. Normally this would be a proper database query. The main template's code consists of:
1 <cfinclude template="data.cfm">
2
3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
4 <script>
5 function loadData(l) {
6 $("#detail").load('detail.cfm?name='+escape(l)).hide().fadeIn('slow')
7 }
8 </script>
9
10 <cfchart chartWidth="500" chartHeight="250" format="flash" url="javascript:loadData('$ITEMLABEL$')">
11 <cfchartseries type="bar" query="data" itemcolumn="name" valuecolumn="sales" />
12 </cfchart>
13
14 <div id="detail" style="width:500"></div>
The cfchart makes use of the url attribute to specify what should happen when you click. In this case, I'm simply calling a function, loadData(). This then uses jQuery to make a remote call to detail.cfm. Note that I pass the name. Normally you would pass a primary key, but we don't have (easy) access to that (see this entry for more info) value so we have to work with the name instead. That's it. All detail.cfm does is look up the detail information:
2
3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
4 <script>
5 function loadData(l) {
6 $("#detail").load('detail.cfm?name='+escape(l)).hide().fadeIn('slow')
7 }
8 </script>
9
10 <cfchart chartWidth="500" chartHeight="250" format="flash" url="javascript:loadData('$ITEMLABEL$')">
11 <cfchartseries type="bar" query="data" itemcolumn="name" valuecolumn="sales" />
12 </cfchart>
13
14 <div id="detail" style="width:500"></div>
1 <cfinclude template="data.cfm">
2
3 <cfparam name="url.name" default="">
4
5 <!--- get detail based on label --->
6 <cfquery name="detail" dbtype="query">
7 select *
8 from data
9 where name = <cfqueryparam cfsqltype="cf_sql_varchar" value="#url.name#">
10 </cfquery>
11
12 <cfif detail.recordCount is 1>
13
14 <cfoutput>
15 <h2>#url.name#</h2>
16 <p>
17 Founded: #detail.yearfounded#<br/>
18 Sales: #dollarFormat(detail.sales)#<br/>
19 #paragraphFormat(detail.bio)#
20 </cfoutput>
21
22 </cfif>
Not terribly useful I guess, but fun.
2
3 <cfparam name="url.name" default="">
4
5 <!--- get detail based on label --->
6 <cfquery name="detail" dbtype="query">
7 select *
8 from data
9 where name = <cfqueryparam cfsqltype="cf_sql_varchar" value="#url.name#">
10 </cfquery>
11
12 <cfif detail.recordCount is 1>
13
14 <cfoutput>
15 <h2>#url.name#</h2>
16 <p>
17 Founded: #detail.yearfounded#<br/>
18 Sales: #dollarFormat(detail.sales)#<br/>
19 #paragraphFormat(detail.bio)#
20 </cfoutput>
21
22 </cfif>
Following up on my earlier post demonstrating loading ColdFusion query data via jQuery, I've decided to do a few more simple jQuery+ColdFusion examples to give folks a taste of how easy it is to work with them both at the same time. For today's entry I'm going to show a very simple form post. This is as about as trivial as you can get, but I'm going to follow it up the next few days with a few more examples that will build upon it. So with that in mind, let's take a quick look at the code.