Question

I have a selectonlistbox and I want to reload a panelgrid everytime the selectbox selection is made/changed. I am try to use just jsf 1.2.

I know it can be done easily using a4j or faces 2, but if anyone knows any good way to achieve this in jsf 1.2, I would really appreciate it.

A simple example would help a lot too.

Thanks

Answer 1

You basically need to create a custom Ajax aware ViewHandler and a custom XML ResponseWriter and custom tags which generates the desired JavaScript code to perform the XMLHttpRequest works and HTML DOM manipulation. This is also what most of those 3rd party JSF 1.x component libraries have done. They are all open source, so you could just take a peek in its source code to learn-by-example how they did it. It’s for a starter after all however not a trivial job as it requires a solid knowledge of how exactly HTTP, HTML DOM, JavaScript and XMLHttpRequest works. A little mistake is quickly made and it would for a starter take ages to find and really understand it.

Your best bet is really either adopting an ajax capable component library for JSF 1.2 (e.g. RichFaces 3.x which includes Ajax4jsf), or just migrating to JSF 2.0 (JSF 1.2 is over 6 years old already and JSF 2.0 was introduced almost 3 years ago already; JSF 1.x is basically history).

This particular functional requirement can however also be done without ajax, albeit somewhat clumsy, certainly if form validation plays a role. Here’s a basic kickoff example, it’s a matter of just instructing JavaScript to submit the parent form on change of the dropdown list:

<h:form>
    <h:selectOneMenu value="#{bean.selected}" onchange="this.form.submit()">
        <f:selectItem itemValue="one" />
        <f:selectItem itemValue="two" />
        <f:selectItem itemValue="three" />
    </h:selectOneMenu>
    <h:panelGroup rendered="#{bean.selected == 'one'}">
        One was selected.
    </h:panelGroup>
    <h:panelGroup rendered="#{bean.selected == 'two'}">
        Two was selected.
    </h:panelGroup>
    <h:panelGroup rendered="#{bean.selected == 'three'}">
        Trree was selected.
    </h:panelGroup>
</h:form>

This will submit the whole form synchronously on change of the dropdown list, as if you pressed a submit button. However, as said, if you’re performing validation elsewhere in the same form, you’d have to bring in quite some hacks with immediate="true" and valueChangeListener to prevent validation of all other form elements. See also Populate child menus for some detailed examples.

A completely different alternative is to just render everything to the HTML response and hide it using CSS display:none and then toggle the display using JavaScript element.style.display in some JS function which is referenced in onchange attribute.