Solved

dependent ajax drop box not populating

Posted on 2011-03-04
34
687 Views
Last Modified: 2012-05-11
I am creating a text box that populates a drop down box via Ajax.  However, the ajax calls are coming back (shown in Firebug) but it does not populate the drop down box.  Can someone help?

Page Below
<cfform name="UserForm" method="post" format="html">
  <cfinput type="text" name="CategorySearch" size="30" maxlength="50">
   <cfselect width="50" name="SubCategories" bind="cfc:cfc.Activities.SearchCategoryDefinitions({UserForm:CategorySearch@keyup})" display="name" value="Aid" />
</cfform>

CFC Below
  <cffunction name="SearchCategoryDefinitions" access="remote" returntype="Query">
    <cfargument name="keyword" required="true" type="string">
   
    <cfquery name="FetchCategories" datasource="JR_Main">
      SELECT Aid, name
        FROM Category
        WHERE leaf = 1
          AND Name LIKE <cfqueryparam value="%#keyword#%">
      </cfquery>      
   
      
    <cfreturn FetchCategories />
  </cffunction>

Thanks in advance.
0
Comment
Question by:SFTProd
  • 19
  • 15
34 Comments
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035137
Check your query if it is returning the records...  just call it in the URL

http://www.yoursite.com/(path to CFC)Activities.cfc?method=SearchCategoryDefinitions&keyword= ....

check what it returns
0
 

Author Comment

by:SFTProd
ID: 35035163
Yes.  The query is returning records.  

I did a sample query and the results are as follows.

ACD118ACD273ACD331ACD376ACD424ACD454ACD693ACD722ACD92Sports & Fitness Sports Sports & Fitness Sports Sports Sportswear Sports Cars Sports Bars Sports

I also saw it come through in Firebug.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035196
ahh. .. you are using cfselect.. you have to return an array.. try the below changed CFC

    <cffunction name="SearchCategoryDefinitions" access="remote" returntype="array">
    <cfargument name="keyword" required="true" type="string">
      
        <cfset var FetchCategories="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>

   
    <cfquery name="FetchCategories" datasource="JR_Main">
      SELECT Aid, name
        FROM Category
        WHERE leaf = 1
        AND Name LIKE <cfqueryparam value="%#keyword#%">
      </cfquery>      
       
        <!--- Convert results to array --->
        <cfloop index="i" from="1" to="#FetchCategories.RecordCount#">
            <cfset result[i][1]=FetchCategories.Aid[i]>
            <cfset result[i][2]=FetchCategories.name[i]>
        </cfloop>

   
      
    <cfreturn result/>
  </cffunction>

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:SFTProd
ID: 35035267
I put in the code for the array and it still does not populate the select box.

When I look at the console of Firebug, it shows the Ajax calls but the calls do not seem to make it back to the select box.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035277
The explanation is that with cfselect you have to choose OPTION (NAME, VALUE) pairs, so your CFC has to return an array with the first one as NAME and second one has VALUE.. here is a post that talks more about it..

http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-2-Related-Selects
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035314
Just try this as your form...

  <cfform name="UserForm" method="post" format="html">
  <cfinput type="text" name="CategorySearch" size="30" maxlength="50">
   <cfselect width="50" name="SubCategories" bind="cfc:cfc.Activities.SearchCategoryDefinitions({CategorySearch})" display="name"  bindonload="false"  />
</cfform>>

Open in new window

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035332
sorry try this.. remove the display attribute in from there..

  <cfform name="UserForm" method="post" format="html">
  <cfinput type="text" name="CategorySearch" size="30" maxlength="50">
   <cfselect width="50" name="SubCategories" bind="cfc:cfc.Activities.SearchCategoryDefinitions({CategorySearch})"  bindOnLoad="false"  />
</cfform>

Open in new window

0
 

Author Comment

by:SFTProd
ID: 35035368
I copied and pasted the code in and the ajax calls are working but it is still not populating the select box.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035466
well that is strange, I did a small test and it works for me.. what does firebug shows under RESPONSE tab ??

here is what I did..

