jsf2.0 commandLink inside ui:repeat is not working - jsf-2

I m having problem with commandLink, it is working in my table at the first but other are made inside ui:repeate and the commandLink there is not working
<tr>
<td rowspan="#{form25Bean.forms1size}">Наименования научных
лабораторий:</td>
<td>#{form25Bean.forms1first.sciencenName}</td>
<td>#{form25Bean.forms1first.innovationName}</td>
<td>#{form25Bean.forms1first.ppcPortion}</td>
<td><h:commandLink value="удалить" id="cl2"
action="#{form25Bean.remove}">
<f:setPropertyActionListener
target="#{form25Bean.selectedForm}" value="#{form25Bean.forms1first}" />
</h:commandLink> <h:column>
<h:commandLink value="изменить" action="#{form25Bean.edit}">
<f:setPropertyActionListener
target="#{form25Bean.selectedForm}" value="#{form}" />
</h:commandLink>
</h:column></td>
</tr>
<ui:repeat var="f1" value="#{form25Bean.forms1}">
<h:form>
<tr>
<td>#{f1.sciencenName}</td>
<td>#{f1.innovationName}</td>
<td>#{f1.ppcPortion}</td>
<td><h:commandLink value="удалить" id="cl2"
action="#{form25Bean.remove}">
<f:setPropertyActionListener
target="#{form25Bean.selectedForm}" value="#{f1}" />
</h:commandLink>
<h:column>
<h:commandLink value="изменить" action="#{form25Bean.edit}">
<f:setPropertyActionListener
target="#{form25Bean.selectedForm}" value="#{f1}" />
</h:commandLink>
</h:column></td>
</tr>
</h:form>
</ui:repeat>

Looks like you got nested forms
There is a form wrapping your entire table (cause you got several h:commandLink above the <ui:repeat )
And there is a form inside the ui:repeat
Take a look at your generated source code (html) , you got <form>.... <form>....</form></form>
get rid of the nested forms... (for example remove the <h:form> from ui:repeat)

Related

Modal dialog not working correctly

