CFAjaxProxy Problems or RTFM

So recently I’d been doing a cfselect box using bind to create my desired linked drop down.  The problem I was having was that I wanted to do a zebra stripe on the select after it had been loaded.  I could not find a way to attach the bind event to anything else so I couldn’t call a function after the bind had actually completed.  The way I wanted to solve this was to use a setTimeout on the coloring process.  The problem I was having was that my serializedJSON output I was using was no longer working.  It turns out – if you read the documentation – that using cfajaxproxy to pull in a CFC automatically serializes your output.  So if you’re returning a result of String with a serializeJSON(myQuery) you will end up with the data being DOUBLE SERIALIZED! Oh what a headache that was.  The proper way to do this:

1
2
3
4
5
6
7
8
9

   <cfajaxproxy cfc="myData" jsclassname="myDataClass" />
 
   <script>
	getData = function(){
		var o = new myDataClass();
		var dataset = o.getData($('toggleField').checked);
		return dataset;
	}
   </script>

Is to have your CFC do this

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<cfcomponent>
	<cffunction name="getData" access="remote" returntype="query">
		<cfargument name="myToggle" type="string" required="yes" default="false" />
 
		<cfset var qryData = 0 />
 
                <cfquery name="qryData " datasource="DATAS">	
			SELECT *
                           FROM tableData
                </cfquery>
 
		<cfreturn qryData>
	</cffunction>
</cfcomponent>

Rather than serializing it yourself first. If you’re binding with a method of cfc: then you don’t need to do this, instead you need to change it to return text and use the SerializeJSON on your qryData query.

script.aculo.us Ajax Sortable Lists adjustment for ColdFusion

So normally I’m a YUI guy. I enjoy their widgets and some of the other features available, and I’m comfortable with it. I work with several sites here that my co-workers work on, and they often prefer different JS Libraries. So I try to minimize the libraries on a site. Nothing more difficult, I feel, when you’re maintaining a website and have to maintain YUI, jQuery, Dojo, and Script.aculo.us/Prototype all at the same time and with all of those libraries loading for a client!

So I had to repair something that wasn’t working in IE8 (imagine that ) that was written quite some time ago. The site had script.aculo.us/prototype on it so I wanted to stick with that library. Thankfully, I came across this post: http://zenofshen.com/posts/ajax-sortable-lists-tutorial and it’s a pretty handy layout for PHP and Script.aculo.us. The problem arises at the bottom of the post. In PHP, you would be fine using this:

1

parse_str($_POST['data']);

ColdFusion won’t parse out the string of list_to_sort[]=2&list_to_sort[]=1&list_to_sort[]=3 like that though. So I recommend making this adjustment to what’s coming through:

1
2
3
4
5
6
7
8
9
10
11

<cfset newList = ListChangeDelims(url.data, "|", "list_to_sort[]=,&list_to_sort[]=")>
<cfset sortPos = listLen(newList, "|")>
 
