Win a copy of Murach's Python Programming this week in the Jython/Python forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

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

 
Soren Christensen
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 99
Java MyEclipse IDE Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Bartender
Posts: 18531
61
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!