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

Community Beginner ,
Aug 17, 2015 Aug 17, 2015

Copy link to clipboard

Copied

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.

Message was edited by: Andrew Regis Fixed a few spelling/grammer errors!

Views

575

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Community Beginner , Aug 18, 2015 Aug 18, 2015
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 DetectionAt 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.canvasThe Device Detection doc page writes it like this:cfclient.properties.canvasBoom. That's of course all it took. What a waste of time. All the cfclient s...

Likes

Translate

Translate
Community Beginner ,
Aug 18, 2015 Aug 18, 2015

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines