Solved

dependent ajax drop box not populating

Posted on 2011-03-04
34
684 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
 

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

PROBLEM:  How to open a cfwindow or run a function on double click of a cfgrid row. One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items i…
Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

707 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now