i'm working in a web application with jsf and primefaces.
My code for the navBar looks as follow:
<p:layoutUnit position="north" >
<h:form>
<img src="resources/images/logo.png" alt="" />
<p:outputLabel value="Rechercher " style="font-size: large"/>
<p:inputText value="#{acount.searchWord}" required="true" requiredMessage="Le titre est requit"/>
<p:commandButton value="Go" action="#{acount.rechercherLivre(acount.searchWord)}" styleClass="btngo" />
<h:link outcome="main.xhtml" value="Accueil" style="margin-left: 400px;font-size: medium"/>
<h:link outcome="Contact.xhtml" value="Contact" style="font-size: medium"/>
<h:link outcome="Info.xhtml" value="Info" style="font-size: medium"/>
<h:link outcome="Login.xhtml" value="Login" style="font-size: medium" rendered="#{!acount.connected}" />
<h:link outcome="exe.xhtml" value="S'enregistrer" style="font-size: medium" rendered="#{!acount.connected}" />
<p:menuButton value="Panier #{shopingCart.produits.size()}" style="color: #045491;background: greenyellow;background-color: yellowgreen;font-size: medium">
<p:menuitem value="Afficher" action="#{shopingCart.afficherPanier()}"/>
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" />
</p:menuButton>
<p:menuButton value="Options" rendered="#{acount.connected}" style="color: #045491;background: greenyellow;background-color: yellowgreen;font-size: medium">
<p:menuitem value="Compte" />
<p:menuitem value="Mes Commandes " />
<p:menuitem value="Se deconnecter" action="#{acount.doLogout()}" />
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" />
</p:menuButton>
</h:form>
</p:layoutUnit>
And the image for this code is:
The problem is if i don't put anything in the imput text the action for the commandButton is not executed, also the action method in the menuButton are not executed if i don't put something in the inputText.
I can solve this problem with putting a form for each action method but my navbar got larger and it looks worth.
how can i solve this issues?
If you do not need to post any value to your bean by your commandButton then add process attribute to the commandButton. I think you are trying to leave some of the inputs blank and still send the request, but the problem is that one of them has the required attribute set to 'true'. Remove required attribute form your inputs and add process="#this" to your commandButton. I hope I am right.
Related
I have this working button in a p:dataTable
<p:commandButton update=":dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
</p:commandButton>
It sets the selectedTx in the model so that I can do stuff with it in the dialog.
Now I want to add a new functionality to my button, so I chose a p:splitButton:
<p:splitButton update=":dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
<p:menuitem value="Do something else" oncomplete="PF('otherDialog').show()" update=":otherDialog" />
</p:splitButton>
When I use the new button, the selectedTx is not set. Only the first button works.
How to update my property in the model when the new button is clicked ?
The solution was to add the setPropertyActionListener inside of the menuitem (as Apostolos suggested), and the datatable needed to be updated (instead of only the dialog):
<p:splitButton update="datatable :dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
<p:menuitem value="Do something else" oncomplete="PF('otherDialog').show()" update="datatable :otherDialog">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
</p:menuitem>
</p:splitButton>
I have the below datagrid which displays a list of student names as link.
<h:form id="gsform">
<p:dataGrid var="stuvar" rendered="#{gradeSheetController.listStudent != null}"
value="#{gradeSheetController.listStudent}" columns="5" layout="grid">
<p:commandLink actionListener="#{gradeSheetController.readStudentGradeSheet}"
update=":gsform:gscont, :gsform:buttoncont">
<h:outputText id="stname" style="font-size:16px" value="#{stuvar.studentFirstName}" />
<f:param name="selstudent" value="#{stuvar.studentSeq}" />
</p:commandLink>
</p:dataGrid>
I also have the below blockUI to freeze the screen until backend processing is done, currently used for a Save button.
<p:blockUI block=":entirePageBody" trigger="savebutton">
<h:panelGrid id="blockContent" columns="2">
<h:graphicImage library="images" name="loading.gif" style="margin-right:12px; vertical-align:middle;" />
<h:outputText value="Please wait, data is being processed..." style="white-space:nowrap;" />
</h:panelGrid>
</p:blockUI>
Now, I would also like to trigger the blockUI when the Student name link is clicked. Obviously, since the number of students will be dynamic and being within the datagrid, the code generated includes other aspects to the id like id="gsform:j_idt168:1:stname", id="gsform:j_idt168:2:stname" and so on.
Have no clue how to trigger the blockUI on click of the Student name link within the datagrid, please suggest.
Triggering/Hiding the blockUI from within dataGrid using onclick/oncomplete
<p:dataGrid var="stuvar" rendered="#{gsExamController.listStudent != null}"
value="#{gsExamController.listStudent}" columns="5" layout="grid">
<p:commandLink actionListener="#{gsExamController.readStudentGradeSheet}"
onclick="PF('bui').show()"
oncomplete="PF('bui').hide()"
update=":gsform:gscont, :gsform:remarkcont, :gsform:buttoncont">
<h:outputText style="font-size:16px" value="#{stuvar.studentFirstName}" />
<f:param name="selstudent" value="#{stuvar.studentSeq}" />
</p:commandLink>
</p:dataGrid>
<p:blockUI block=":entirePageBody" trigger="savebutton" widgetVar="bui">
<h:panelGrid id="blockContent" columns="2">
<h:graphicImage library="images" name="loading.gif" style="margin-right:12px; vertical-align:middle;" />
<h:outputText value="Please wait, data is being processed..." style="white-space:nowrap;" />
</h:panelGrid>
</p:blockUI>
A simple solution to your problem is to use Primefaces' selectors.
For example:
<p:commandLink value="Click me." styleClass="blockMeWhenClicked" />
<p:blockUI block=":ElementToBeBlocked" trigger="#(.blockMeWhenClicked)" />
<p:overlayPanel appendToBody="true"
id="panel_l#{level.name.hashCode()}
f{filterTypeConfiguration.filterType.name.hashCode()}"
for="conrolForm_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}:
button_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}"
dynamic="true" >
...
and in overlayPanel I have:
<p:inputText value="#{filterTypeConfiguration.textToSearch}">
<p:ajax id="ajaxFilterSearch" event="keyup" update="overlayForm_l
#{level.name.hashCode()} f#{filterTypeConfiguration.filterType.name.hashCode()}
:select_l#{level.name.hashCode()}
f#{filterTypeConfiguration.filterType.name.hashCode()}"
</p:inputText>
I need clean data in inputText when overlayPanel is opening or closing.
I didn't use p:overlayPanel yet but I am able to trigger p:dialog diaglodReturn event like, I think it should be similar like this
<p:ajax event="dialogReturn" update="#form" listener="#{backing.refreshPage}" />
Or
Example from primefaces showcase, How about add action attribute for button?
<p:commandButton id="imageBtn" value="Basic" type="button" action="#{backing.refresh}" />
<p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
<p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
</p:overlayPanel>
I need help disabling this link click without using javascript. So this is a on jsf page where the beans would set a variable to false then the cancel should not be pressable.
<p:column style="width:14%; text-align: center;">
<f:facet name="header">
<b><h:outputText value="Action" /> </b>
</f:facet>
<a href="cancel.xhtml?id=#{requestClass.requestID}">
<h:outputText value="Cancel" />
</a>
</p:column>
Thanks in advance!
Update:
<p:column style="width:14%; text-align: center;">
<f:facet name="header">
<b><h:outputText value="Action" /> </b>
</f:facet>
<h:link disabled="#{requestBean.cancelledStatus}"
outcome="cancel.xhtml?id=#{requestClass.requestID}" value="Cancel">
<f:param name="id" value="#{requestClass.requestID}" />
</h:link>
</p:column>
that didn't actually disable the button when page is loaded even though status of request is cancelled
Update 2:
this error showing when updated to following:
<h:commandButton value="Cancel" action="cancel.xhtml?id=#{requestClass.requestID}"
disabled="#{requestBean.cancelledStatus}">
<f:param name="id" value="#{requestClass.requestID}" />
</h:commandButton>
it says:
/pending.xhtml #86,150 action="cancel.xhtml?id=#{requestClass.requestID}" Not a Valid
Method Expression: cancel.xhtml?id=#{requestClass.requestID}
Instead of using normal HTML tag <a>, you should use JSF's <h:link>. This tag has the attribute disable that can be used to disable the link. In you case, it should look like this:
<h:link disable="#{requestClass.disableCancelLink}" outcome="cancel" value="Cancel">
<f:param name="id" value="#{requestClass.requestID}" />
</h:link>
I've got a login form that looks something like this, using RichFaces and Seam:
<h:form id="loginForm">
<h:outputLabel value="Username" />
<h:inputText value="#{identity.credentials.username}" />
<h:outputLabel value="Password" />
<h:inputText value="#{identity.credentials.password}" />
<h:commandLink action="#{identity.login()}" value="Login" />
</h:form>
I'd like to be able to allow the user to hit 'enter' and automatically submit the form to login. I've tried using Richfaces' <rich:hotKey /> feature, but I think I'm doing something wrong. The code I've put in looks like this:
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()" />
However, when I hit enter inside the form, nothing happens. Any idea what I'm doing wrong here?
I think you need to use selector property. Something like,
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()"
selector="#loginForm"/>
Also, instead of submitting the form, you should click submit button. Something like,
<rich:hotKey key="return"
handler="#{rich:element('loginButton')}.click()"
selector="#loginForm"/>
Try the following code. I hope you can get some idea..
<body>
<h:form id="loginForm">
<h:outputLabel value="Username : " />
<h:inputText id="userNameId" value="#{Login.username}" />
<h:outputLabel value="Password : " />
<h:inputText id="passwordId" value="#{Login.password}" />
<a4j:commandButton id="loginButton" action="#{Login.loginButton}" value="Login" focus="button"/>
<rich:hotKey key="return"
selector="#userNameId"
handler="#{rich:element('loginForm:loginButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
<rich:hotKey key="return"
selector="#passwordId"
handler="#{rich:element('loginForm:loginButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
</h:form>
</body>
For all those still struggling with this issue, I've finally gotten something that works. My code now looks like this:
<h:form id="loginForm">
<h:outputLabel value="Username" />
<h:inputText value="#{identity.credentials.username}" />
<h:outputLabel value="Password" />
<h:inputText value="#{identity.credentials.password}" />
<h:commandLink action="#{identity.login()}" value="Login" />
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()"
selector="#loginForm"/>
</h:form>
You can also use a more specific selector so that an enter press only submits the form when the focus is on one of the form fields. Either way, this FINALLY solved my problem.