ColdFusion Ajax Tutorial 2: Related Selects

Could there be a JSON version of this? (Where it didnt matter which application server returned the data)

You can also bind to a URL, so bind="url:getStates.cfm" just return the array with this:

<cfoutput>#SerializeJSON(variables.result)#</cfoutput>

And have no other output

Doug, try invoking those CFCs directly, a straight <cfinvoke> call in a .CFM page. It looks like you are getting a <cfquery> error independent of the Ajax stuff,s o you need to figure that out first.

--- Ben

Thanks for the tutorial, I just finished a State / City select chain using it. One problem I am having is with speed. My initial states select box populates very quickly but the query of the cities takes up to 30 seconds. The query itself is very snappy. Any ideas on helping me speed this up?

Thanks so much.

Hey Ben,

<!--- CFINVOKE --->
<cfinvoke
    component="/mydirectory/Loads/act_getZipCode"
    method="getOriginCities"
    returnVariable="origin_city"
    origin_state_id = "1"
>
<cfdump var="#origin_city#">

3532 ms

<!--- URL CALL --->

http://localhost/mydirectory/Loads/act_getZipCode....

36 ms

I used CFINVOKE and it returns the query in 3532 ms and takes about 10-12 seconds to actually fully display the page. I called it from the url using RETURNFORMAT="json" like you suggested and it returned in 36ms... much faster. Does this bring anything to light?

Thanks for your help!

Matt

I am playing around with my new coldfusion 8 install. I am trying to use your example to bind data from two of my cfc's But for some reason, my tests don't work at all. It does not populate any of the inputs and gives no errors


Here is the code I am using

test.cfm

<cfform>
<table>
<tr>
<td>Select Media Type:</td>
<td><cfselect name="catUUID"
bind="cfc:com.UtilityManager.List_Categories()"
bindonload="true" /></td>
</tr>
<tr>
<td>Select Art:</td>
<td><cfselect name="secUUID"
bind="cfc:com.UtilityManager.List_Sections({catUUID})" /></td>
</tr>
</table>
</cfform>


Function: List_Categories
   <cffunction name="List_Categories" access="remote" output="false" returntype="array">
      <cfquery name="GetCats" datasource="#this.DSN#">
         SELECT
            fld_category_UUID as catUUID,
            fld_category_Name as catName,
            fld_category_Alias
         FROM
            tbl_classAd_Categories
         ORDER BY
            fld_category_Order ASC
      </cfquery>
         <cfset catArr = arrayNew(1)>
         <cfset i = 1>
         <cfloop query="GetCats">
            <cfset catArr[i] = structNew()>
               <cfset catArr[i].catUUID = GetCats.fld_category_UUID>
               <cfset catArr[i].catName = GetCats.fld_category_Name>
               <cfset catArr[i].catAlias = GetCats.fld_category_Alias>
            <cfset i = i + 1>
         </cfloop>
      <cfreturn GetCats />
   </cffunction>

Function: List_Sections

   <cffunction name="List_Sections" access="remote" output="false" returntype="array">
      <cfargument name="catUUID" required="yes" type="string" />         
         <cfquery name="GetSections" datasource="#this.DSN#">
            SELECT
               fld_section_UUID,
               fld_section_Name,
               fld_section_Alias,
               fld_category_UUID
            FROM
               tbl_classAd_Sections
            WHERE
               fld_category_UUID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.catUUID#" />
         </cfquery>
         
         <cfset secArr = arrayNew(1)>
         <cfset i = 1>
         <cfloop query="GetSections">
            <cfset secArr[i] = structNew()>
               <cfset secArr[i].secUUID = GetSections.fld_section_UUID>
               <cfset secArr[i].secName = GetSections.fld_section_Name>
               <cfset secArr[i].secAlias = GetSections.fld_section_Alias>
               <cfset secArr[i].catUUID = GetSections.fld_category_UUID>
            <cfset i = i + 1>
         </cfloop>
      <cfreturn secArr />
   </cffunction>

I used this and it works great on a test site i got, but when i add it to the site i'm working on my Application.cfc onRequestStart / onRequestEnd cancels it out. any idea why?

<cfcomponent output="no">

   <cfset THIS.name = "reg.securitycode" />
   <cfset THIS.sessionmanagement=true />
   <cfset THIS.dsn = "aiya_ca" />
   
   <cffunction name="onRequestStart" returntype="boolean" output="true">
   
    <!--- DIsplay the header.cfm --->
    <cfinclude template="../includes/Header.cfm"/>
   
    <cfreturn true />
   </cffunction>
   
   <cffunction name="onRequestEnd" returntype="void" output="true">
    <!--- Display Footer.cfm --->
    <cfinclude template="../includes/Footer.cfm" />
   </cffunction>

