How to use in a plain instead of ?

Question

I have a search form which uses standard HTML <form> tag and sends a GET request like so search.jsf?country=x&city=y. They are set as view parameters in a view scoped bean.

The search form contains two cascading dropdowns, one for countries and one for cities. How can I update the cities dropdown by <f:ajax> without changing <form> to <h:form> and thus breaking the GET functionality? Do I have to use "plain vanilla" ajax by XMLHttpRequest? How could I use it on a JSF backing bean?

Answer 1

I'd just keep using <h:form> and ask some assistance to JavaScript to turn it into a GET form whenever it's been submitted by the submit button.

Something like:

<h:form prependId="false" onsubmit="doGet(this)">
    <h:selectOneMenu id="country" value="#{bean.country}">
        <f:selectItems value="#{bean.countries}" />
        <f:ajax listener="#{bean.loadCities}" render="city" />
    </h:selectOneMenu>
    <h:selectOneMenu id="city">
        <f:selectItems value="#{bean.cities}" />
    </h:selectOneMenu>
    <input type="submit" value="Search" />
</h:form>

with this JS to turn it into a GET form and removing the two <h:form> specific hidden fields:

function doGet(form) {
    form.method = "get";
    form.removeChild(document.getElementsByName(form.name)[1]);
    form.removeChild(document.getElementById("javax.faces.ViewState"));
}