I'm working on a JSF/Primefaces application. I want to prevent page behind a primefaces dialog. I tried this code:
<h:form id="form">
<p:dataTable id="types" value="#{resourcesTypesMBean.resourceTypes}" var="item"
selection="#{resourcesTypesMBean.selectedResourceType}"
rowKey="#{item.id}" selectionMode="single">
<f:facet name="header" >
<table style="border: hidden">
<tbody >
<tr >
<td align="left" style="border: hidden">
<p:outputLabel value="List of Resources' Types"/>
</td>
<td align="right" style="border: hidden">
<p:commandButton
oncomplete="ResourceTypeDialogNew.show()"
icon="ui-icon-plus" title="add"/>
<p:commandButton id="btnDelete" title="delete
" actionListener="#{resourcesTypesMBean.deleteResourceType()}"
update="types" icon="ui-icon-trash" />
<p:button outcome="Resources.xhtml"
icon="ui-icon-arrowthick-1-w" title="back"/>
</td>
</tr>
</tbody>
</table>
</f:facet>
<p:column headerText="Name">
<p:outputLabel value="#{item.name}"/>
</p:column>
<p:column headerText="Code">
<p:outputLabel value="#{item.code}"/>
</p:column>
</p:dataTable>
</h:form>
<h:form id="newResourceTypeForm">
<p:dialog header="New Resource Type" widgetVar="ResourceTypeDialogNew"
resizable="false" modal="true" appendTo="#(body)" showEffect="explode"
hideEffect="explode" style="position: absolute ;"
id="dialogNewResourceType">
<p:panel id="panel">
<p:messages id="messages" />
<p:panelGrid id="newResourceType" columns="2" style="margin-bottom:10px">
<f:facet name="header">
<p:graphicImage value="/images/resource.png"/>
</f:facet>
<p:outputLabel value="Name" for="name"/>
<p:inputText id="name" value="#{resourcesTypesMBean.name}"
required="true" requiredMessage="The Name field is required." />
<p:outputLabel value="Code" for="code"/>
<p:inputText id="code" value="#{resourcesTypesMBean.code}"
required="true" requiredMessage="The Code field is required." />
</p:panelGrid>
<div align="right" >
<p:commandButton value="Save" style="margin-right: 5px" icon="ui-
icon-circle-check" oncomplete=" handleSubmitRequest(xhr, status,
args, 'ResourceTypeDialogNew','newResourceTypeForm');"
actionListener="#{resourcesTypesMBean.addResourceType()}"
update=":form:types, :growl" />
<p:commandButton value="Cancel"
oncomplete="ResourceTypeDialogNew.hide();"
icon="ui-icon-arrowrefresh-1-n" styleClass="ui-priority-primary"/>
</div>
</p:panel>
</p:dialog>
</h:form>
When the dialog is shown, the page behind is blocked but save and cancel buttons are not working correctly and the user is automatically logged out from the application.
I need your help.
Update: without modal="true" appendTo="#(body)" it works correctly (both save and cancel buttons).
Can't check the solution life now, but the following looks suspicious:
When you check the rendered XHTML-code (e.g. through Firebug in Firefox), you might recognize that the form newResourceTypeForm is actually empty. With the appendTo="#body", I guess, the dialog panel is attached directly to thebody` - element, and through this is outside any formular. This prevents the buttons inside of work.
Either move the form into the p:dialog, or
try dropping appendTo
try a rewrite appendTo="#form"
Hope one of that might help you go forward, and if - upvotes appreciated - ...

Show/hide JSF2 form using <p:selectBooleanButton>

I need to show and hide component in my JSF 2-PrimeFaces application, please find my code below for the same:
<p:outputLabel for="online_offer" value="Online offer#{msg._question_mark}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:selectBooleanButton id="online_offer" value="#{QckPstBen.offer.isExpired}" onLabel="Yes" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close" >
<f:ajax event="click" render="#form" />
</p:selectBooleanButton>
</h:panelGrid>
</p:panel>
<h:outputLabel value=" " />
<h:panelGroup rendered="#{QckPstBen.offer.isExpired}">
<p:outputLabel for="website" value="Website/link to the offer#{msg._colon}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:inputText id="website" required="true" size="38" />
<p:watermark for="website" value="www.discountbox.in" />
</h:panelGrid>
</p:panel>
</h:panelGroup>
But it doesnt work, any clue
PrimeFaces components doesn't support <f:ajax>. Use <p:ajax> instead.
<p:selectBooleanButton ...>
<p:ajax update="#form" />
</p:selectBooleanButton>
Note that I omitted the event attribute, it defaults here to click already.
Place rendered on children of <h:panelGroup> instead or place a container of some sort around it, for example p:panel.
This may be OBE by now but...
When referencing the page bean, don't I recall in the #{} context, the convention of using lowercase for class names and method/attributes of the page bean (i.e. not #{QckPstBen.offer.isExpired} but #{qckPstBen.offer.isExpired}?

navigation doesn't work in primefaces carousel

I need to set some values in my model and navigate page to another one but nothing happens on button click(neither page navigated nor method triggered)....My code works perfect outside the carousel but inside carousel its doesn't work(no page navigation)
<p:carousel value="#{catalog.getServices()}" var="s" rows="1">
<h:outputLabel for="id" value="Service ID " />
<h:outputText id="id" value="#{s.id}" />
<br></br>
<h:outputLabel for="name" value="Service Name" />
<h:outputText id="name" value="#{s.name}" />
<br />
<h:commandLink action="detail">
<f:setPropertyActionListener value="#{s}" target="#{sh.currentService}" />
<h:commandButton value="getService" style="float:right;" />
</h:commandLink>
</p:carousel>
And my navigation works perfect outside this carousel
<h:commandLink action="detail">
<f:setPropertyActionListener value="#{s}" target="#{sh.currentService}" />
<h:commandButton value="getService" style="float:right;" />
</h:commandLink>
Above code can make my page navigate and method which I want to trigger is also working fine
You should avoid nesting h:commandButton inside h:commandLink.
Simply use h:commandButton this way:
<h:commandButton value="getService" action="#{yourBean.yourActionMethod}">
<f:setPropertyActionListener .../>
</h:commandButton>
And in your backing bean return the navigation target as result from the action method:
public String yourActionMethod() {
// do your stuff here
return "detail";
}
Try to put the commandButton inside p:column. I had this issue and here http://forum.primefaces.org/viewtopic.php?f=3&t=16120 helped me.

Can't call ajax method with param using in ui:repeat using f:ajax

I have a list of links rendered in a loop. On click of the link I want to set a bean property selectedIndex. I am trying to do it by passing it on Ajax parameter, but the full form is getting refreshed. Even then the notificationPreferencesBean.retrievePreferences is not getting fired. Is this approach correct?
Here is my template snippet:
<ui:repeat value="#{notificationPreferencesBean.userNotificationPreferences}"
var="userNotificationPreferenceVar" varStatus="idx">
<li>
<h:commandLink
value="#{userNotificationPreferenceVar.notificationClassName.label}"
styleClass="#{userNotificationPreferenceVar.cssClassName}"
action="#{notificationPreferencesBean.retrievePreferences}">
<f:ajax execute="#form" render="#none">
<f:param value="#{idx}" name="idx" />
</f:ajax>
</h:commandLink>
</li>
</ui:repeat>
and here is the bean declaration:
#ManagedProperty(value = "#{param.idx}")
private Integer selectedIndex;
Interestingly the following code works Ajaxfully but it just calls the notificationPreferencesBean.retrievePreferences and doesn't set the selectedIndex(as expected because I am not passing any param)
<ui:repeat value="#{notificationPreferencesBean.userNotificationPreferences}"
var="userNotificationPreferenceVar" varStatus="idx">
<li>
<h:commandLink
value="#{userNotificationPreferenceVar.notificationClassName.label}"
styleClass="#{userNotificationPreferenceVar.cssClassName}"
action="#{notificationPreferencesBean.retrievePreferences}">
<f:ajax execute="#form" render="#none" />
</h:commandLink>
</li>
</ui:repeat>
Is there any other way of doing it?
I just want to set selectedIndex property on click of the link ajaxfully.
You don't need to use the annotation #ManagedProperty for that.
Just use a f:setPropertyActionListener:
<ui:repeat value="#{notificationPreferencesBean.userNotificationPreferences}"
var="userNotificationPreferenceVar" varStatus="idx">
<li>
<h:commandLink
value="#{userNotificationPreferenceVar.notificationClassName.label}"
styleClass="#{userNotificationPreferenceVar.cssClassName}"
action="#{notificationPreferencesBean.retrievePreferences}">
<f:setPropertyActionListener value="#{idx}"
target="#{notificationPreferencesBean.selectedIndex}" />
<f:ajax execute="#form" render="#none" />
</h:commandLink>
</li>
</ui:repeat>

<f:ajax> contains an unknown id :someid when used in <ui:repeat>

My code snippet:
<ui:repeat var="o">
<h:panelGroup id="someid">
<ui:repeat>
// HTML
</ui:repeat>
</h:panelGroup>
<div>
<h:form>
<h:commandButton action="#{o.doSomething}">
<f:ajax event="action" render=":someid" />
</h:commandButton>
<h:form>
</div>
</ui:repeat>
Why didn't <f:ajax> find someid?
That's not possible. The <ui:repeat> prepends the client ID with its own ID and an index. All those panelgroups get IDs like j_id1:0:someid, j_id1:1:someid, j_id1:2:someid, etc. The following is supposed to work in your particular construct:
<f:ajax render=":#{component.parent.parent.clientId}:someid" />
This will prepend the <ui:repeat>'s current client ID dynamically. It however only works when you're using with MyFaces instead of Mojarra. The <ui:repeat> is broken in many ways in Mojarra. They have scheduled many fixes for 2.2.
An alternative is to group them in a common NamingContainer component like <h:form>, so that you can use a relative ID.
<ui:repeat var="o">
<h:form>
<h:panelGroup id="someid">
<ui:repeat>
// HTML
</ui:repeat>
</h:panelGroup>
<div>
<h:commandButton action="#{o.doSomething}">
<f:ajax event="action" render="someid" />
</h:commandButton>
</div>
<h:form>
</ui:repeat>

Resources