cfinput autosuggest not returned properly from .get() call

Question

I'm having a problem with a cfinput tag when returned from a jQuery .get() call. If I put the tag on the main page like so:

<cfform>
    <cfinput type="text" name="txtinputfilter" autosuggest="cfc:#Application.cfcDir#autoSuggest.lookupTailNumber({cfautosuggestvalue})" >

The tag loads properly and the autosuggest works as expected. However, if I put the exact same tag (and nothing else) in a separate template, named common/includes/FilterData.cfm, and call it from the main page like so:

<div id="txt_input_container"></div>
$(document).ready(function(){
    //the following get call is normally called on another select input's onchange
    $.get('common/includes/FilterData.cfm',
        //note that the following parameters are not being used in this example
        {column: selectedValue,
         filterValue: filterValue,
         filterID: filterID,
         configFile: 'Tracking/config/GeneralMaint.xml'},
        function(response){
            $('#txt_input_container').empty().append(response);
        }
    );
});

the tag loads, but the autosuggest doesn't work. Console shows my get followed by eight more calls:

http://localhost/CORE/common/includes/FilterData.cfm?column=SERIAL_NUMBER&filterValue=&filterID=fi_1&configFile=Tracking%2Fconfig%2FGeneralMaint.xml

http://localhost/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js?_=1318592952367

http://localhost/CFIDE/scripts/ajax/yui/animation/animation-min.js?_=1318592952634

http://localhost/CFIDE/scripts/ajax/yui/autocomplete/autocomplete-min.js?_=1318592952706

http://localhost/CFIDE/scripts/ajax/messages/cfmessage.js?_=1318592952745

http://localhost/CFIDE/scripts/ajax/package/cfajax.js?_=1318592952782

http://localhost/CFIDE/scripts/ajax/package/cfautosuggest.js?_=1318592952821

http://localhost/CFIDE/scripts/cfform.js?_=1318592952859

http://localhost/CFIDE/scripts/masks.js?_=1318592952907

followed by this error message:

_cf_resetLoadingIcon_1318592952305 is not defined
[Break On This Error] /* ]]> */</script>

I'm a bit confused by the question, Dan. I don't see where the cfinput is used in the 2nd example, can you modify your first and second code snippets so that they both show where the cfinput is in relation to the jQuery? — Shawn Holmes, Oct 14 '11 at 14:47
Are you trying to dynamically display the generated cfform/cfinput within the div_input_container? This is going to be problematic because the parent template has its own jscript, and the template you're calling has *its* own jscript--dynamically generated by CF when you use autosuggest param. What you are trying to do can be done, but not as easily as you suspect--your function(response) will have to have a handler that responds to the cfinput autosuggest. You get errors because the dynamically displayed cf expects appropriately-generated jscript (by CF)--but is not interpreted in the result. — Shawn Holmes, Oct 14 '11 at 17:33

score 1 · Accepted Answer · answered Oct 14 '11 at 18:03

This won't be the answer you want to hear.

In order for you to dynamically display the results of a jQuery .get() operation, and have new javascript take effect, the events that affect that newly displayed HTML must be bound during the result handler of the initial .get(). Normally, this is doable...something along on the lines of:

 $.get('common/includes/FilterData.cfm',
        {column: selectedValue},
        function(response){
           $('input').change(function(event){
              ...addtl. logic here
           }

You'd find a way to point to/call your new functions within that binding of the change event to the brand new input field that was loaded as a result of your initial .get() call.

Where this gets muddy is when CFML is involved. cfform/cffinput, when used in combination with the autosuggest parameter...build the javascript by hand for you...automatically. However, there's no real control over the generation of this code--CF will name it arbitrarily. When I typed in your code to test, I got a function named _cf_autosuggest_init_1318614417652...is it the same for you? (Probably not).

Therefore, its going to be extraordinarily difficult for you to dynamically bind new event handlers on the result of .get()--if you don't know what they're going to be called.

My recommendation is either to redesign your .get() call, so that you are not loading the cfform/cfinput--but perhaps the raw data itself--and keep the input on the parent template, or (deep breath)...

...scrap the cfform/cfinput, and write the jQuery autosuggest functionality by hand, so that you control the names of the functions--and can point to them in your jQuery result handlers when it comes time to bind to them dynamically.

Hi Shawn, that is the direction that I think we're headed here... we're converting much of the site from ExtJS to jQuery and the further we go, the more we realize how the two don't always play nicely together. Unfortunately, deadlines are looming... — earachefl, Oct 14 '11 at 18:29

cfinput autosuggest not returned properly from .get() call

1 Answers1