Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1185
  • Last Modified:

<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

0
Michael Williams
Asked:
Michael Williams
  • 5
  • 3
  • 2
2 Solutions
 
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
 
Michael WilliamsApplication DeveloperAuthor Commented:
My last response has the final solution
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now