I am designing a page technology using jsf 2.0 and primefaces. In my page I insert a prime faces calendar. When the user click on calendar to change the default date, a warning message shown which is a dialog box containing two command button. Now what I am trying to do is when the user click on cancel command button, the date should be changed back to the default date which was populated from the first time page when the page loaded. I wrote a java script but its not working.
<label>Date<label>
<p:calendar readonlyInput="true" widgetVar="calDate" yearRange="c-20:c+20" navigator="true" id="b1incomeeffectfrom#{incmStatus.index}" value="#{userDate.effectiveFrom}" pattern="dd/mm/yyyy">
<p:ajax event="dateSelect" oncomplete="checkForDefault(this);" global="false"/>
</p:calendar>
<p:dialog rendered="#{user.Lock}" widgetVar="dlg1" header="Warning" modal="true">
<h:panelGroup layout="block" styleClass="modal-dialog">
<h:panelGroup layout="block" styleClass="modal-content">
<h:panelGroup layout="block" styleClass="modal-body">
<div class="form-horizontal">
<h:panelGroup layout="block" styleClass="form-group">
<h:outputLabel styleClass="col-xs-8 control-label">Are you sure want to change?</h:outputLabel>
</h:panelGroup>
</div>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="modal-footer">
<p:commandButton value="Ok" type="button" styleClass="btn btn-primary" onclick="PF('dlg1').hide();PF('dlg2').show();" />
<p:commandButton value="Cancel" type="button" styleClass="btn btn-primary" onclick="resetDate();" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:dialog>
javascript
function resetDate(){
PF('dlg1').hide();
calDate.setDate(null);
}
Your calendar value is coming from your backing bean (userDate.effectiveFrom). You will have to change the value there to take effect
<p:commandButton value="Cancel" type="button" styleClass="btn btn-primary"
onsuccess="PF('dlg1').hide()" action="#{userDate.resetDate()}" update="calDate" />
class UserDate{
[..]
public void resetDate(){
this.effectiveFrom = initialDate;
}
[..]
}
Related
I’m working on a web-app that displays list of objects, each object has its own modal when clicked inside the modal there are two dropdown menus and a button that is supposed to call a method add in a bean, to perform an action and add the selected object while taking three values, selected object, selected two items from the two drop downs and spinner’s value.
<ui:repeat value="#{ViewTeacher.teacherList}" var="teacher"
varStatus="status">
<h:panelGroup layout="block" styleClass="name">
<p>#{teacher.name}</p>
</h:panelGroup>
<br />
<br />
<a onclick="viewModal(#{status.index})" class="btn btn-success">view</a>
<h:panelGroup id="modal" layout="block" class="modal"
style="max-width: 44em;" tabindex="1">
<h:panelGroup class="modal-content" layout="block">
<span class="close" onclick="modClose()">×</span>
<h:outputText styleClass="description" value="#{teacher.name}" />
<br />
<br />
<br />
students
<h:selectOneMenu value="ok" class="form-control">
<f:selectItems value="#{teacher.students}" var="s"
itemValue="#{s.id}" itemLabel="#{s.name}" />
</h:selectOneMenu>
classes
<h:selectOneMenu value="ok" class="form-control">
<f:selectItems value="#{teacher.classes}" var="c"
itemValue="#{c.id}" itemLabel="#{c.name}" />
</h:selectOneMenu>
<br />
<h:panelGroup layout="block" styleClass="form-group">
<p:spinner min="1" max="10" />
</h:panelGroup>
<h:commandButton id="submitButton" styleClass="btn btn-success" value="ADD">
<!—-this is the button that is supposed to take the values
</h:commandButton>
<a onclick="modClose()" class="btn btn-success">CANCEL</a>
</h:panelGroup>
</h:panelGroup>
</ui:repeat>
I tried :
<f:param name="name1" value="China" />
But the fact that param’s name will get repeated, will make it the same all the time and might be set to the latest object retrieved,
Any recommendation?
UPDATE:
<p:commandLink styleClass="btn btn-success" process="#this"
onclick="viewModal(#{status.index});">
<h:outputText value="ADD" />
<f:setPropertyActionListener
value="#{teacher.id}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
Made this change to pass the teacher's id but it's still null in the bean
First of all, having a separate modal for each object isn't a good idea. You can achieve (what you are trying) by:
1). Adding a property (with its getter and setter) in bean for selected object.
2). Place single modal (<p:dialog with id="modal" and widgetVar="modal" attributes) outside ui:repeat to display data from selected object.
3). Set selected object on clicking view link, update and display modal, using:
<p:commandLink styleClass="btn btn-success" process="#this" update="modal"
onclick="PF('modal').show();">
<h:outputText value="View" />
<f:setPropertyActionListener
value="#{teacher}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
Here, f:setPropertyActionListener will be setting your selected modal in bean and thus it will become available in your action listener.
Update: Change the code as following:
<ui:repeat value="#{ViewTeacher.teacherList}" var="teacher" varStatus="status">
<h:panelGroup layout="block" styleClass="name">
<p>#{teacher.name}</p>
</h:panelGroup>
<p:commandLink styleClass="btn btn-success" process="#this" update="modal"
oncomplete="PF('modal').show();">
<h:outputText value="view" />
<f:setPropertyActionListener
value="#{teacher}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
</ui:repeat>
<p:dialog id="modal" widgetVar="modal" header="Edit Teacher" modal="true"
showEffect="fade" hideEffect="fade" resizable="false" closeOnEscape="true"
styleClass="teachers-dialog">
<h:outputText styleClass="description" value="#{ViewTeacher.selectedTeacher.name}" />
<br />
<br />
<br />
students
<h:selectOneMenu value="#{ViewTeacher.selectedStudentId}" class="form-control">
<f:selectItems value="#{ViewTeacher.selectedTeacher.students}"
var="s" itemValue="#{s.id}" itemLabel="#{s.name}" />
</h:selectOneMenu>
classes
<h:selectOneMenu value="#{ViewTeacher.selectedClassId}" class="form-control">
<f:selectItems value="#{ViewTeacher.selectedTeacher.classes}"
var="c" itemValue="#{c.id}" itemLabel="#{c.name}" />
</h:selectOneMenu>
<br />
<h:panelGroup layout="block" styleClass="form-group">
<p:spinner value="#{ViewTeacher.spinnerValue}" min="1" max="10" />
</h:panelGroup>
<h:commandButton id="submitButton" styleClass="btn btn-success" value="ADD">
</h:commandButton>
</p:dialog>
Where selectedTeacher, selectedStudentId, selectedClassId, spinnerValue are properties from your ViewTeacher bean.
Hello I'm trying to solve this problem. Hope you can help me.
I have a question form with optionals question (textfields, checkbox, radiobuttons). I'm trying to open a confirm dialog ("There are some question not answered, are you sure you want to continue? YES/NO") just if there are question unfilled. I can OPEN de dialog to ask for confirmation. But I cant validate if the dialog has to be displayed or it have to be skipped.
<h:form>
<div class="col-xs-12 ctg-home-button center">
<p:commandButton
id="cancel-button"
actionListener="#{answerSurveyView.restart}"
immediate="true"
styleClass="btn btn-default"
title="#{propertiesBean.getProperty('answer.cancel')}"
value="#{propertiesBean.getProperty('answer.cancel')}"
/>
<h:outputText value=" " />
<p:commandButton
id="answer-button"
action="#{answerSurveyView.saveAnswers}"
styleClass="btn btn-default"
title="#{propertiesBean.getProperty('answer.send')}"
update="answer-form"
value="#{propertiesBean.getProperty('answer.send')}"
>
<p:confirm header="Confirmation" message="#{propertiesBean.getProperty('answer.survey-confirmation')}" icon="ui-icon-alert" />
</p:commandButton>
</div>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="#{propertiesBean.getProperty('answer.send')}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="#{propertiesBean.getProperty('answer.close')}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</h:form>
Use the rendered attribute of your confirmDialog to indicate whether you want render it or not. Set to the rendered attribute a value returned from your view, indicating whether there are unasnwered questions or not.
Reload your confirmDialog each time the user asnwers a question by using an ajax on event, calling a method on your view to recalculate the unansweredQuestions attribute; and the update attribute with your confirmDialog id as value, so you can set rendered to false once the last question is ansewered.
For instance, if you were using a dropdown to give options for the answer, the code of the page might look like this:
<div class="col-xs-12 ctg-home-button center">
<p:commandButton ....
.....
</div>
<p:selectOneMenu value="#{answerSurveyView.firstQuestionAnswer}">
<p:ajax listener="#{dropdownView.onAnswerSelect}" update="myConfirm" />
<f:selectItem itemLabel="Select option" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{answerSurveyView.firstQuestionAnswerOptions}" />
</p:selectOneMenu>
<p:confirmDialog id='myConfirm' rendered="#{answerSurveyView.unansweredQuestions}" global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="#{propertiesBean.getProperty('answer.send')}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="#{propertiesBean.getProperty('answer.close')}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
And the code in your view:
// declare unansweredQuestions attribute and set it to false
private boolean unansweredQuestions = false;
// unansweredQuestions getter
public boolean getUnansweredQuestions() {
return unansweredQuestions;
}
// call this method every time a question is answered
// to update the unansweredQuestions value
public void onAnswerSelect() {
unansweredQuestions = foo(); //method returns true if there are questions left and false if not.
}
I'm trying to show an updated value in confirm dialog message but I keep getting the old value as in this scenario
<h:form>
<p:inputText value="#{bean.object.amount}"/>
<p:commandButton value="CALCULATE" update="cal" actionListener="#{bean.calculate()}"/>
<h:panelGroup id="cal">
<h:outputText value="#{bean.object.amount}"/>
<p:commandButton value="SUBMIT" actionListener="#{bean.submit()}">
<p:confirm header="Confirmation" message="Amount is : #{bean.object.amount} ?"/>
</p:commandButton>
<p:confirmDialog global="true">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</h:panelgGroup/>
</h:form>
Bean code:
#ManagedBean(name="bean")
#ViewScoped
public class Bean implements Serializable {
private SomeClass object;
#PostConstruct
public void init(){
this.object = new SomeClass();
}
public void calculate(){
//do some colculation (not related to amount field in object)
}
public void submit(){
//submit to database
}
//getter setter
}
When I enter a value in amount, lets say 50. and update the cal component I get the updated amount in the outputtext "50". However, in the confirm button message I get amount as 0 instead 50. How can I show the updated value in the confirm message?
PS:
Primefaces-4.0
Take a look at the user guide of primefaces in the confirm dialog section, in the Non-Global mode the document mentioned:
Message facet is
useful if you need to place custom content instead of simple text.
While in the Global mode, I can't find similar sentences like that, and I've tried using the facet in Global mode and it doesn't work.So,
Do you really use this confirm dialog multiple times?
If not:
I suggest you take away the global parameter and change your code like this:
<h:form>
<p:inputText value="#{bean.object.amount}"/>
<p:commandButton value="CALCULATE" update="cal" actionListener="#{bean.calculate()}"/>
<h:panelGroup id="cal">
<h:outputText value="#{bean.object.amount}"/>
<p:commandButton value="SUBMIT" actionListener="#{bean.submit()}" oncomplete="PF('confirmDlg').show()"/>
<p:confirmDialog header="Confirmation" widgetVar="confirmDlg">
<f:facet name="message">
<h:outputText value='Amount is : #{bean.object.amount} ?'/>
</f:facet>
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</h:panelGroup>
</h:form>
.
If so:
(You do use the confirm dialog multiple times and tired of writing several dialogs with same form but different message.)
I suggest you write a dialog on your own,and you can also change the message in the dialog from backing bean like what you did:
<h:form id="myForm">
<p:inputText value="#{bean.object.amount}"/>
<p:commandButton value="CALCULATE" update="cal" actionListener="#{bean.calculate()}"/>
<h:panelGroup id="cal">
<h:outputText value="#{bean.object.amount}"/>
<ui:param name="message" value="Amount is :#{bean.object.amount}?" />
<p:commandButton value="SUBMIT" actionListener="#{bean.setMessage(message)}" action="#{bean.submit()}" update="myForm:myDialog" oncomplete="PF('myDlg').show()"/>
</h:panelGroup>
<p:dialog id='myDialog' widgetVar="myDlg" header="Confirmation" modal="true" resizable="false">
<h:panelGrid columns="3">
<h:panelGroup styleClass="ui-icon ui-icon-alert" style="float:right"/>
<h:outputText value="#{bean.message}"/>
<h:outputText/>
<h:outputText/>
<p:commandButton value="Yes" type="button" icon="ui-icon-check" oncomplete="PF('myDlg').hide()"/>
<p:commandButton value="No" type="button" icon="ui-icon-close" onclick="PF('myDlg').hide()"/>
</h:panelGrid>
</p:dialog>
</h:form>
p:confirm does not implement state saving, thus it loses its attributes' values after the first JSF lifecycle. It also evaluates EL only once at view build time.
I posted the solution in this answer.
Action listener that calls function vcardController.renderModify doesn't fire (in the function renderModify I set the variable renderHiddenEdit to true) and the panel in editCardForm doesn't render. Somebody can help me?
<h:form id="editCardForm">
<p:panel id="editCard" style="">
<p:panel rendered="#{vcardController.renderHiddenEdit}" >
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<h:graphicImage alt="" style="width: 3em;" class="imagesearch" url="#{resource['img:user.svg']}"/>
</p:panel>
</p:panel>
</h:form>
<h:form id="viewCardForm">
<p:panel id="viewCard" style="">
<p:panel rendered="#{vcardController.renderHidden}" >
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<p:commandButton
id="testmodifica"
class="mod nocorner modifycard"
value="modify"
update=":editCardForm"
actionListener="#{vcardController.renderModify}" />
</p:panel>
</p:panel>
</h:form>
<h:form id="formReqEdit" class="formReqEdit" style="display: none;">
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<p:commandButton
id="requestForm"
style="display: none;"
update=":viewCardForm"
oncomplete="contactsDOMAction.showCard(xhr, status, args)"
actionListener="#{vcardController.activateModifyCard}" />
</h:form>
If you want render "editCardForm" you must put "editCardForm" in update parameter in command button
Good practice is add "process". Then you are sure what data from components will be send to bean, in your case process="#this" if you want only call action listener.
Rafa Hernández says right, how you want press button if it has display:none?
I have a little problem with the rendered attribute. I want to use it for login, if someone connects for the first time on my website, he can log in, but when he's logged, he can't see the form. But when the page is loaded, I can't hide the form...
Maybe it would be easier with my code.
HTML
<h:panelGroup id="sidebar" layout="block">
<h:panelGroup id="sbox1" layout="block">
<h:panelGroup class="title" layout="block">
<h2> Espace Membre </h2>
</h:panelGroup>
<ul class="style2">
<h:form rendered="#{!membreCtrl.estConnecte}">
Connection : <h:outputText value="#{membreCtrl.estConnecte}"></h:outputText>
Login : <h:inputText id="login" value="#{membreCtrl.login}" /> <br/>
Password : <h:inputSecret id="mdp" value="#{membreCtrl.mdp}" /> <br/>
<h:commandButton action="#{membreCtrl.identifier()}" value="Se connecter" />
</h:form>
</ul>
</h:panelGroup>
Bean
public String identifier() {
membreConnecte = membreEJB.connecter(login, mdp);
if (membreConnecte == null) {
return "FAILURE";
}
estConnecte = true;
return "SUCCESS";
}
If I put the right login/password, I get on the index page, but then I would like to hide the <h:form ..that I wrote.
But it doesn't work. When I print the result in the Bean, my boolean "estConnecte" is true, but not when I write it on the HTML code.
Did you update the form after the button's click?
Put a p:outputPanel inside the form, if you are using Primefaces, and then update the form:
<h:form>
<p:outputPanel rendered="#{!membreCtrl.estConnecte}">
Connection : <h:outputText value="#{membreCtrl.estConnecte}"></h:outputText>
Login : <h:inputText id="login" value="#{membreCtrl.login}" /> <br/>
Password : <h:inputSecret id="mdp" value="#{membreCtrl.mdp}" /> <br/>
<p:commandButton action="#{membreCtrl.identifier()}" value="Se connecter" update="#form"/>
<p:outputPanel/>
</h:form>