created a test.cfc, similar to yours, but with a fake query
  <cfcomponent>
  <cffunction name="SearchCategoryDefinitions" access="remote" returntype="any">
    <cfargument name="keyword" required="true" type="string">
      
        <cfset var FetchCategories="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>

   <cfset Category = queryNew("Aid, name")>
   <cfset queryAddRow(Category,1)>
   <cfset querySetCell(Category,'Aid',1)>
   <cfset querySetCell(Category,'name','Test1')>
   <cfset queryAddRow(Category,1)>
   <cfset querySetCell(Category,'Aid',2)>
   <cfset querySetCell(Category,'name','Test2')>
       
       
        <!--- Convert results to array --->
        <cfloop index="i" from="1" to="2">
            <cfset result[i][1]=Category.Aid[i]>
            <cfset result[i][2]=Category.name[i]>
        </cfloop>

   
      
    <cfreturn result/>
  </cffunction>
  
  </cfcomponent>

Open in new window


Then called the form

<cfform name="UserForm" method="post" format="html">
  <cfinput type="text" name="CategorySearch" size="30" maxlength="50">
   <cfselect width="50" name="SubCategories" bind="cfc:test.SearchCategoryDefinitions({CategorySearch})"  bindOnLoad="false"  />
</cfform>

Open in new window


It works correctly
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035490
Check the screen shot of the above test...
Untitled.jpg
0
 

Author Comment

by:SFTProd
ID: 35035517
I see the ajax calls in Firebug but the box does not populate like your box does.
0
 

Author Comment

by:SFTProd
ID: 35035530
When I do it in IE, I get a javascript error.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MDDR; InfoPath.2; .NET4.0C)
Timestamp: Fri, 4 Mar 2011 12:09:49 UTC

Message: Exception thrown and not caught
Line: 803
Char: 1
Code: 0
URI: http://localhost/CFIDE/scripts/ajax/package/cfajax.js

When in firefox, no errors but it does not populate select box.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035539
okay.. in firebug (check attached screenshot above), you will see 4 tabs, Params, Headers, Response, HTML, can you tell what does your RESPONSE tab has ??? For the example above I have under response tab

[[1.0, "Test1"],[2.0, "Test2"]], what does your response contain ??
0
 

Author Comment

by:SFTProd
ID: 35035546
The following is in the response tab.

<component>
 
 
</component> [["ACD118","Sports & Fitness                                  "],["ACD273","Sports                                            "],["ACD331","Sports & Fitness                                  "],["ACD376","Sports                                            "],["ACD424","Sports                                            "],["ACD454","Sportswear                                        "],["ACD693","Sports Cars                                       "],["ACD722","Sports Bars                                       "],["ACD92","Sports                                            "]]
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035581
okay.. so you have this extra component tags coming in response...

<component>
 
 
</component>

can you check on that ??
0
 

Author Comment

by:SFTProd
ID: 35035591
yes, they are in the response.  When I look at the cfc, I only have 1 set.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035596
you should only have this as response

[["ACD118","Sports & Fitness                                  "],["ACD273","Sports                                            "],["ACD331","Sports & Fitness                                  "],["ACD376","Sports                                            "],["ACD424","Sports                                            "],["ACD454","Sportswear                                        "],["ACD693","Sports Cars                                       "],["ACD722","Sports Bars                                       "],["ACD92","Sports                                            "]]


0
 

Author Comment

by:SFTProd
ID: 35035608
When I go to "Response"  I get the component tags too.

When I go to HTML, I only see the response in your last comment.
0
 

Author Comment

by:SFTProd
ID: 35035627
Do you know where this extra component tag is coming from?
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035663
No I don't..... yes HTML will hide those tags...

just copy the GET url from firebug.. and paste it in the URL, it would be something like

http://127.0.0.1:8300/web/test.cfc?method=SearchCategoryDefinitions&returnFormat=json&argumentCollection={%22keyword%22%3A%22test1%22}&_cf_nodebug=true&_cf_nocache=true&_cf_rc=0

and then view the source.. you should see those tags..

it will be NOT there in your CFC, because if you have more than one component tag, CF will throw an error...
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035852
Actually, your code is correct, I just tested with it and found no issues ...

