Update object in bean without reload - jsf

On my page i have form with data from database. I want to implement, as default behaviour, writing all changes to db.
I found such example
<h:selectOneMenu value="#{bean.options}" onchange="submit()"
var="#{bean.options}" valueChangeListener="#{bean.changeListernMethod}">
<f:selectItem itemValue="1" itemLabel="option1" />
<f:selectItem itemValue="2" itemLabel="option2" />
<f:selectItem itemValue="3" itemLabel="option3" />
</h:selectOneMenu>
but it not call listener method and reload all page. I can't reload page on every inputText edit or menu selection change. Do you have idea how to achieve such behaviour? Update objects in bean without page reload.

<f:ajax listener="#{bean.changeListernMethod}" render="#form" event="valueChange"/>
This is how you implement partial submit, or in your words: update objects in bean without page reload. The line I typed will fire ajax and update (only) the form whenever a value is selected and is different from the previous selected.
For more info:
https://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/f/ajax.html

Related

Automatic scroll to JSF validation error with p:focus and p:selectOneMenu not working

I have a focus problem with the elem <p :selectOneMenu>.
I use <p:focus> to focus on the failed validation fields.
This is a part of my xhtml code:
<h:form>
<p:focus/>
[Some other panel and inputText]
<p:selectOneMenu id="workCategory"
value="#{personDto.category}"
filter="true" filterMatchMode="contains"
required="true" style="min-width: 0px !important;">
<f:selectItem itemValue="#{null}"
itemLabel="please select something"
noSelectionOption="true" itemDisabled="true"/>
<f:selectItems value="#{clientController.categoryList}"
var="category" itemValue="#{category}"
itemLabel="#{category.label}}"/>
<p:ajax event="change"
listener="#{clientController.doSomeJob(personDto.category)}"
partialSubmit="true" process="#this, #(.csrf)"
/>
</p:selectOneMenu>
<p:message for="workCategory" display="text"/>
</h:form>
When the validation fails, the focus will be on the first element whose validation failed, which means that the page scrolls until this element. This works fine for the other elements of my page, such as inputText, switchButton … However it doesn’t seem to work for <p:selectOneMenu> because when it is the first element that failed validation, the page does not scroll until its position.
I checked that the <p:selectOneMenu> receives the class “ui-state-focus” when the focus event is triggered on it. Despite having “ui-state-focus” when the validation failed, it does not scroll as expected.
I tried to replace <p:selectOneMenu> with <h:selectOneMenu>. It works fine for <h:selectOneMenu> but doesn’t for <p:selectOneMenu>.
Why is it happening and how can I solve this issue? I need because I cannot change so lightly to <h:selectOneMenu> since the whole application could be affected.

Model not updated if a4j:ajax renders #form instead of other specific component

In view I have this:
<h:selectOneMenu id="makeSelect" value="#{bean.selectedMake}">
<f:selectItem itemLabel="---" itemValue="#{null}" />
<f:selectItems value="#{bean.availableMakeList}"/>
<a4j:ajax listener="#{bean.updateModelList}" render="#form"/>
<h:messages/>
</h:selectOneMenu>
bean.selectedMake gets updated only on the first time I change the selection.
If I change render="#form" to render="someOtherComponent", bean.selectedMake is updated normally. But I want to rerender all form.
Why model is not updated if I rerender all form?

How to communicate back and forth between client and server-side in JSF?

Most of my problems in JSF, so far, seem to boil down to this - communication from (static) client-side to (dynamic) server-side, and vice-versa; for instance, for re-rendering components.
An example: enabling/disabling a button (commandButton) that depends on the selection of a selectoneradio.
What is the correct way to communicate the selection of the selectoneradio (client to server) and then ajaxingly updating the commandButton (server to client)?
By using <f:ajax>.
Here's an example which enables the button when the second item is selected.
<h:selectOneRadio value="#{bean.selectedItem}">
<f:selectItem itemValue="1" itemLabel="First item" />
<f:selectItem itemValue="2" itemLabel="Second item" />
<f:ajax render="button" />
</h:selectOneRadio>
<h:commandButton id="button" disabled="#{bean.selectedItem != 2}" />
Make sure that the #{bean} is a #ViewScoped one so that the state is remembered across postbacks. Else it'll fall back to default values when you press the submit button.
That said, I strongly recommend to go through a decent JSF book. The above is usually already covered in 1st chapter.

p:watermark clears on updating Component even if there is no value

I'm using Primefaces p:watermark on a p:inputText. Its working fine.
When ever I update the component its loosing watermark,even when there is no content inside the p:inputText
<h:form id="reg_frm">
<p:inputText id="name" value="#{user.name}"/>
<p:watermark value="your name" for="name" id="name_watermark" />
<p:selectOneMenu value="#{user.drpvalue}">
<f:selectItem itemLabel="One" itemValue="1"/>
<f:selectItem itemLabel="two" itemValue="2"/>
<f:selectItem itemLabel="three" itemValue="3"/>
<f:selectItem itemLabel="four" itemValue="4"/>
<p:ajax event="change" update="name name_watermark"/>
</p:selectOneMenu>
</h:form>
How do I retain the Watermark when there is no content in the
p:inputText after update?
Note: Primefaces version - 3.5
According to the PrimeFaces showcase for watermarks: "Watermark displays a hint about input fields by using native placeholder in supported browsers and a javascript solution in others browser compatibility."
PrimeFaces probably adds some hidden javascript stuff to the element which is a parent of both components (input and watermark). In your case that's the form which you would need to update. If you don't want that, put a new panelgroup around both elements and update that, which will have the same effect.
Try this attribute:
oncomplete="PrimeFaces.showWatermarks()"
It was given in Primefaces User's Guide.

JSF SelectOneMenu Browser Back Button

I have a problem where I am using a SelectOneMenu for navigation:
<p:selectOneMenu value="#{navigator.outcome}">
<f:selectItem itemLabel="Select item.." />
<f:selectItems value="#{navigator.menuItems}" />
<p:ajax event="change" listener="#{navigator.navigate}" />
</p:selectOneMenu>
This works fine except when I navigate back it doesnt display "Select Item.."
The navigator bean is request scoped (I've tried view scoped as well).
I've disabled caching using a WebFilter.
You need to turn autocomplete off at the form level.
With JSF 2.1 you cannot do this.
Either wait until JSF 2.2 or uses omnifaces:
See link:
how to do autocomplete="off" at form level in JSF

Resources