<cfloop list="#newList#" delimiters="|" index="thisID">
       <cfquery name="insertSort" datasource="#request.source#">
               INSERT INTO 'table' (listID, sortOrder)
                     VALUES (#thisID#, #sortPos#)
        </cfquery>
 
        <cfset sortPos = sortPos - 1 />
</cfloop>

YUI Loader – “other is undefined”

So today I was getting the nice cryptic message of “other is undefined” when I was trying to call loader.require on an object.  Once I dug through my code I was trying to replicate from another section of the site, I realized that the details behind this was leaving out the loader.addModule section of code.  So if you come across this, take a look through your addModule sections to make sure you have all of the pieces you’re trying to add onto the code!

Replacement for JavaScript Split

So the other day I was working on some JavaScript processing and it was working great in Firefox.  When I went to use it in IE7 it didn’t do a darn thing right.  I couldn’t figure out what was going on until somewhere I read that the Split function wasn’t the same in all browsers.  That was one of those WTF moments for me, but after some digging I came across a script by Steve Levithan that really does the job well.  Since that site is currently down, I’m including a copy of the file here for people: NewSplit.js.  If you want to simply view and copy, here it is as well:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

/*
Cross-Browser Split 0.3
By Steven Levithan &lt;<a href="http://stevenlevithan.com">http://stevenlevithan.com</a>&gt;
MIT license
Provides a consistent cross-browser, ECMA-262 v3 compliant split method
*/
 
String.prototype._$$split = String.prototype._$$split || String.prototype.split;
 
String.prototype.split = function (s /* separator */, limit) {
// if separator is not a regex, use the native split method
if (!(s instanceof RegExp)) {
return String.prototype._$$split.apply(this, arguments);
}
 
varflags = (s.global ? "g" : "") + (s.ignoreCase ? "i" : "") + (s.multiline ? "m" : ""),
s2 = new RegExp("^" + s.source + "$", flags),
output = [],
origLastIndex = s.lastIndex,
lastLastIndex = 0,
i = 0, match, lastLength;</code>
 
/* behavior for limit: if it's...
- undefined: no limit
- NaN or zero: return an empty array
- a positive number: use limit after dropping any decimal
- a negative number: no limit
- other: type-convert, then use the above rules
 
*/
if (limit === undefined || +limit &lt; 0) {
limit = false;
} else {
limit = Math.floor(+limit);
if (!limit)
return [];
}
 
if (s.global)
s.lastIndex = 0;
else
s = new RegExp(s.source, "g" + flags);
 
while ((!limit || i++ &lt;= limit) &amp;&amp; (match = s.exec(this))) {
var emptyMatch = !match[0].length;
 
// Fix IE's infinite-loop-resistant but incorrect lastIndex
if (emptyMatch &amp;&amp; s.lastIndex &gt; match.index)
s.lastIndex--;
 
if (s.lastIndex &gt; lastLastIndex) {
// Fix browsers whose exec methods don't consistently return undefined for non-participating capturing groups
if (match.length &gt; 1) {
match[0].replace(s2, function () {
for (var j = 1; j &lt; arguments.length - 2; j++) {
if (arguments[j] === undefined)
match[j] = undefined;
}
});
}
 
output = output.concat(this.slice(lastLastIndex, match.index));
if (1 &lt; match.length &amp;&amp; match.index &lt; this.length)
output = output.concat(match.slice(1));
lastLength = match[0].length; // only needed if s.lastIndex === this.length
lastLastIndex = s.lastIndex;
}
 
if (emptyMatch)
s.lastIndex++; // avoid an infinite loop
}
 
// since this uses test(), output must be generated before restoring lastIndex
output = lastLastIndex === this.length ?
(s.test("") &amp;&amp; !lastLength ? output : output.concat("")) :
(limit ? output : output.concat(this.slice(lastLastIndex)));
s.lastIndex = origLastIndex; // only needed if s.global, else we're working with a copy of the regex
 
return output;
};

YUI Tab View – Getting the BeforeAction to work

So I’ve been building a section of a website using the YUI TabView and having some difficulty getting the beforeActiveTabChangeevent to work right.  Now I was using version 2.5.2 first, and in that version, this event doesn’t even fire.  So I tried using beforeActiveChange on the tab itself.  I could get this to fire, but returning false as the documents say to do, would not stop the event from continuing.  So I did some digging, and found a post somewhere out there – I’ve lost it now – saying that 2.6 fixed this problem.  Well I tried that for a little while, and found that in 2.6, TabView’s beforeActiveTabChange does indeed fire, but it has the same problem that beforeActiveChange had in 2.5.2 – returning false does nothing.

Well as you can imagine, I found this to be frustrating.  So I started doing a little more digging – had a post on the YUI Developer boards go unanswered, googled a bunch of things – and then stumbled on to the face that 2.7 had been released.  Well I tried using that – figuring what the heck – and it worked! beforeActiveTabChange stopped the tabs from changing if false was returned!  Hallelujah!  Now I haven’t tried to see if beforeActiveChange at the tab level works now or not, but I’m just so happy to have the TabView event work.