Primefaces selectOneRadio ajax - jsf

I'm trying to display validation messages everytime the user clicks on a radio button.
This only works when I click on the submit button, but not when I click on the radio button:
<h:form id="form">
<p:panel id="panel">
<ui:repeat value="#{questionsBean}" var="question">
<h:panelGrid columns="3" style="margin-bottom:10px" cellpadding="5">
<h:outputText value="#{question.questionText}" />
<p:selectOneRadio id="question" value="#{question.response}"
validator="#{question.validate}" required="true">
<f:selectItem itemLabel="Yes" itemValue="Yes" />
<f:selectItem itemLabel="No" itemValue="No" />
<p:ajax update="msgQuestion" event="change"/>
</p:selectOneRadio>
<p:message for="question" id="msgQuestion" />
</h:panelGrid>
</ui:repeat>
<p:commandButton id="btn" value="Save" update="panel" partialSubmit="true"/>
</p:panel>
</h:form>

The HTML DOM change event is the wrong event when you want to listen on whether the radio button (or checkbox) is clicked. You should be using the click event for this.
The value of the radio button (and checkbox) basically never changes. It has always the same value. The question is more whether that value will be sent to the server side or not. This is determined by the "checked" state which is usually triggered by the DOM click event.
The actual behaviour of the change event on radiobuttons/checkboxes is dependent on the webbrowser used. The behaviour is particulary inconsistent in the IE browser. It not only depends on the version used, but also in the rendering mode used (quirks mode vs standards mode). Perhaps you were actually using IE while testing.
The default event type of the PrimeFaces <p:ajax> (and the standard JSF <f:ajax>), which is valueChange already automatically covers this:
<p:ajax update="msgQuestion" event="valueChange" />
This will autogenerate the right change event handler in text inputs and dropdowns and the click event handler in radiobuttons and checkboxes.
But as said, it's the default event type already. Just omit it altogether.
<p:ajax update="msgQuestion" />

Related

PrimeFaces dialog doesn't use the information I provide in the view

I have a view which contain the following fields:
<p:selectOneMenu style="width:40px" value="#{capacityFamilyBean.capacityFamily.bottleneck}">
<f:selectItems value="#{capacityFamilyBean.availableCapFamilyBottlenecks()}"/>
</p:selectOneMenu>
<p:inputText id="capacityFamilyName" binding="#{capacityFamilyName}" style="margin-left:20px" value="#{capacityFamilyBean.capacityFamily.name}">
<p:ajax event="change" update="newBundleButton"/>
</p:inputText>
<p:commandButton id="newBundleButton" icon="ui-icon-plus" disabled="#{empty capacityFamilyName.value}" value="${msgs.New}" oncomplete="PF('capacityFamilyDialog').show();"/>
you can see the value properties are {capacityFamilyBean.capacityFamily.prprty}
capacityFamilyDialog uses the same properties, but they are not pre-filled
<p:selectOneMenu value="#{capacityFamilyBean.capacityFamily.bottleneck}">
<f:selectItems value="#{capacityFamilyBean.availableCapFamilyBottlenecks()}" />
</p:selectOneMenu>
<p:inputText id="capacityFamilyName" style="margin-left:20px" value="#{capacityFamilyBean.capacityFamily.name}"/>
I'm assuming they refer to different capacityFamily object, but how can I counter that?
The dialog is delivered with the page. So it's completely empty.
oncomplete="PF('capacityFamilyDialog').show();"
is pure javascript and only shows this empty popup. If you like to have a dialog with actual values, you have to update it in an ajax-call like your commandButton.
<p:commandButton value="${msgs.New}" update="capacityFamilyDialog_ID" oncomplete="PF('capacityFamilyDialog').show();"/>
The dialogue is functional when you click the button. I think you should update the id for dialogue box.
JSF Code
<p:commandButton id="impBtb"
process="#this" icon="ui-icon-plus" disabled="#{empty capacityFamilyName.value}"
value="${msgs.New}" oncomplete="PF('capacityFamilyDialog').show();" update="#form:capacityFamilyDialog">
</p:commandButton>
So, you may have to perform a ajax-call from your commandbutton to update the dialog box.
Hope it helps!!

Render rich:extendedDataTable

I need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.

<p:dialog appendToBody="true" doesn't call Converter class

