Andy Jarrett: Populating related cfselects via Flash Remoting

Loading Twitter

Populating related cfselects via Flash Remoting

First of let me say that as much as I would love this to be my code it mainly comes out of two posts [1,2] on ASFusion.com.

To sidetrack for a moment, I must point out now is that even if you don't find answers in the Asfusion posts always check the comments out! They get up to 50+ comments on some posts with hints and tips there as well.

Back to the form. I had a project which started life as a 5 page HTML form with the need to make it a little user friendly to the eyes and more organised. Any form over 2 pages I hate in general and I seem to be the only person in the world who thinks one long page is better than X amount of multiple pages this is whether i'm filling them in or creating them.

In moving my HTML form over to <cfform format="flash"> I ran into the problem of having to duplicate some Ajax where one select is populated from a DB then another select is populated from there. It didn't take too much digging around and I thought i'd share in case it helps anyone else out. My Flash/As knowledge isn't 100% so if you see an easier way drop me a line in the comments.

First of the CFC

flashRemotingResponder.cfc

view plain print about

1<cfcomponent name="flashRemotingResponder" access="public" description="Responds to Flash remoting requests">
2
3<cffunction name="getBrands" output="false" access="remote" returntype="query">
4
5    <cfset var qry = ""/>
6    <cfset var brandQry = queryNew("brand_code,brand_name") />
7
8    <cfscript>
9        queryAddRow(brandQry);
10            querySetCell(brandQry,'brand_code','dell');
11            querySetCell(brandQry,'brand_name','Dell');
12        queryAddRow(brandQry);
13            querySetCell(brandQry,'brand_code','apple');
14            querySetCell(brandQry,'brand_name','Apple Inc.');
15        queryAddRow(brandQry);
16            querySetCell(brandQry,'brand_code','microsoft');
17            querySetCell(brandQry,'brand_name','Microsoft Corp.');
18    </cfscript>
19
20    <cfquery dbtype="query" name="qry">
21        SELECT
22         brand_code, brand_name
23        FROM brandQry
24    </cfquery>
25
26    <cfreturn qry />
27</cffunction>
28
29
30
31<cffunction name="getModels" access="remote" output="false" returntype="query">
32    <cfargument name="brand" type="string" />
33
34    <cfset var qry = ""/>
35    <cfset var modelQry = queryNew("model_number,model_description,brand_code") />
36    <cfset var brand_code = arguments.brand />
37
38    <cfscript>
39        queryAddRow(modelQry);
40            querySetCell(modelQry,'model_number','123-qwe');
41            querySetCell(modelQry,'model_description','Apple Mac Book Pro 15.4"');
42            querySetCell(modelQry,'brand_code','apple');
43        queryAddRow(modelQry);
44            querySetCell(modelQry,'model_number','987123-123');
45            querySetCell(modelQry,'model_description','Apple Mac Book Pro 17"');
46            querySetCell(modelQry,'brand_code','apple');
47        queryAddRow(modelQry);
48            querySetCell(modelQry,'model_number','asdpo-1232');
49            querySetCell(modelQry,'model_description','Apple 72" Monitor');
50            querySetCell(modelQry,'brand_code','apple');
51        queryAddRow(modelQry);
52            querySetCell(modelQry,'model_number','d123');
53            querySetCell(modelQry,'model_description','XPS Mobile Gaming Laptop');
54            querySetCell(modelQry,'brand_code','dell');
55        queryAddRow(modelQry);
56            querySetCell(modelQry,'model_number','d6534');
57            querySetCell(modelQry,'model_description','64" Monitor');
58            querySetCell(modelQry,'brand_code','dell');
59        queryAddRow(modelQry);
60            querySetCell(modelQry,'model_number','123-mqwe');
61            querySetCell(modelQry,'model_description','DRM removal tool');
62            querySetCell(modelQry,'brand_code','microsoft');
63        queryAddRow(modelQry);
64            querySetCell(modelQry,'model_number','123-serr');
65            querySetCell(modelQry,'model_description','Windows Vista inc. SP4');
66            querySetCell(modelQry,'brand_code','microsoft');
67</cfscript>
68
69
70    <cfquery dbtype="query" name="qry">
71        SELECT
72            model_number,
73            model_description
74        FROM
75            modelQry
76        WHERE
77            brand_code = <cfqueryparam cfsqltype="cf_sql_varchar" value="#brand_code#" />
78    </cfquery>
79
80    <cfreturn qry/>
81</cffunction>
82
83</cfcomponent>

