<CFSelect> and <CFForm>

The code below works perfectly fine when I don't define the format of a <cfform>. When I define the format of the <cfform> as "flash" the list of countries and appropriate states do not appear in the select lists

With some research I have found that <cfselect> only works in HTML : )  What is another way to perform the operation I'm doing in the below select, but make it display as "flash" ?

I did find the following code that does what I want to do but not sure if that is the best way.

http://www.asfusion.com/blog/entry/multiple-selects-related-flash-cfform


<cfselect name="country" id="country" bind="cfc:Examples.CFC.Geographic.getAllCountries_Form()" bindonload="true" value="UNID" />
 
<cfselect name="state" id="state" bind="cfc:Examples.CFC.Geographic.getAllStatesByCountry_Form({country})" value="UNID" />

Open in new window

LVL 1
Michael WilliamsApplication DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

erikTsomikSystem Architect, CF programmer Commented:
try this
<cfform name="paymentForm" format="flash">
<cfformgroup type="horizontal">
      <cfselect name="country" id="country" bind="cfc:Examples.CFC.Geographic.getAllCountries_Form()" bindonload="true" value="UNID" />
 
<cfselect name="state" id="state" bind="cfc:Examples.CFC.Geographic.getAllStatesByCountry_Form({country})" value="UNID" />
</cfformgroup>



</cfform>
0
Michael WilliamsApplication DeveloperAuthor Commented:
The <cfselect> doesn't show anything. The form loads, but nothing appears in the drop down.
0
erikTsomikSystem Architect, CF programmer Commented:
maybe try using onclick event

0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Michael WilliamsApplication DeveloperAuthor Commented:
not sure what that code would be. Very new to web development.
0
Andrew MaurerCommented:
You can't use a bind expression with format flash. Bind is actually using javascript to populate your select boxes with a call to a CFC.

So... to populate your second select field based on your first select field is not possible to do with the options available to you via CF.

You would have to create a swf that had Actionscript making those calls.
0
Andrew MaurerCommented:
Oh wow, I just clicked on the link for the blog entry by ASFusion. Laura does great work.

K so... use her example.. .though you'll have to change your code a bit... Give me a min and I'll implement your code...
0
Andrew MaurerCommented:
K instead of passing the id of the country to the state cfc, you'll need to get both query objects in their entirerty.

create a new function in your cfc named something like, getallstates.
<cfscript>
		
		LocationObject = createObject("component","Examples.CFC.Geographic");
		QueryAllContries = LocationObject.getAllCountries_Form();
		QueryAllStates = LocationObject.getAllStates_Form();
		
</cfscript>
 
<cfform name="selectCountryState" format="flash" width="400" height="200">
    <cf_multiSelectRel id="states">
        <cf_multiSelectRelControl query="QueryAllContries" value="countryID" display="countryname" label="Country"
                      name="selectCountry" selected="1" queryPosition="below"  required="true" message="This field is required">
                      <option>Please select</option>
        </cf_multiSelectRelControl>
        <cf_multiSelectRelControl query="QueryAllStates" value="stateid" display="statename" parentcolumn="countryID" label="State"
                      name="selectState" selected="United States"> <option>Please select</option>
        </cf_multiSelectRelControl> 
        
    </cf_multiSelectRel>
    
    <cfinput type="Submit" name="submit" value="Submit">
</cfform>

Open in new window

0
Michael WilliamsApplication DeveloperAuthor Commented:
I'm using the following code now. It's all on one form, but my problem is that the State field is grayed out. It has a value but can't be accessed until you change the Country. I'm trying to find a way to have the actionPopulate function run on load or after the form finishing loading.
<cfquery name="country" datasource="MySQLServer">
SELECT "900_UNID" as CUNID, "900_Country"
FROM dbo."900-GeoCountry"
</cfquery>
 
<cfquery name="states" datasource="MySQLServer">
SELECT "901_UNID" as SUNID, "901_Name" as State, "901_CountryID" as CUNID
FROM dbo."901-GeoState" 
</cfquery>
 
<cfif IsDefined("form.selectCountry")>
    <cfdump var="#form#"> 
</cfif>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColElsCtr #container {
	width: 46em;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
-->
</style></head>
 
<body class="oneColElsCtr" onload="document.FuelCardRequest.focus();">
 
