I have seen some confusion when it comes to using invokeCFClientFunction. I have been asked this question a few times, more recently on LinkedIn, so I thought explaining it in a blog post might be a good idea.<\/p>\n
If you don’t know already, ColdFusion Splendor has added support for client side CFML (<cfclient>) and this code is translated to JavaScript. \u00a0You can call JavaScript functions from cfclient and vice versa.<\/p>\n
cfclient also makes calling asynchronous functions of PhoneGap easy by providing synchronous access to them. All device APIs are asynchronous in nature, but in cfclient block you call then as synchronous functions and ColdFusion translates them to asynchronous PhoneGap functions. All function starting with ‘cfclient.’, e.g. cfclient.camera.getPicture(), are asynchronous. In addition to device APIs, data access function, executeQuery and tag, cfquery, are also asynchronous in cfclient.<\/p>\n
When you call asynchronous functions in cfclient, ColdFusion takes care of chaining callback functions – any code following an\u00a0asynchronous\u00a0function goes in the success callback function. But if you call asynchronous cfclient function form JavaScript code block, then ColdFusion compiler does not touch it. Note that if a UDF in cfclient block calls any asynchronous function (e.g. cfquery or any device APIs) then that function also becomes asynchronous.<\/p>\n
Let’s see an example. In the following code, I have a UDF in cfclient block, createDatabase. It does not need any argument, but let’s say it takes one argument, arg1. This function calls queryExecute function, which is an asynchronous function – so createDatabase function also becomes asynchronous. If you call it from JavaScript and have some JS code to be executed\u00a0only after database is created, then calling createDatabase function directly from JavaScript is not going to work as expected –<\/p>\n
<cfclient><\/span>\n <cfscript><\/span>\n\tfunction<\/span> createDatabase<\/span>(arg1<\/span>)\n\t{\n\t\tconsole.log<\/span>(\"arg1 = \"<\/span> +<\/span> arg1<\/span>);\n\t\ttry<\/span>\n\t\t{\n\t\t\tqueryExecute<\/span>(\n\t\t\t\t\t\"create table if not exists expense (id integer primary key, <\/span>\n\t\t\t\t\texpense_date integer, amount real, desc text, receipt_path text)\"<\/span>,\n\t\t\t\t[],\n\t\t\t\t{\"datasource\"<\/span>:\"tempDsn\"<\/span>});\n\t\t\tconsole.log<\/span>(\"Database created\"<\/span>);\n\t\t}\n\t\tcatch<\/span> (any<\/span> e<\/span>)\n\t\t{\n\t\t console.log<\/span>(\"Error : \"<\/span> +<\/span> e.message<\/span>);\n\t\t\t\treturn<\/span> false<\/span>;\n\t\t\t}\n\t\t return<\/span> true<\/span>;\n\t\t}\n\n <\/cfscript><\/span>\n<\/cfclient><\/span>\n\n<script ><\/span>\n ret =<\/span> createDatabase();\n console.log(\"After creating database. ret = \" + ret<\/span>);\n<\/script><\/span>\n<\/pre>\n<\/div>\nThere is one console.log in createDatabase function immediately after queryExecute. createDatabase is called from a JavaScript block and after the function call, there is a console.log statement to print return value.<\/p>\n
If you execute this code in Chrome\/Safari, you will see following output –<\/p>\n