Loading part of page using AJAX - how to handle commandButtons and such?

[Soren Christensen]

Hi

I have a page which lists items using a ui:repeat. The repeat is surrounded by my h:form tag.

Now I have made it so that when click an item, then I load some item details - render them in their own xhtml file and inject the result into the dom tree.

This is causing some problems.

* My injected content has commandButtons and commandLinks which do not work because I don't have a form in my injected page - since this would cause nested forms :-(
* tried to replace commandButtons and commandLinks and instead create unique url's that I can call to get my work done - but how to I then re-render a panelGroup on then page? tried using jsf.ajax.request but I'm not able to get part of the page (a shoppingcart) to update

Basic outline

<h:form>
<table>
<ui:repeat ...>
<tr><td onclick="...">Click here to load item details</td></tr><tr><td id="itemDetailPlaceholder"></td></tr>
</ui:repeat>
</table>
</h:form>

Hope someone can help me solve this.

Thanks in advance

/Søren

[Akaine Harga]

Solution 1: Use one global form and do "partial" submits and "partial" updates.
Solution 2: Move managed bean invocations to the form and execute them remotely via pure JS (for ex. PrimeFaces' remoteCommand or OmniFaces' commandScript). This way the actual buttons do not have to be inside a form.
Solution 2a: If you are not allowed to use JSF AJAX extensions like ADF, PrimeFaces, OmniFaces or RichFaces, in your buttons just call a servlet (that would invoke the managed bean) using plain AJAX.

[Tim Holloway]

Solution 3: use a JSF h:dataTable for your items instead of ui:repeat. Make the commandButton AJAX-aware and tell it to render the dataTable. Any rows added/deleted/modified by the commandButton's action method will be updated.

I only recommend using ui:repeat when you need to repeat elements and you don't want them in discrete vertical rows. For example, free-form or horizontal layouts.

[Soren Christensen]

Ended up using solution 2 with commandScript and works perfect.

Thanks a lot :-)

Akaine Harga wrote:Solution 1: Use one global form and do "partial" submits and "partial" updates.
Solution 2: Move managed bean invocations to the form and execute them remotely via pure JS (for ex. PrimeFaces' remoteCommand or OmniFaces' commandScript). This way the actual buttons do not have to be inside a form.
Solution 2a: If you are not allowed to use JSF AJAX extensions like ADF, PrimeFaces, OmniFaces or RichFaces, in your buttons just call a servlet (that would invoke the managed bean) using plain AJAX.