3

I'm working with ColdFusion Server version 8,0,0,176276.

I'm trying to add an autosuggested form field, with asynchronous population through a cfc. I'm using http://www.forta.com/blog/index.cfm/2007/5/31/coldfusion-ajax-tutorial-1-autosuggest for inspiration and syntax.

The autosuggest field works fine if I use a static query (as in Forta's first example). The cfc is successfully returning an array when not used in the form field.

But when I use the cfc for autosuggest, there are no suggestions provided.

I can't see the contents of the input field with "view source," but if I do "inspect element" on the field in Chrome, I can see a div with class="yui-ac-bd" and a ul under it. The list items in the ul are empty when using the cfc, whereas when I use a static query, the list items contain the array members.

Here's the code on my page:

<cfform>
<cfinput type="text" name="JobP"    
     autosuggest="cfc:autosuggest.AutoSuggest({cfautosuggestvalue})">
</cfform>

And here's autosuggest.cfc:

<cfcomponent output="false" >
<cffunction name="AutoSuggest" access="remote" returntype="array">
<cfargument name="ObjectType" required="false" default="JOBP">

<cfset var result=ArrayNew(1)>

<cfquery name="Objects" datasource="UC4MP">
SELECT oh_name
FROM uc4.oh
WHERE oh_otype = '#ObjectType#'
AND oh_deleteflag = 0
AND oh_lastdate > sysdate - 90
AND oh_client = 1000
and oh_name like 'A%'
ORDER BY oh_name
</cfquery>

<cfloop query="Objects">
    <cfset ArrayAppend(result,oh_name)>
</cfloop>

<cfreturn result>

If I put the following code on my page, it outputs the array with the desired contents:

<cfinvoke component="autosuggest" method="AutoSuggest"  returnVariable="result"> 
cfdump var="#result#">

I don't use jQuery yet; most of my Google results for CF autosuggest have involved jQuery and I haven't been able to wade through them for relevance to my problem. Just in case that was going to be your suggestion.

Dan Bracuk
  • 20,699
  • 4
  • 26
  • 43
Jessica I
  • 41
  • 4
  • 1
    The reason most suggest using jquery instead is that the [CF stuff has a lot of quirks](http://stackoverflow.com/a/19983983/104223). Invariably you end up needing to customize the built in stuff, and waste a lot of time trying to tweak the older ajax libraries built into CF. Starting w/JQuery from the get go save a lot of time. It is widely used, tested is much easier to upgrade. Having said that, did you 1) Test your CFC independently in a browser? 2) Did you [enable the CF Ajax Debugger](http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec10e40-8000.html)? – Leigh Feb 21 '14 at 11:25
  • 1
    Based on the code above you want your user to type the 'type' and see a list of related 'names'? i.e i type the letter 'J' and I see a list beginning with 'A'? That's counter intuitive using a 'type' pull down and a 'name' input may be a better approach. – KobbyPemson Feb 21 '14 at 12:45
  • Yep, that is why you should test the cfc independently first. Be sure to test it *with parameters*, so you can see if the query returns the expected results for the values entered. – Leigh Feb 21 '14 at 13:09
  • *for relevance to my problem* As @KobbyPemson 's comment suggested, it is entirely possible your code is working, but you are not seeing any "suggestions" because the returned data (ie starts with "A") does not actually match your input "Txxx" – Leigh Feb 21 '14 at 14:58
  • @Leigh, thanks for the very practical suggestions --ajax debugger was the answer. Also, your argument for jQuery is persuasive; it's probably time for me to learn that. – Jessica I Feb 21 '14 at 15:31
  • @KobbyPemson, now I see what you meant... swapping 'type' for 'name' is what I was doing, but not intentionally. :-) – Jessica I Feb 21 '14 at 15:35
  • @JessicaI - Yeah, using jQuery is easier than it seems at first. You might be interested in dissecting [this recent thread](http://stackoverflow.com/questions/21801780/jquery-autocomplete-with-remote-data-coldfusion). It shows how to use jQuery populate two fields: "text" and associated "id". A little different than what you are doing, but does demonstrate that is not difficult to hook jquery it into cfc results. – Leigh Feb 21 '14 at 16:06

2 Answers2

1

Thank you all for your advice! I had not known there was a separate ajax debugger, the output of which immediately made the problem clear: 

info:http: Invoking CFC: /rd/autosuggest.cfc , function: AutoSuggest , 
arguments: {"ObjectType":"A"}

My cfc arguments didn't include the autosuggest itself, so the string passed to the input field was being interpreted as "ObjectType" (the first argument) and used in the query. Since there are no records where oh_otype = 'A', the result was always empty.

I updated my cfc's arguments to 

    <cfargument name="ObjectType" required="yes" default="JOBP">
<cfargument name="autosuggest" required="yes">

and the invocation to 

<cfinput type="text" name="JobP" 
  autosuggest="cfc:autosuggest.AutoSuggest('JOBP',{cfautosuggestvalue})">

...works perfectly now.

Jessica I
  • 41
  • 4
0

If i remember correctly when I did this some years ago, I had to create a virtual directory in Apacahe and set permisions using the following directives. You can apply the same to IIS if you are working in that environment. That should get it going for you.

Alias /CFIDE "/opt/coldfusion9/wwwroot/CFIDE"
<Directory "/opt/coldfusion9/wwwroot/CFIDE">
allow from all
Options FollowSymLinks

Since then I have been using the typehead javascript from bootstrap 2. Much cleaner and easier to style. You can still use your cfc to call the data and I am including the code to clean it up for typehead. 

<cfinvoke component="autosuggest" method="AutoSuggest"  returnVariable="result"> 
<cfset mylist = ArrayToList(result, ",")>
<cfset mylist=ValueList(ShowKey.keyword)>
<cfset mylist = jSStringFormat(#mylist#)>


<input name="keyword" id="keyword"  type="text" data-provide="typeahead" data-items="10" data-source='["<cfoutput>#replace(mylist,',','","','ALL')#</cfoutput>"]'/>
user1324471
  • 21
  • 1
  • 4