{"COLUMNS":["AID","NAME"],"DATA":[[1.0,"Test1"],[2.0,"Test2"]]} -- this is what your FB example response would be...

The form

<cfform name="UserForm" method="post" format="html">
  <cfinput type="text" name="CategorySearch" size="30" maxlength="50">
   <cfselect width="50" name="SubCategories" bind="cfc:test.SearchCategoryDefinitions({CategorySearch})" display="name" value="Aid" />
</cfform>

Open in new window



and CFC

  <cfcomponent>
  <cffunction name="SearchCategoryDefinitions" access="remote" returntype="any">
    <cfargument name="keyword" required="true" type="string">
      


   <cfset Category = queryNew("Aid, name")>
   <cfset queryAddRow(Category,1)>
   <cfset querySetCell(Category,'Aid',1)>
   <cfset querySetCell(Category,'name','Test1')>
   <cfset queryAddRow(Category,1)>
   <cfset querySetCell(Category,'Aid',2)>
   <cfset querySetCell(Category,'name','Test2')>
       


   
      
    <cfreturn Category/>
  </cffunction>
  
  </cfcomponent>

Open in new window


Works correctly...


0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35035866
does your code also include <cfcomponent> </cfcomponent> tags in response ???
0
 

Author Comment

by:SFTProd
ID: 35039125
the code includes "<component> </component>"  There is no "cfcomponent in the HTML code when bringing it up in the webpage.  I am seeing this by viewing the source of the webpage.  This does not seem to make a difference if it is the Activities.cfc or other cfc's.  It always seems to send back a "<component> </component>."

Do you have any idea where this might be coming from?

Thanks.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35039405
Very strange issue.. well actually you can try to bind a cfm instead of CFC and check if that works.. something like this

Your form

<cfform name="UserForm" method="post" format="html">
  <cfinput type="text" name="CategorySearch" size="30" maxlength="50">
   <cfselect width="50" name="SubCategories" bind="url:test.cfm?keyword={CategorySearch.value}" display="name" value="Aid" />
</cfform>

Open in new window


Just put a test.cfm page in the same directory, which would be..

   <cfquery name="FetchCategories" datasource="JR_Main">
      SELECT Aid, name
        FROM Category
        WHERE leaf = 1
          AND Name LIKE <cfqueryparam value="%#url.keyword#%">
      </cfquery>


<cfoutput>
#serializeJSON(FetchCategories)#
</cfoutput>

Open in new window


Let me know if that works...
0
 

Author Comment

by:SFTProd
ID: 35039446
The "<component> </component>" tags are still in the response and the select box still does not populate.

I am running Coldfusion 9, maybe that has something to do with it?
0
 
LVL 11

Accepted Solution

by:
Brijesh Chauhan earned 500 total points
ID: 35039495
okay.. so now the files that you need to check are application.cfc or application.cfm..because these are the common files with the two different codes, even if you have a common index.cfm file, check that as well,  check if it is outputting somewhere those tags ....

0
 

Author Comment

by:SFTProd
ID: 35039558
I have already tried it under a directory with an extensive application.cfc and one with a very minimal application.cfc.  Both seem to achieve the same results.  

I just tried it with a blank application.cfm and it appears to work.  Maybe there is a setting in my application.cfc that is causing probolems.
0
 

Author Comment

by:SFTProd
ID: 35039680
I compared the Application.cfc and noticed that the one for my real application used <component> and </component> instead of <cfcomponent> and </cfcomponent>.

It is really strange why Coldfusion did not throw an exception when I forgot to put in the "cf" part of the tag resulting in an invalid tag.

Your troubleshooting and suggestion has helped fix the problem.  You made my day.  Thank you very much.  
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35039697
Well, I just added a default application.cfc and it works for me.. so there is definitely something with your application.cfc which is causing it..

below is the default CFC that I am using