<!---
DECLARE @idvalue int
INSERT INTO [000-TEST] ([000_TESTING], [000_TESTAGAIN])
VALUES ('Damaged Goods', 'TEST');
SELECT @idvalue = SCOPE_IDENTITY()
SELECT [000_UNID], [000_TESTING], [000_TESTAGAIN] FROM [000-TEST] WHERE [000_UNID] = @idvalue;
--->
 
<cfsavecontent variable="actionPopulate">
if(_global.arrCities == undefined) _global.arrCities = selectState.dataProvider.slice(0);
	
	var arrCities:Array = _global.arrCities;
	selectState.removeAll();
	
for(var i = 0; i < arrCities.length; i++)
	{
	var item = arrCities[i].data.split('|');
		if(item[1] == selectCountry.value )
		{
			selectState.addItem(arrCities[i].label,item[0]);
		}
	}
	selectState.enabled = (selectState.length >0) ? true:false;
</cfsavecontent>
 
<div id="container">
	<div id="mainContent">
	<cfset variables.merchant="All American Trucking">
    <cfform name="FuelCardRequest" format="flash">
        <cfinclude template="../Includes/headerForm.cfm">
        <cfformitem type="spacer" height="20"/>
        <cfformgroup type="hbox">
            <cfselect queryposition="below" label="Country" 
                name="selectCountry" query="country" value="CUNID" display="900_Country" width="200" 
                onChange="#actionPopulate#" required="yes" message="Select a Country"/>
            <cfformitem type="spacer" height="10"/>
            <cfselect queryposition="below" disabled="true" label="State" 
                name="selectState"  width="200" required="yes" message="Select a State">
                <cfoutput query="states"><option value="#SUNID#|#CUNID#">#State#</option></cfoutput>      
            </cfselect>
            <cfinput type="text" name="name" label="Name" required="true" message="Name is required" />
            <cfformitem type="spacer" height="10"/>
        </cfformgroup>
        <cfformitem type="spacer" height="20"/>
        <cfinput type="submit" name="submit" value="Dumping">
        <cfformitem type="spacer" height="20"/>
        <cfinclude template="../Includes/footerForm.cfm">
    </cfform>
    <br /><br /> 
	</div><!-- end #mainContent -->
</div><!-- end #container -->
 
</body>
</html>

Open in new window

0
Michael WilliamsApplication DeveloperAuthor Commented:
I'm using the following code and it works perfectly. Even with validations.
cfquery name="country" datasource="#application.datasource#">
SELECT "900_UNID" as CUNID, "900_Country"
FROM dbo."900-GeoCountry"
</cfquery>
 
<cfquery name="states" datasource="#application.datasource#">
SELECT "901_UNID" as SUNID, "901_Name" as State, "901_CountryID" as CUNID
FROM dbo."901-GeoState" 
</cfquery>
 
<cfsavecontent variable="actionPopulate">
if(_global.arrCities == undefined) _global.arrCities = selectState.dataProvider.slice(0);
	
	var arrCities:Array = _global.arrCities;
	selectState.removeAll();
	
for(var i = 0; i < arrCities.length; i++)
	{
	var item = arrCities[i].data.split('|');
		if(item[1] == selectCountry.value )
		{
			selectState.addItem(arrCities[i].label,item[0]);
		}
	}
	selectState.enabled = (selectState.length >0) ? true:false;
</cfsavecontent>
 
<cfparam name="Form.startdate" default="#dateformat(now(), 'mm/dd/yyyy')#">
<cfform name="FuelCardRequest" format="flash" height="400" preloader="false">
    <cfformitem type="spacer" height="5"/>
    <cfformgroup label="Fuel Card" type="hbox">
    
        <cfselect queryposition="below" label="Country" 
            name="selectCountry" query="country" value="CUNID" display="900_Country" width="200" 
            onChange="#actionPopulate#" required="yes" message="Select a Country"><option></option>      
        </cfselect>
        
        <cfformitem type="spacer" height="5"/>
        <cfselect queryposition="below" disabled="true" label="State" 
            name="selectState"  width="200">
            <option></option>
            <cfoutput query="states"><option value="#SUNID#|#CUNID#">#State#</option></cfoutput>      
        </cfselect>
        
        <cfformitem type="spacer" height="5"/>
    	<cfinput type="dateField" name="startdate" label="Block out starts" width="100" value="#Form.startdate#">
        
     	<cfformitem type="spacer" height="10"/>
        <cfformgroup type="horizontal">
            <cfinput name="submit" type="submit" value="Submit">
        </cfformgroup>
        
    </cfformgroup>
</cfform>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael WilliamsApplication DeveloperAuthor Commented:
My last response has the final solution
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.