Question

Im having a problem getting jequery autocomplete to work for rerendered textfields.

I have a a4j:commandlink to show some more inputfields in my form, when this is clicked I reRender an outer a4j:outputpanel to reRender the contents. But to my surprise, the jQuery autocomplete event is never fired for a reRendered textfield I have. It is working as expected before the reRender. The textfield gets autocomplete based on its id, from google maps like this:

jQuery(document).ready(function(){
    jQuery("#createActivityAddressInputId").autocomplete({
    //This bit uses the geocoder to fetch address values
    ...
});
}

<a4j:outputPanel id="createActivityPanel">
    ...
    <h:inputText id="#{GUIComponentIds.createActivityAddressInputId}" value="#"
        {activityRequestBean.newActivityAddress}" />
    <a4j:commandLink value="#{msg.createActivityShowmapLabel}" 
        oncomplete="onShowMapPanel()" action="#{activityRequestBean.showMapClicked}" 
        rendered="#{!activityRequestBean.showMap}" 
        reRender="createActivityMapPanel,createActivityPanel" />
    ...
</a4j:outputPanel>

I was thinking that this maybe had something to do with the autocomplete event is hooked up on document load, or am I way off here?

Thanks!

Answer 1

Yes; you will need to re-attach the autocomplete by calling the same method every time you re-render. (Presumably you would cache the options that you pass to autocomplete.)

Something like:

var autocompleteOptions = null;
$(function ()
{
   autocompleteOptions = getFromGeocoder();
});

function onReRender()
{
   $("#createActivityAddressInputId").autocomplete(autocompleteOptions);
}

Then call onReRender whenever you rerender the control.