<cfcomponent output="false">
	
	<!--- Application name, should be unique --->
	<cfset this.name = "ApplicationName">
	<!--- How long application vars persist --->
	<cfset this.applicationTimeout = createTimeSpan(0,2,0,0)>
	<!--- Should client vars be enabled? --->
	<cfset this.clientManagement = false>
	<!--- Where should we store them, if enable? --->
	<cfset this.clientStorage = "registry">
	<!--- Where should cflogin stuff persist --->
	<cfset this.loginStorage = "session">
	<!--- Should we even use sessions? --->
	<cfset this.sessionManagement = true>
	<!--- How long do session vars persist? --->
	<cfset this.sessionTimeout = createTimeSpan(0,0,20,0)>
	<!--- Should we set cookies on the browser? --->
	<cfset this.setClientCookies = true>
	<!--- should cookies be domain specific, ie, *.foo.com or www.foo.com --->
	<cfset this.setDomainCookies = false>
	<!--- should we try to block 'bad' input from users --->
	<cfset this.scriptProtect = "none">
	<!--- should we secure our JSON calls? --->
	<cfset this.secureJSON = false>
	<!--- Should we use a prefix in front of JSON strings? --->
	<cfset this.secureJSONPrefix = "">
	<!--- Used to help CF work with missing files and dir indexes --->
	<cfset this.welcomeFileList = "">
	
	<!--- define custom coldfusion mappings. Keys are mapping names, values are full paths  --->
	<cfset this.mappings = structNew()>
	<!--- define a list of custom tag paths. --->
	<cfset this.customtagpaths = "">
	
	<!--- Run when application starts up --->
	<cffunction name="onApplicationStart" returnType="boolean" output="false">
		<cfreturn true>
	</cffunction>

	<!--- Run when application stops --->
	<cffunction name="onApplicationEnd" returnType="void" output="false">
		<cfargument name="applicationScope" required="true">
	</cffunction>

	<!--- Fired when user requests a CFM that doesn't exist. --->
	<cffunction name="onMissingTemplate" returnType="boolean" output="false">
		<cfargument name="targetpage" required="true" type="string">
		<cfreturn true>
	</cffunction>
	
	<!--- Run before the request is processed --->
	<cffunction name="onRequestStart" returnType="boolean" output="false">
		<cfargument name="thePage" type="string" required="true">
		<cfreturn true>
	</cffunction>

	<!--- Runs before request as well, after onRequestStart --->
	<!--- 
	WARNING!!!!! THE USE OF THIS METHOD WILL BREAK FLASH REMOTING, WEB SERVICES, AND AJAX CALLS. 
	DO NOT USE THIS METHOD UNLESS YOU KNOW THIS AND KNOW HOW TO WORK AROUND IT!
	EXAMPLE: http://www.coldfusionjedi.com/index.cfm?mode=entry&entry=ED9D4058-E661-02E9-E70A41706CD89724
	--->
	<cffunction name="onRequest" returnType="void">
		<cfargument name="thePage" type="string" required="true">
		<cfinclude template="#arguments.thePage#">
	</cffunction>

	<!--- Runs at end of request --->
	<cffunction name="onRequestEnd" returnType="void" output="false">
		<cfargument name="thePage" type="string" required="true">
	</cffunction>

	<!--- Runs on error --->
	<cffunction name="onError" returnType="void" output="false">
		<cfargument name="exception" required="true">
		<cfargument name="eventname" type="string" required="true">
		<cfdump var="#arguments#"><cfabort>
	</cffunction>

	<!--- Runs when your session starts --->
	<cffunction name="onSessionStart" returnType="void" output="false">
	</cffunction>

	<!--- Runs when session ends --->
	<cffunction name="onSessionEnd" returnType="void" output="false">
		<cfargument name="sessionScope" type="struct" required="true">
		<cfargument name="appScope" type="struct" required="false">
	</cffunction>
</cfcomponent>

Open in new window

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35039711
Wow.. that took sometime.. glad I could help you...
0
 

Author Comment

by:SFTProd
ID: 35039750
I am not sure I can afford you in the future or not but I might need someone to help do some coding in the future.  Would you be interested in doing some CF development and my company will pay you for your time?
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35041862
Yes.. I am available.. please email me at - chauhan.brijesh@gmail.com
0
 

Author Comment

by:SFTProd
ID: 35106482
hi Brijeshchauhan,

I have forwarded yout email to our CEO and he will contact you for further information.  You will hear from a person by the name of "Alex Frost."

Thanks for your help the other day.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35106596
Thank you !
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question