</cfcomponent>

Hi! Ben,

Thanks for your tutorial. The newly created bound selection boxes work perfect when I browse direct on our intra net but it will not working at all when browse through VPN. Do you ware of the problem? Any advice? I really like the new feature and don't want drop it due to VPN compatible issue.

Thanks,

Instead of sending the selected item from the first select box to the bind of the second select, is there a way of passing the first value as a CFgrid Argument.

Has anyone been able to use the related selects (bound to a cfc) and set a default value (as if editing an existing record)?

Any luck solving the problem of "window:global: Exception thrown and not caught ". I have seen lots of posts for this but no resolutions.

Mike

Hi
I got this to work well in HTML forms mainly for Country, State, Town bound dropdowns.

My problem:
How can I get it work in a Flash form - I've tried every combination and thechnique I can think of - it doesnt throw an error, just no results.

I can get it to work with straight drop downs accessing CF queries for each cfselect but I can't get it to work as "bound" fields in a Flash form using a cfc that works in HTML

I'd be grateful for any clues.

Jim, I have asked the engineering team to look into this one too. I'll post a response when I hear something useful.

--- Ben

I am getting error on 2nd box bind: "Bind failed. Element not found: subcat_key"
I can't figure it out, been trying for an hour now! This is my code:
CFC
<cfcomponent output="false" >
<cfset THIS.dsn="NJDB">

<!--- Get array of media types --->
<cffunction name="getcat" access="remote" returnType="array">
<!--- Define variables --->
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>

<!--- Get data --->
<cfquery name="data" datasource="#THIS.dsn#">
SELECT cat_key, cat
FROM tb_includes_cat
ORDER BY cat
</cfquery>

<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.cat_key[i]>
<cfset result[i][2]=data.cat[i]>
</cfloop>

<!--- And return it --->
<cfreturn result>
</cffunction>

<!--- Get art by media type --->
<cffunction name="getSubCat" access="remote" returnType="array">
<cfargument name="cat_key" type="numeric" required="true">

<!--- Define variables --->
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>

<!--- Get data --->
<cfquery name="data" datasource="#THIS.dsn#" >
SELECT subcat_key , subcat
FROM tb_includes_subcat
WHERE cat_key = #ARGUMENTS.cat_key#
ORDER BY subcat
</cfquery>

<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.subcat_key[i]>
<cfset result[i][2]=data.subcat[i]>
</cfloop>

<!--- And return it --->
<cfreturn result>
</cffunction>

</cfcomponent>

cfm
<cfform>
<cfoutput query="data">#subcat# - #subcat_key#</cfoutput>
<table>
<tr>
<td>Select Media Type:</td>
<td><cfselect name="Cat"
bind="cfc:admin.cfc.cat.getCat()"
bindonload="true" /></td>
</tr>
<tr>
<td>Select Art:</td>
<td><cfselect name="subCat"
bind="cfc:admin.cfc.cat.getSubCat({subcat_key})" /></td>
</tr>
</table>

</cfform>

Many people in these threads are getting the error listed below:

window:global: Exception thrown and not caught (<url>, line 787)

The reason for this is because although you are calling a CFC, your are ultimately sending a full HTTP GET request to the server. In doing so, application.cfm/application.cfc is still being processed. If you are including ANY content via application.cfm/cfc, then your call via AJAX is actually returning the result of the CFC function as well as all content being included in your requests....

The workaround that Im using is to check the value of the CGI.SCRIPT_NAME and if it ends w/ cfc, DONT include any content... that way your CFC is only returing the data that you want returned.

Oh yeah... make sure its in JSON format (SerializeJSON)....

Happy coding :-)

Ben,
I copied the "Using Binding-pg361) example in your book (CF8-getting started) and was able to get it working with no problems. Now I need to do something with the values. I tried passing them using a form submit but that results in an Ajax error.

How do I access the values from my bound listboxes once someone has selected them and submitted the form?
Is there some simple way to use #form.listboxname#?

Ken

Ben,

I'm trying to add an <option> tag into the code below:

Old:

<table>
<tr>
<td>Select Media Type:</td>
<td><cfselect name="mediaid"
bind="cfc:art.getMedia()"
bindonload="true" /></td>
</tr>

New:

<table>
<tr>
<td>Select Media Type:</td>
<td><cfselect name="mediaid"
bind="cfc:art.getMedia()"
bindonload="true" />
<option value="">---All Media---</option>
</cfselect>
</td>
</tr>

