CFCLIENT: Doc examples do not work; Can't get anything to work?

Question

So I realize that the new CF11 mobile features have been received with some very mixed reviews, but I wanted to try them out to see if I could use them for some really simple device detection, however I cannot get anything to actually work.

For example, I am looking at the doc for cfclientsettings, specifically at the first example on the page under the "Device detection" heading. Here's the code for reference (I formatted it a little to ensure it's easy to read here):

<cfClientSettings detectDevice=true /> 
<cfclient>
    <cffunction access="public" name="showCanvasSupport" returntype="void">
        <cfset evalStr = "document.getElementById('canvas').innerHTML='" & cfclient.canvas & "'">
    </cffunction>
</cfclient>

Canvas support -<b id="canvas"></b><br>
<button onclick="invokeCFClientFunction('showCanvasSupport',null)">Show canvas support</button>

Creating a new .cfm page and adding this code produces the text and button on the page, but clicking the button throws a JS error in Chrome: "Uncaught The function signature is invokeCFClientFunction(functionName [, arg1, arg2, arg3, ...], successCallback, failureCallback). The functionName, successCallback and failureCallback are mandatory. If you don't have a successCallback or failureCallback, null can be passed as the value."

Ok, not great. So I checked some more docs and decided to add another null argument to the invokeCFClientFunction() call to fix the missing callback. This at least corrects the JS error, but now nothing at all happens when clicking the button.

So after some more fussing, I arrived at the following code, which still does not work, but seems closer:

<cfClientSettings detectDevice=true />
<cfclient>
    <cffunction access="public" name="showCanvasSupport" returntype="void">
        <cfscript>
            document.getElementById('canvas').innerHTML=cfclient.canvas;
        </cfscript>
    </cffunction>
</cfclient>

Canvas support -<b id="canvas"></b><br>
<button onclick="invokeCFClientFunction('showCanvasSupport',null,null)">Show canvas support</button>

So this code, when you click the button, sets the innerHTML of the canvas element to "undefined". Awesome.

Honestly, I've been trying every example I can find for using cfclient and NONE of them work. Is there some secret I'm missing? I have a sneaking suspicion that if I'm not creating a 'Mobile Project' in CFBuilder that this stuff doesn't work? If so that's stupid and they don't state that in the docs really.

What I'm trying to do, in the end, is simply use cfclient for some basic device detection and to grab the width of the browser/device to do some basic media query style detection very much like in the "Using media queries" section of the cfclientsettings doc. I just want to grab the width and then set a session variable based on it.

I am running a fully patched developer version of CF11 on my Win7 machine setup with IIS. Any and all support is welcome.

Cross post on Adobe Forums: https://forums.adobe.com/thread/1929387

Answer 1

After bashing my head on my keyboard for a while more, I've gotten the cfclient scope working.

I finally found this page in the docs: Device Detection

At first glance, this page seems almost identical to the cfclientsettings doc page, even having the same code examples.

However, where the cfclientsettings doc uses the scope like this:

cfclient.canvas

The Device Detection doc page writes it like this:

cfclient.properties.canvas

Boom. That's of course all it took. What a waste of time. All the cfclient scoped variables work just fine if you add ".properties" in there.

I'm still not sure if the cfclientsettings doc is just plain wrong, or if it's referencing it in a different context. I'll definitely add a comment to it on that point.

(Also, the JavaScript still fails for this example on both doc versions, so there's that.)

Hope this helps somebody who wants to do simple ColdFusion client device detection.