Second the action <cfform>

flashRemoting.cfm

view plain print about

1
2<cfset brandQry = queryNew("brand_code,brand_name") />
3<cfset modelQry = queryNew("model_number,model_description,brand_code") />
4
5
6
7
8<cfsavecontent variable="getBrands">
9    <cfoutput>
10        //create connection
11        var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://#cgi.HTTP_HOST#/flashservices/gateway/");
12        //declare service
13        var myService:mx.remoting.NetServiceProxy;
14    </cfoutput>
15
16    var responseHandler = {};
17
18    //put the controls in scope to avoid calling _root
19    var brand = brand;
20
21    responseHandler.onResult = function( results: Object ):Void {
22        //when results are back, populate the cfselect
23        brand.labelField = "brand_name";
24        brand.dataProvider = results;
25    }
26
27    responseHandler.onStatus = function( stat: Object ):Void {
28        //if there is any error, show an alert
29        alert("Error while calling cfc:" + stat.description);
30    }
31
32    //get service
33    myService = connection.getService("flashRemotingResponder", responseHandler );
34    //make call
35    myService.getBrands();
36</cfsavecontent>
37
38<cfsavecontent variable="getModel">
39    <cfoutput>
40        //create connection
41        var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://#cgi.HTTP_HOST#/flashservices/gateway/");
42        //declare service
43        var myService:mx.remoting.NetServiceProxy;
44    </cfoutput>
45
46    var responseHandler = {};
47
48    //put the controls in scope to avoid calling _root
49    var model = model;
50
51    responseHandler.onResult = function( results: Object ):Void {
52        //when results are back, populate the cfselect
53        model.labelField = "model_description";
54        model.dataProvider = results;
55    }
56
57    responseHandler.onStatus = function( stat: Object ):Void {
58        //if there is any error, show an alert
59        alert(stat.description);
60    }
61
62    //get service
63    myService = connection.getService("flashRemotingResponder", responseHandler );
64    //make call
65    myService.getModels(brand.selectedItem.brand_code);
66</cfsavecontent>
67
68<cfform format="flash" name="myform" onload="#getBrands#" width="500" height="400">
69
70    <cfformgroup type="panel" label="Example of flash remoting and dynamically populating cfselect">
71        <cfselect name="brand" id="brand" query="brandQry" display="brand_name"
72            value="brand_code" onchange="#getModel#" label="What is the brand name"></cfselect>
73
74        <cfselect name="model" id="model" query="modelQry" display="model_description"
75            value="model_number" label="What Model Number"></cfselect>
76    </cfformgroup>
77</cfform>

You can download the source at: http://www.andyjarrett.co.uk/flash_remoting_populate_select.zip

Comments (3) | Print | Send | 3828 Views

If you like what you see on the website and/or this post has helped you out in some way please consider donating to help keep me in beer vodka. The donations are made through Paypal, which accepts almost any credit card or eCheck.

(Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

Posted By Sana @ 4/26/07 1:22 PM

do you know about this website, plenty of cool examples
http://www.asfusion.com/

Posted By Andy J @ 4/26/07 1:49 PM

Sana, in the first line of the post i mention that this code originates from ASFusion :o)

Posted By thomary @ 3/6/09 11:30 AM

I get:
"Error while calling cfc:Service flashRemotingResponder not found. OK"
when I try to add this to my cfm page.

Do I need to name the cfm page flashRemoting.cfm in order for this to work?
what am I missing? If I change the cfsavecontent to a function, what else will I need to change?

I have been working with the ASFusion pages for a while and still can not figure this out.

Thanks for any help.

[Add Comment]