I am using Primefaces 3.4.2 with JSF 2.0
I have the following in a dialog popup in JSF page.
<p:dialog header="Create New Request" style="font-weight:bold"
widgetVar="newDialog" resizable="false" id="newDlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" position="center top" width="850" height="450">
<p:panelGrid columns="2">
<h:outputLabel value="Employee" for="employee" />
<p:selectOneMenu id="employee" value="#{mymb.employee}"
converter="#{employeeConverter}">
<f:selectItems value="#{mymb.employeeItems}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeNumber}"/>
<p:ajax listener="#{mymb.loadDepartments}" process="#this"/>
</p:selectOneMenu>
</p:panelGrid>
<p:separator />
</p:dialog>
If I use appendToBody="true", then selectOneMenu Converter class doesn't gets invoked, but if I make it appendToBody="false", then Converter class gets invoked.
What could be the reason for this? appendToBody="false" makes my popup dialog unusable, not able to navigate using mouse.
How can I resolve this issue?
Remove the appendToBody and put an <h:form/> inside your dialog(along with it's content).
The purpose of appendToBody="false" is to ensure your dialog is rendered within the body (and hence within the main <h:form/>) of the HTML output.
Without appendToBody="false" , the dialog might end up being appended to the end of the markup in <body/> and as a result, nothing inside it will get executed.
Adding <h:form/> to your dialog ensures that even if it winds up outside the <body/> it will still be able to submit to the server

which event is fired after the action event?

I want to display the header of the modal popup with the value chatBean.selectedUser. The thing that happens is that onclick event is fired before action event so the page is not refreshed when the onclick event is fired. Hence I cannot get the header of modal pop up as the value contained in chatBean.selectedUser. Is there anyway that I can display the header of modal popup with the value chatbean.selectedUser after that the page is submitted?
Here is the relevant part of the view:
<h:form>
<p:selectOneMenu value="#{chatBean.selectedUser}" id="select">
<f:selectItems value="#{chatBean.friendList}" var="users" itemLabel="#{users.firstName}" itemValue="#{users.firstName}"/>
</p:selectOneMenu>
<p:commandButton id="basic" value="Basic" onclick="dlg.show()" type="button" action="#{chatBean.refresh}"></p:commandButton>
<p:dialog id="modalDialog" header="#{chatBean.selectedUser}" widgetVar="dlg" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
<h:inputText></h:inputText>
</p:dialog>
</h:form>
You should show the dialog only when the action is completed, not before. Use the oncomplete attribute instead.
<p:commandButton ... oncomplete="dlg.show()" />
Don't forget to explicitly update the dialog's content before opening it. I don't see that anywhere in your code. Perhaps you're using RequestContext#update() or something, but normally you'd use update attribute for this.
<p:commandButton ... update="modelDialog" oncomplete="dlg.show()" />
Also, the type="button" is strange. This way the action wouldn't be invoked at all, but perhaps that's just a careless leftover of experimentation. Remove it.

Primefaces how to update content in a dialog and keep the dialog centered?

I have a dialog that contains no content on page load and I'm dynamically setting the content of a dialog box based on the link that a user clicks on.
<p:dialog widgetVar="dlg" modal="true" id="dialog">
<p:panel id="fullArticle">
<h:outputText value="#{content.newsArticle}" escape="false" />
</p:panel>
</p:dialog>
...
...
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}" onclick='dlg.show();' update=":fullArticle">
<f:attribute name="contentId" value="#{news.contentId}" />
</p:commandLink>
The problem i'm having is that when you click the "Read More" link, it shows the dialog, but the dialog is not centered on the page. If i change the udpate attribute on the commandLink to update=":dialog", the dialog flashes as if it's opening and then closing right away.
How can I update the dialog and have it be centered with dynamic content?
The onclick is executed before the ajax request. You need to open the dialog in oncomplete instead. This will be executed after the ajax request and update. The <p:dialog> is namely by default hidden unless its visible attribute evaluates true.
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}"
update=":dialog" oncomplete="dlg.show()">
Unrelated to the concrete problem, are you aware that you can pass fullworthy objects as method arguments since EL 2.2? This makes the <f:attribute> and actionListener "hack" superfluous:
<p:commandLink value="Read more" action="#{content.getFullArticle(news)}"
update=":dialog" oncomplete="dlg.show()" />
I had the same problem.
Updating the dialog makes it disappear and reappear (and forget its position).
To solve it, I created a wrapper tag around the dialog content.
<p:commandLink update=":playerViewDialogHeader,:playerViewDialogContent"
oncomplete='playerViewDialogJS.show()' value='#{item.name}' />
<p:dialog id='playerViewDialog' widgetVar='playerViewDialogJS'>
<f:facet name="header">
<h:outputText id="playerViewDialogHeader" value="#{playerController.objectView.name}" />
</f:facet>
<h:form id='playerViewDialogContent'>
<!-- CONTENT GOES HERE -->
</h:form>
</p:dialog>

Resources