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> 

Answer 1

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.