In primefaces I have a confirm dialogue box and when I confirm the delete button my rows in the database are deleted however the page is not updated. Am I missing something that is not updating the page. My dialogue box is defined as below.
<h:form id="searchForm">
<p:commandButton id="showDialogButton" value="Delete Data" onclick="confirmation.show()"
style="margin:20px" type="button" immediate="true" />
<p:confirmDialog id="confirmDialog" message="Are you sure you want to delete all the data for this submission?"
header="Initiating delete process" severity="alert" widgetVar="confirmation">
<p:commandButton id="confirm" value="Yes Sure" update=":searchForm:rowDataTable" oncomplete="confirmation.hide()"
actionListener="#{myDataBean.deleteData}" immediate="true" ajax="true"/>
<p:commandButton id="decline" value="Not Yet" onclick="confirmation.hide()" type="button" immediate="true"/>
</p:confirmDialog>
In the same form I have defined a datatable
<p:dataTable var="row"
value="#{myDataBean.entries}"
id="rowDataTable" paginator="true"
rows="30"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,20,30"
>
which has a subtable inside it that shows all the data
<p:subTable id="rowSubTable" var="details" value="#{row.data}">
In my bean I have the following action listener. After the action listener is completed it calls the load intial view method to reload the data because of a pre render view event i have defined.
public List<SubmissionRow> entries = new ArrayList<SubmissionRow>();
public void loadInitialView() {
if (!postback) {
List<Submission> data = loadData();
//sort data and build entries list
}
}
#Transactional
public void deleteData(ActionEvent actionEvent) {
submission.deleteRows(submissionBean.getSubmission());
entries.clear();
postback = false;
}
As there was only the table visible on my page I just reloaded the page from the action listener using the external context. This way the datatable got updated.
Related
I have a data table displying some application parameters having 3 columns:
name (outputext),
value (p:cellEditor) and
edit (p:rowEditor used)
On clicking edit button in any row value field converts into input field and is having validator attached. After changing and accepting( clicking check icon) values an 'update button' is provided at the bottom of page to save all changes.
My problem is if a validation error comes and we press 'update button' then call goes to save function in managed bean with old value. So to stop this I want to disable 'update button' when any row is having edit mode opened. Can I check the mode of all cell editors in column 2 , so I will use that in disabled attribute of update button.
Please do suggest any other better way is also possible ?
Using a jsf 2.1 and primefaces 3.5
XHTML snippet
<!-- Body panel for display of individual configuration mode -->
<p:panel id="mainConfigPanel" >
<!-- status message section -->
<p:messages id="msg" autoUpdate="true" closable="true"/>
<!-- Parameter configuration mode -->
<p:panel
rendered="#{configMBean.configUtility.configParamModeOn}"
styleClass="panelNoBorder">
<p:dataTable id="configParamTable" var="configParamVar"
value="#{configMBean.configParamList}" editable="true">
<p:ajax event="rowEdit" listener="#{configMBean.onRowEdit}" update=":mainForm:msg" />
<p:ajax event="rowEditCancel" listener="#{configMBean.onRowCancel}" update=":mainForm:msg" />
<p:column headerText="Parameter Name" sortBy="#{configParamVar.paramConfigName}">
<h:outputText id="paramNameId" value="#{configParamVar.paramConfigName}" />
</p:column>
<p:column headerText="Param Value" sortBy="#{configParamVar.paramConfigValue}">
<p:cellEditor>
<f:facet name="output" > <h:outputText value="#{configParamVar.paramConfigValue}" /> </f:facet>
<f:facet name="input">
<p:inputText id="paramValueId" value="#{configParamVar.paramConfigValue}" required="true"
validator="#{configMBean.validateParam}" >
<f:validateLength maximum="2000" />
<f:attribute name="input" value="#{configParamVar}" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Edit" style="text-align:center;vertical-align:top;width:20px">
<p:rowEditor />
</p:column>
</p:dataTable>
<h:panelGrid columns="2" >
<p:commandButton value="Update Parameters" actionListener="#{configMBean.saveParamUpdate}" update=":mainForm" />
<p:commandButton value="Cancel" actionListener="#{configMBean.cancelParamUpdate}" immediate="true" update=":mainForm">
</p:commandButton>
</h:panelGrid>
</p:panel>
<!-- End of Parameter configuration mode panel -->
</p:panel>
<!-- End of body panel for individual configuration mode -->
</p:panelGrid>
<!-- end of main panel -->
Functions in Managed Bean
public void onRowEdit(RowEditEvent event) {
System.out.println(" In Row Edit");
}
public void onRowCancel(RowEditEvent event) {
System.out.println("In Row Canel of Parameter Config");
}
public void validateParam(FacesContext facesContext, UIComponent component,
Object value) throws ValidatorException, Exception {
if (value != null) {
//Getting parameter Name and Value for validation
String paramName = ((RowEntity) component.getAttributes().get("input")).getParamConfigName();
String paramValue = (String) value;
FacesMessage msg = null;
//Validation Cases
if (paramName.equalsIgnoreCase(ResourceBundle.getMsg("Param_Enable_FTP"))) {
if (!paramValue.equalsIgnoreCase("true") || !paramValue.equalsIgnoreCase("false")) {
msg = new FacesMessage(FacesMessage.SEVERITY_WARN, ResourceBundle.getMsg("Param_True_False_Validation")+ paramName, "");
throw new ValidatorException(msg);
}
} else if (paramName.equalsIgnoreCase(ResourceBundle.getMsg("Param_Contingency_Reserve"))) {
if (!Pattern.matches("-?\\d*\\.?\\d*", paramValue)) {
msg = new FacesMessage(FacesMessage.SEVERITY_WARN, ResourceBundle.getMsg("Param_Number_Validation") + paramName, "");
throw new ValidatorException(msg);
}
}// end if else if
}
}
From the docs: There is an Ajax Behavior Event for rowEdit
rowEdit | org.primefaces.event.RowEditEvent | When a row is edited.
You could disable the update button when the RowEditEvent got fired and release the button after the row editing was canceled or saved.
I Hope I got your question right and this helps.
I am new to JSF and primefaces.I want to updated data grid when file upload completes. i tired update attribute but it did not update component. i could see updated data grid only after reloading the page.
<h:form>
<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="false"
multiple="true" update=":content:images" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
<h:form id="content">
<p:dataGrid var="image" value="#{dataGridView.images}" columns="2"
rows="12" paginator="true" id="images" rendered="#{not empty dataGridView.images}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16" >
<f:facet name="header">
Your Album
</f:facet>
<p:panel header="#{image.imageName}" style="text-align:center;">
<h:panelGrid columns="1" style="width:100%">
<image src="#{image.imageLocation}" style="height: 10%;width:30%;"/>
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
handleFileUpload method
public void handleFileUpload(FileUploadEvent event) {
currentSession.setAttribute("username","sravanyahoo#gmail.com");
String userName = (String) currentSession.getAttribute("username");
String realPath = ctx.getRealPath("/");
String contextPath = ctx.getContextPath();
try{
UploadedFile uploadedFile = event.getFile();
String imageLocation = ImageUtils.uploadFile(realPath,contextPath,uploadedFile,userName);
}
catch(Exception e)
{
}
helper.updateImageList(userName,dataGridView);
FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
updateImageList method
public void updateImageList(String userName,DataGridView view){
view.setImages(getImagesFromDB(userName));
}
Most likely your dataGrid is not rendered before the upload and update (rendered="#{not empty dataGridView.images}". If it is indeed not, you are running into one of jsf bascis that you cannot update a component if it is not rendered.
In my main page, I have a tool bar which contains some command buttons and links. Also I have a datatable that shows some vehicles data. The command buttons defined in the tool bar do not work properly. When I press the button, the action method is executed after 30-40 seconds later. What should be the cause of this problem?
Here is the tool bar:
<p:toolbar height="30" switchType="client">
<p:toolbarGroup align="left">
<p:commandButton value="#{general.refresh}" icon="ui-icon-refresh" style="font-size:11px;"
action="#{mainPage.refreshPage}" update="vehicleTable" ajax="false"/>
<p:commandButton value="#{general.service}" icon="ui-icon-wrench" style="font-size:11px;"/>
<p:commandButton value="#{general.customerPointsShort}" icon="ui-icon-pin-s" style="font-size:11px;"
title="#{general.customerPoints}"/>
<p:commandButton value="#{general.filtering}" icon="ui-icon-search" style="font-size:11px;"/>
<p:commandButton value="#{general.maximizeMap}" icon="ui-icon-arrow-4-diag" style="font-size:11px;"/>
<p:commandButton title="#{general.showOnTeleAtlas}" icon="teleAtlasLogo" style="font-size:11px;"/>
<p:commandButton title="#{general.showOnGoogleMap}" icon="googleLogo" style="font-size:11px;"/>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<h:outputText id="totalVhclId" value="#{general.totalVhclNumber} : #{mainPage.totalVhclNumber}" styleClass="coloredText1"/>
<p:separator/>
<h:outputText id="workingVhclId" value="#{general.totalWorkingVhclNumber} : #{mainPage.totalWorkingVhclNumber}" styleClass="coloredText1"/>
<p:separator/>
<h:outputText id="activeVhclId" value="#{general.totalActiveVhclNumber} : #{mainPage.totalActiveVhclNumber}" styleClass="coloredText1"/>
<p:separator/>
<h:outputText id="passiveVhclId" value="#{general.totalPassiveVhclNumber} : #{mainPage.totalPassiveVhclNumber}" styleClass="coloredText1"/>
</p:toolbarGroup>
</p:toolbar>
"refreshPage" method:
public void refreshPage(){
selectedDate = "";
totalMWD = "";
totalDWD = "";
errorMessages = "";
selectedVehicle = null;
if(checked.size() > 0)
checked.clear();
getVehicleList();
}
Sometimes it occurs when the server is in debug mode. Check whether you are not running the app in debug mode.
In my application I have a <p:dataTable> with pagination using lazy datamodel.
I have a requirement when I click another page button from a page, a confirmation popup should generate, if I click yes then I can go to another page and if I click 'no' then I can't go to another page and I will stay in that current page.
.xhtml code are given below:
<h:form id="userListForm">
<p:dataTable var="user" id="userTable" value="#{userListController.userDataModel}" lazy="true" paginator="true" rows="25" paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="25,50,100" widgetVar="userDataTable" styleClass="userTable" selectionMode="single" >
<p:ajax event="page" />
<p:column id="nameColumn" headerText="#{adbBundle['name']}"
sortBy="#{user.fullName}" filterBy="#{user.fullName}" styleClass="userName">
<h:outputText value="#{user.fullName}" />
</p:column>
<!-- other columns -->
<:/p:dataTable>
</h:form>
I am using primefaces 3.4, jsf 2.0.
Inspired from RongNK's answers, you may simply do this,
add this script block :
<script type="text/javascript">
function onPageStart() {
return confirm('Are you sure?');
}
</script>
and put this in your datatable :
<p:ajax event="page" onstart="return onPageStart()" />
You could also inline it in the <p:ajax this way :
<p:ajax event="page" onstart="return confirm('Are you sure?');" />
Tested and working with PrimeFaces 3.4.2
Did you try:
<p:ajax event="page" onstart="return tests()"/>
<script type="text/javascript">
var vpage = 1;
var prevvalue = vpage;
function tests(){
if(confirm('Are you sure?')){
var p = userDataTable.getPaginator();
vpage = p.getCurrentPage();
prevvalue = vpage;
return true;}
else {
var p = userDataTable.getPaginator();
p.setPage(prevvalue,true);
return false;}
}
</script>
I've run into and issue with IE not allowing me to hit the enter key to submit a form. I found a partial solution (http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter) but my dialog window closes. My validations are run and the error messages are displayed. How would I keep my dialog open?
<p:dialog id="sgupdlg" header="#{bundle['signUp.HEADER']}" widgetVar="signUpDlg"
modal="true" styleClass="dialog dialog1" draggable="false"
resizable="false" showEffect="fade" hideEffect="fade" position="top">
<h:form id="signUpFrm" binding="#{signUpDetail.signUpFrm}">
<p:growl id="growl" showDetail="true" showSummary="false" life="3000" errorIcon="/images/Validation-Error.png" infoIcon="/images/Validation-Success.png"/>
<p:inputText value="#{signUpDetailBean.firstName}" name="nameInput" required="true" requiredMessage="First Name is Required"/>
<p:inputText value="#{signUpDetailBean.lastName}" required="true" requiredMessage="Last Name is Required"/>
<p:commandButton styleClass="form-btn2"
value="#{bundle['signUp.button.LABEL']}" actionListener="#{signUpDetail.signUp}" onclick="trackingSignUpOverlaySave()"
oncomplete="handleSignUpRequest(xhr, status, args)" update="growl"/>
<p:commandButton type="reset" styleClass="close" />
</h:form>
</p:dialog>
<script type="text/javascript">
$ = jQuery
$(function(){
$('input').keydown(function(e){
if (e.keyCode == 13) {
$('#signUpFrm').submit();
return false;
}
});
});
</script>
function closeWhenValidationSuccesful(dialog, xhr, status, args) {
if (!args.validationFailed) {
dialog.hide();
}
}
<p:commandButton value="Save" action="doSomething" update=":formName:panelContainingValidatedElements"
oncomplete="closeWhenValidationSuccesful(dialogWidgetVar, xhr, status, args)" />
I use the following to keep a dialog open and display validation errors. You will need to move your inputs into a panelGrid so that it can be target by the update attribute.
A simple tag would solve it.
oncomplete="if (args.validationFailed){} else {Professor.show(),Student.hide();}"
you suppose to apply this on Professor widget var