When I hit the edit button I need a dialog to show corresponding xhtml page. I mean when I press edit, editStudent.xhtml should appear in the dialog box. the xhtml page works fine, but i need to show it in pop-up not separate xhtml page. I tried to do it but it doesn't work. Here is the code i have written for dialog box when edit button is pressed. as you see i have used p:dialog for pop-up to appear. but when pressing edit button nothing happens and the dialog box does not appear.
studentsList.xhtml:
<h:column>
<f:facet name="header">Update</f:facet>
<h:commandButton action="#{studentBean.editStudentRecord(student.id)}" value="Edit" class="btn btn-primary" onclick="PF('dlg2').show();"/>
</h:column>
<h:column>
<f:facet name="header">Delete</f:facet>
<h:commandButton action="#{studentBean.deleteStudentRecord(student.id)}" value="Delete"
class="btn btn-danger" onclick="if (confirm('Are u sure?') == false)
return false;"/>
</h:column>
</h:dataTable>
<p:dialog header="Update" widgetVar="dlg2" modal="true" height="200" width="600" dir="ltr">
<h:form>
<h:panelGrid columns="4" cellpadding="4">
<h:outputLabel for="name" style="font-weight:bold"/>
<p:inputText name="name" id="Nameid" type="text" value="#{student.name}"
autocomplete="off"/>
<h:outputLabel for="password" style="font-weight:bold"/>
<p:inputText name="password" id="Passid" type="text" value="#{student.password}"
autocomplete="off"/>
<h:outputLabel for="gender" style="font-weight:bold"/>
<p:selectOneRadio value="#{student.gender}"/>
<h:commandButton action="#{studentBean.updateStudentDetails(student)}" value="Update" class="btn btn-primary" onclick="PF('dlg2').hide();"/>
</h:panelGrid>
</h:form>
</p:dialog>
Can somebody tell me what is wrong with the dialog box and why it doesn't appear?
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.
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;
}
[..]
}
My edit page does not display bean values when it's called from a datalist populated by a JDBC search but works just fine if the list is not from the JDBC search.
The delete link works just fine but the edit link just returns the edit page with no populated values in the fields.
My bean is a ViewScoped bean.
The datalist display page:
<h:form rendered="#{not empty usersManagedBean.usersList}" id="form">
<div class="table-responsive">
<h:dataTable value="#{usersManagedBean.userModel}"
var="showUser"
styleClass="table table-striped table-bordered table-hover">
<h:column>
<f:facet name="header">
Username
</f:facet>
<h:outputText value="#{showUser.username}"/>
</h:column>
<h:column>
<f:facet name="header">
First Name
</f:facet>
<h:outputText value="#{showUser.firstname}"/>
</h:column>
<h:column>
<f:facet name="header">
Last Name
</f:facet>
<h:outputText value="#{showUser.lastname}"/>
</h:column>
<h:column>
<f:facet name="header">
Security Level
</f:facet>
<h:outputText value="#{showUser.groupname}"/>
</h:column>
<h:column rendered="false">
<f:facet name="header">
Security Level
</f:facet>
<h:outputText value="#{showUser.id}"/>
</h:column>
<h:column>
<h:commandLink value="Edit"
action="#{usersManagedBean.updateUser()}">
</h:commandLink>
||
<h:commandLink value="Delete"
onclick="if (!confirm('Are you sure, you want to delete #{showUser.username}?')) {
return false;
}
;
return true;
" action="#{usersManagedBean.deleteUser(showUser)}">
</h:commandLink>
</h:column>
</h:dataTable>
<h:link outcome="AddUser.xhtml" value="Add New User"/>
</div>
The edit page:
<h:form>
<div class="form-group">
<label>First Name:</label>
<h:inputText id="firstname" styleClass="form-control" value="#{usersManagedBean.user.firstname}"></h:inputText>
<label>Last Name:</label>
<h:inputText id="lastname" styleClass="form-control" value="#{usersManagedBean.user.lastname}"></h:inputText>
<label>Username:</label>
<h:inputText id="username" styleClass="form-control" value="#{usersManagedBean.user.username}"></h:inputText>
<div class="form-group">
<label>Security Level:</label>
<h:selectOneMenu id="roleSelect" value="#{usersManagedBean.user.groupname}" styleClass="form-control">
<f:selectItem itemLabel="----" itemValue="----"/>
<f:selectItem itemLabel="Administator" itemValue="admin"/>
<f:selectItem itemLabel="User" itemValue="user"/>
</h:selectOneMenu>
</div>
<label>Password:</label>
<h:inputSecret id="password" styleClass="form-control" value="#{usersManagedBean.user.password}" required="true" requiredMessage="Enter Password"/>
<h:message for="password" style="color:red"/>
<label>Confirm Password:</label>
<h:inputSecret id="password2" styleClass="form-control" required="true" requiredMessage="Re-enter Password"/>
<h:message for="password2" style="color:red" />
<o:validateEqual components="password password2" message="Passwords don't match" showMessageFor="password2"/>
</div>
<h:commandButton value="Update" type="submit" styleClass="btn btn-default" action="#{usersManagedBean.saveUser()}"></h:commandButton>
||
<h:commandButton value="Cancel" onclick="history.back(-1);return false" styleClass="btn btn-default"></h:commandButton>
</h:form>
The method that calls the edit page:
public String updateUser(){
user = userModel.getRowData();
return "EditUser.xhtml";
}
No exceptions are thrown at all.
if you use a #ViewScoped bean, jsf will create a new instance of it when you navigate from list page to edit page. you have 3 alternatives i can think of:
use #SessionScoped.
open the edit page via ajax and as a popup panel.
use #ViewScoped, add the user id to the url as a view parameter (ie. EditUser.xhtml?id=123), and load user data from db in edit page instead of list page, on page load. in this scenario, it's best to have different managed beans for list and edit pages.
In the below code when I am defining escape=false for the h:outputtext then the popup dialog window is not working
<h:dataTable value="#{template.htmlContentFiles}" var="regionVo">
<p:column id="column1">
<h:outputText var = "htmlContent" value="#{regionVo.fileContent}" escape="false" rendered="#{regionVo.editable}"/>
<ck:editor id="ckEd" value="#{regionVo.fileContent}" rendered="#{not regionVo.editable}"/>
<div>
<p:commandButton value="Show" type="button" onclick="PF('componentDlg').show();"/>
<p:dialog header="Basic Dialog" widgetVar="componentDlg" minHeight="40">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
</div>
</p:column>
</h:dataTable>
Whereas the popup dialog shows up when I removed the escape=false.
Any help is appreciated.
i am working on login page in which there is 2 input field user name and password and 2 submit button login and forgot password. All these 4 elements are in a form. I have applied validation for null input to user name password. If a user click on login without providing username and password it shows some primefaces message. Forgot password is a popup, which has also two field username and email, same blank alidation is also here. my problem is when i click on login witout providing any input, it popups the forgot password window along with username and password validation error.
Following is my code.
Thanks
Login Page
<h:form >
<p:panel id="panel" >
<p:focus context="panel"/>
<h:panelGrid >
<h:outputLabel for="firstname" value="#{app.username} : " style="font-weight:bold; font-size:12px;">
<h:outputLabel value="*" style="color:red; font-size:12px;"/></h:outputLabel>
<p:inputText id="firstname" required="true" label="Firstname" value="#{userManageBean.user.userName}" size="35" maxlength="10" requiredMessage="User Name is required."/>
<p:message for="firstname" />
<br/>
<h:outputLabel for="surname" value="#{app.paswrd} : " style="font-weight:bold; font-size:12px;">
<h:outputLabel value="*" style="color:red; font-size:12px;"/></h:outputLabel>
<p:inputText id="surname" required="true" label="#{app.paswrd}" value="#{userManageBean.user.password}" type="password" size="35" maxlength="10" requiredMessage="Password is Required" />
<p:message for="surname" />
<h:outputText value="#{userManageBean.message}" style="font-weight:bold; font-size:12px; color:red; "></h:outputText>
</h:panelGrid>
<br/>
<p:commandButton id="SubmitButton1" value="#{app.log_in}" action="#{userManageBean.submitLoginUser}" ajax="false" />
<p:commandButton value="#{app.forgotpwd}" onclick="dlg1.show();" ajax="false" />
</p:panel>
</h:form>
Pop up
<h:form>
<p:dialog header="#{app.forgotpwd}" widgetVar="dlg1" resizable="false" width="300" showEffect="clip" hideEffect="fold" modal="true" visible="#{facesContext.validationFailed}" >
<table>
<tr>
<td><h:outputText value="#{app.username} : "/> <h:outputText value="*" style="color:red; font-size:12px;"/></td>
<td> <p:inputText id="txt" value="#{forgetPwdBean.userID}" required="true" requiredMessage="User Name is Required" />
<p:message for="txt" ></p:message>
<!-- <p:tooltip for="txt" value="#{viewcontrollerBundle.username}" showEffect="fade" hideEffect="fade" /> -->
</td>
</tr>
<tr><td>
<h:outputText value="#{app.emp_id} : "/><h:outputText value="*" style="color:red; font-size:12px;"/></td>
<td> <p:inputText id="txt1" value="#{forgetPwdBean.emailID}" required="true" requiredMessage="Email is Required"/>
<p:message for="txt1"></p:message>
<!-- <p:tooltip for="txt1" value="#{viewcontrollerBundle.mailid}" showEffect="fade" hideEffect="fade" /> -->
</td>
</tr>
<tr><td><p:commandButton value="#{app.submit}" action="#{forgetPwdBean.forgetPassword}" ajax="false"/>
</td></tr>
</table>
</p:dialog>
</h:form>
The following code causes your dialog to popup whenever a validation of your form fails.
<p:dialog ... visible="#{facesContext.validationFailed}">
Edit (Why the dialog isnt shown without above code):
The underlying problem is that your commandButtons are non-ajax, so the page will be completly reloaded and you might only see the dialog for a split second
If you look into the primefaces showcase you can see that the button that use onclick="dlg.show()" use ajax:
<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button"/>