This scenario works great when you populate the cfselect with a query, and allow you to put the option up at the top. When I'm using the cfc and binding, this isn't showing up. Thoughts on how to make this work. Ideally the option tag would be the first option to come up (top).

Thanks! Matt

Hi,

Just in case anyone wanted the code:

<CFSET sortArray = ArrayNew(1)>
<CFSET QueryAddColumn(data, "sort_order", sortArray)>
<CFSET QueryAddRow(data)>
<CFSET QuerySetCell(data, "MediaType", "")>
<CFSET QuerySetCell(data, "sort_order", 1)>
<CFQUERY NAME="querySorted" DBTYPE="Query">
SELECT * FROM data
ORDER BY sort_order desc, Category asc
</CFQUERY>
      
<CFRETURN querySorted>

Matt

Do you have an Application.cfc in play? One with an onRequest method?

@Ray, yes - have tried commenting it out but no change

@Ben - ah - is this a known bug then? Is there somewhere I can find more detail about it to check against my scenario? Also, if I bind to a .cfm will I get the same problem?

I'm not sure if the "onChange" event is fired when the options inside of a select box are alters (but not the selection changed, but you could try appending @change to the end of each of your bind variables

{country@change}

Thanks might work.

I have adapted this example to work with 3 selects (the 3rd select being dependant on the second).

I am wanting to hide the second and third selects when no value has been selected from the first and hide the 3rd select when no value has been selected from the second.

I have been trying to get this working, but cannot find a way to intercept and use the results coming back in the bind i.e. if no results found, hide the relevant select.

Any ideas any one?

Paul.

Hello all, I found the answer to my problem and decided to share it here.
When i used 2 or more cfselet with related binds the binds called de cfc component for every value that changed.
To avoid that use @none in the bind values, that way only the values without the @none will trigger the bind event, but will send all the variables to the cfc
As an example: the county cfselect need the values from the country and state cfselects, but will only refresh the data when the state cfselect change value

<cfselect name = "county"
required = "Yes"
message = "some text"
bindOnLoad="no"
bind="cfc:cfc.getData0035('#dtsource#',{country@none},{state})" >
</cfselect>

Hi

I wanted to add another way to get the second related drop down to be prepopulated.
Again this is a bit of a hack, but works for now. This is combining something that I read on Raymond Camden's site (http://www.coldfusionjedi.com/) and Ben's example.

Simply put, you use cfajaxproxy to check to see when the first select has loaded and then call some simple Javascript that loops over the options in the select and marks the one that you want as selected.

I'd love for their to be a better way, so if there is please someone educate me :)

<cfajaxproxy bind="cfc:cfc.getClientContacts({contactID.value})" onSuccess="preselected">
<script>
function preselected(){
   preSelectedContactID = document.formName.preSelectedContactID.value;
   for(var i=0;i<document.formName.contactID.options.length;i++){
      if(preSelectedContactID == document.formName.contactID.options[i].value){
            document.formName.contactID.options[i].selected = true;      
      }      
   }
   
}
</script>
<cfform name="formName">
<input type="hidden" name="preSelectedContactID" value="#attributes.query.contactID#">
<cfselect name="clientid"
   query="attributes.clientlist"
   value="clientid"
   display="acronym"
   selected="#attributes.query.clientID#" />

<cfselect name="contactID" multiple="false" size="1"
   bind="cfc:cfc.getClientContacts({clientid})"
   bindOnLoad="true"
   value="ContactID"
   display="lastFirst" />

</cfform>

Using:
<cfselect name="mediaid"
bind="cfc:art.getMedia()"
bindonload="true" />

How do you set the initially selected item?

I tried:
<cfselect name="mediaid"
bind="cfc:art.getMedia()"
bindonload="true"
selected="artItem"
/>

But it didn't work. Does selected work with cfselect and bind?

thanks.
elaine

This post is following a couple different threads. The one that brought me here is the inability to select an option with a bind expression. I solved the issue for my app by setting the bindonload attribute to "no" and initially populate the select options on my own. I've pasted a little bit of code below as an example.

<cfselect bind="cfc:components.ui.getClientProjectsForSelect({clientID})" bindonload="no" name="projectID" id="projectID" style="width: 200px;">
<cfif Task.taskID eq 0>
<option value="0" selected>No project</option>
<cfelseif Task.taskID gt 0>
<option value="0"<cfif Task.projectID eq 0> selected</cfif>>No project</option>
<cfloop query="ClientProjects">
<option value="#pro_projectid#"<cfif Task.projectID eq pro_projectid> selected</cfif>>#pro_name#</option>
</cfloop>
</cfif>
</cfselect>