jQuery autocomplete doesn't work anymore after updating JSF components

Question

I have a drop-down menu:

<ace:selectMenu value="#{MenuBean.cityList}" valueChangeListener="#{MenuBean.ChCountry}">
    <f:selectItems itemValue="cityList.id" itemLabel="cityList_nm_city" />
</ace:selectMenu>

and an input field

<h:inputText id="form:nm" value="#{MenuBean.nm}" />  

which uses jQuery autocomplete

$(document).ready(function() {
    $("#form\\:nm").autocomplete({
        source : function(request, response) {
            $.ajax({
                url : url,
                data : {
                    method : "getnm",
                },
                success : function(data) {
                    alert("success");
                }
            });
        }
    });
});

When I change the drop-down and update JSF components, then jQuery autocomplete does not work anymore. How is this caused and how can I solve it?

Answer 1

If I got it right, my guess is that you re-rendering the input somewhere.

Remember that re-rendering a component will not make the $(document).ready function execute again, so #form\\:nm won't have the autocomplete wired to it. If you're using an f:ajax to refresh a component, just create a JS funciton that wires the autocomplete to the component and call it on the onevent of that f:ajax.

Something like this:

function loadAutocompleteField(data) {
    if(data.status == "success") {
        $("#form\\:nm").autocomplete({
            source : function(request, response) {
                $.ajax({
                    url : url ,
                    data : {
                        method : "getnm",
                    },
                    success : function(data) {
                        alert("success");
                    }
                });
            }
        });
    }
}

Again, for example, if you use an f:ajax:

<f:ajax render="yourComponent" onevent="loadAutocompleteField" />

If you use another mechanism, you just need to invoke the loadAutocompleteField function once you're done.

---

Edit

Indeed my original answer was inefficient. My usual approach was to search for a widget-related CSS and, if it was loaded, I'd avoid wiring the widget again. Turns out that f:ajax's onevent function can receive a data argument which contains the status of the whole ajax request cycle (before ajax request is sent > complete means that the ajax response has arrived > success updating the components based on the ajax response).

You'll want to check up that argument and wire the component only after the DOM has been updated.

Thanks to BalusC for helping me to sort this out. That's SO for you, I've learnt something by answering a question.