Submit primefaces table after select - ajax

I have a table in Primefaces with a single selection. After the user selects an entry of that table, the whole form should be submitted. I could use a commandbutton to sumbit, but I don't want the user to do this, cause the selection is the last and final step of the form.
<p:dataTable value="#{bean.selectedItems}" var="selItem"
selection="#{bean.selectedItem}"
rowKey="#{selItem.id}"
selectionMode="single"
id="selectedTbl">
<p:ajax event="rowSelect" listener="#{bean.onSelectListener}"/>
<p:column selectionMode="single"/>
...
<p:dataTable/>
The ajax listener as well as the set method of the selectedItem is called, but how do I trigger a submit from ajax?
Update: More detailed example
Case: Only one person per group can be enabled. The user has to decide based on many information in a table. And sometimes the user has to do this very often.
<h:form>
<p:selectOneMenu value="#{bean.group}" valueChangeListener="#{bean.onGroupChange}">
<f:selectItem itemLabel="Select..." noSelectionOption="true"/>
<f:selectItems value="#{bean.groups}"/>
<p:ajax update="selectedTbl"/>
</p:selectOneMenu>
<p:dataTable value="#{bean.selectedItems}" var="selItem"
selection="#{bean.selectedItem}"
rowKey="#{selItem.id}"
selectionMode="single"
id="selectedTbl">
<p:ajax event="rowSelect" listener="#{bean.onSelectListener}"/>
<p:column selectionMode="single"/>
<p:column headerText="ID">
<h:outputText value="selItem.id"/>
</p:column>
<p:column headerText="Name">
<h:outputText value="selItem.name"/>
</p:column>
<!--Some more Information about the person, based on the the user makes a decision.-->
<p:dataTable/>
<!--only one User per Group can be enabled-->
<p:commandButton value="Enable" action="#{bean.enableSelected}" onclick="submit()"/>
</h:form>
bean:
public void enableSelected(){
manager.modifyPerson(selectItem);
selectedItems.clear();
selectedItem = null;
group = null;
}
public void onSelectListener(SelectEvent event){
selectedItem = (Person) event.getObject();
}
The bean is pretty simple only getter and setter. The onGroupChange Method loads new values for selectItems from the db.
I want to get rid of the commandbutton and move the functionality from enableSelected to onSelectListener. When I move the db-Function to enableSelected it works but the page isn't refreshed.
When I add update="#form" to ajax it doesn't work so I wanted to use submit().

Try to add process="#form" in your ajax.
<p:ajax event="rowSelect" process="#form" listener="#{bean.onSelectListener}"/>

Related

Getting Primefaces datatable row variable via non-ajax button post request

I have a datatable and polling in my Primefaces page. On Datatable on every row there is a commanButton. Because of polling, f:setPropertyActionListener does not works properly on button click. So I set ajax=false at button and trying to get datatable row "var" via a POST request. Is there a way to do that?
<p:poll interval="15"
listener="#{batchOperation.generateImportFTDBatchFileReport}"
update=":batchOperationsForm:growl :batchOperationsForm:batchfilestbl
:batchOperationsForm:dataimporttypeselectiontabview:importFTDbatchfilestbl
:batchOperationsForm:dataimporttypeselectiontabview:importFTDerrorbatchfilestbl
:batchOperationsForm:dataimporttypeselectiontabview:importFTDStatusTxtId"
widgetVar="myPoll" autoStart="true"/>
<p:dataTable id="batchfilestbl" var="batchFile"
value="#{batchOperation.batchFileModel}" paginator="true"
rows="#{batchOperation.batchFileModel.pageSize}"
paginatorPosition="bottom"
sortBy="#{batchOperation.createTime}"
sortOrder="descending"
emptyMessage="#{messages['common.datatable.emptymessage']}"
selectionMode="single"
selection="#{batchOperation.selectedFile}">
<p:column headerText="#{messages['content.batchoperations.datatable.header']}">
<p:commandButton actionListener="#{batchOperation.createBatchFileForDownloadLatestRevision}"
id="excelCreate" disabled="#{disableExcelVar}"
value="#{messages['content.batchoperations.createexcel.button.label']}"
ajax="false">
<f:setPropertyActionListener value="#{batchFile}"
target="#{batchOperation.selectedFile}" />
</p:commandButton>
</p:column>
</p:dataTable>
If you want to send the whole model object as a parameter to a backing bean method, you can send it in using your var for the data table.
<p:dataTable var="myVar">
<p:column>
<p:commandButton actionListener="#{bean.method(myVar)}" />
</p:column>
</p:dataTable>
Alternatively, if you are only interested in the row index, you can send just that using the rowIndexVar value for the data table.
<p:dataTable rowIndexVar="rowIndex">
<p:column>
<p:commandButton actionListener="#{bean.method(rowIndex)}" />
</p:column>
</p:dataTable>
It looks like you are trying to do file download here. You may want to checkout this question.
Instead of using f:setPropertyActionListener, f:attribute solved my problem.
<p:commandButton actionListener="#{batchOperation.createBatchFileForDownloadLatestRevision}"
id="excelCreate" disabled="#{disableExcelVar}"
value="#{messages['content.batchoperations.createexcel.button.label']}"
ajax="false">
<f:attribute name="bf" value="#{batchFile}" />
</p:commandButton>
Method:
public synchronized void createBatchFileForDownloadLatestRevision(ActionEvent event) throws Exception {
selectedFile = (BatchFile) ((CommandButton) event.getSource()).getAttributes().get("bf");
.
.
}

Primefaces two dataTable update and add data from one to another

I have two dataTables in my JSF page they are placed in a dialog that pops up on some action, these dataTables has data from a list in my managed bean, what I am trying to do is when I double click on a row in my first data I want to add it to the second one and I have achieved that but it only occurs when I close the dialog and open it again, I have tried to use ajax update to update my second dataTable on the action but the issue is still occurring and my other issue that I want to HIDE the data from the first dataTable when I move it to the second one without removing it from the list or (at least dont allow the user to move the same item twice) any suggestions please? Here is my dialog and data tables:
<p:dialog modal="true" width="50%" height="50%" widgetVar="test"
id="dialog">
<p:dataTable id="tblAllQuestions" value="#{mbInstructor.fullList}"
var="asEmp" selectionMode="single"
selection="#{mbInstructor.currentExamQuestion}" rowKey="#{asEmp.id}"
rowIndexVar="rowIndex">
<p:ajax event="rowDblselect"
update="#parent:tblAllQuestions2"
process="#this" listener="#{mbInstructor.submitForm()}" />
<p:column headerText="#" width="20">
#{rowIndex+1}
</p:column>
<p:column headerText="#{msg2.get('employee')}" width="200">
#{asEmp.questionTxt}
</p:column>
</p:dataTable>
<p:dataTable id="tblAllQuestions2"
value="#{mbInstructor.formsQuestion}" var="as" selectionMode="single"
selection="#{mbInstructor.currentExamQuestion}" rowKey="#{as.id}"
rowIndexVar="rowIndex">
<p:ajax event="rowDblselect"
update="#parent:pnlfourmData"
process="#this" />
<p:column headerText="#" width="20">
#{rowIndex+1}
</p:column>
<p:column headerText="#{msg2.get('employee')}" width="200">
#{as.question.questionTxt}
</p:column>
</p:dataTable>
<h:outputText value="[no selection made]"
rendered="#{empty mbInstructor.model.target}" />
<p:commandButton id="formSubmit" value="Submit"
actionListener="#{mbInstructor.submitForm()}" style="margin-top:5px" />
</p:dialog>
I have tried to update the whole dialog as well but it disappear when i do the action, so I added the following to my ajax to show it again
oncomplete="PF('test').show()"
but the dialog does not show up when it finish.

How to pass a parameter in p:ajax when we used it with p:inputText?

I need to pass a parameter in my p:ajax method . there is a <p:inputText> and when I finish typing my input Box have to update my p:ajax method. But i am not able to send the parameter in my method.
My jsf page is :
<h:outputText value="#{msg['elicense.contractorFormRenewal.personal.registrationNo']}"/>
<p:inputText id="registrationNo" value="#{renewalContractorBean.registrationNo}" required="false" label="Registration No">
<p:ajaxlistener="#{renewalContractorBean.readLicenseDetailsById(renewalContractorBean.registrationNo)}/>
</p:inputText>
and my method in bean is
public void readLicenseDetailsById(String id) {
FirmOrCompany firmOrCompany = contractorRenewableService.readLicenseDetailsById(id);
this.setLicenseName(firmOrCompany.getLicensePersonName());
this.setClassofLicense(firmOrCompany.getLicenseAppliedFor());
}
There is no <p:ajaxListener>, i don't know if you missed your code or the question.
Considering you made a mistake in the question, your method should work fine, you just forgot to set the event=blur in <p:ajax>, so it get called once you leave the inputTextBox(means that the user already done typing)
<p:inputText id="registrationNo" value="#{renewalContractorBean.registrationNo}" required="false" label="Registration No">
<p:ajax event="blur" listener="#{renewalContractorBean.readLicenseDetailsById()}/>
</p:inputText>
Check that if you want to update another component, based on the changes you made in your bean, you must specify the id of that component in <p:ajax>, <p:ajax event="blur" update"IdOfTheComponent" ....>
Also, you don't have to pass properties which is already in your bean as a parameter, you can just get it in your bean.
Finally, in renewalContractorBean:
public void readLicenseDetailsById()
{
String id = this.registrationNo;
FirmOrCompany firmOrCompany= contractorRenewableService.readLicenseDetailsById(id);
this.setLicenseName(firmOrCompany.getLicensePersonName());
this.setClassofLicense(firmOrCompany.getLicenseAppliedFor());
}
Hi did you tryupdate="tableid" ? When I delete from a list which in p:dataTable, JSF can update this dataTable I hope this will be helpful.
Here is my code to update my p:datatable
<p:dataTable id="tbl" value="#{borrowerBean.borrowers}" var="bor">
<p:column>
<f:facet name="header">
<h:outputLabel>ID: </h:outputLabel>
</f:facet>
<h:outputLabel value="#{bor.id}"/>
</p:column>
.
.
.
<p:commandButton value="Delete" action="#{user.deleteBorrower(bor.id)}" update="tbl"/>
</p:column>
</p:dataTable>

How can I update twice during JSF Ajax event

Given the following code:
<p:column headerText="#{text.article}">
<h:panelGroup>
<p:autoComplete id="relationArticle"
value="#{relation.article}"
completeMethod="#{articleRelationsModel.findArticles}"
queryDelay="#{text.query_delay}"
minQueryLength="#{text.artikkel_min_query_length}"
var="article"
itemLabel="#{article.articleNo} #{article.text1}"
itemValue="#{article}"
converter="#{articleConverter}"
scrollHeight="150"
forceSelection="true"
styleClass="ui-autocomplete-big">
<p:ajax event="itemSelect" update="relationUnit" process="#this"/>
</p:autoComplete>
<p:message for="relationArticle"/>
</h:panelGroup>
</p:column>
<p:column headerText="#{text.unit}" style="width: 80px;">
<h:selectOneMenu id="relationUnit" value="#{relation.unit}" converter="#{articleUnitConverter}">
<f:selectItem itemLabel="<< #{text.search}" noSelectionOption="true" itemDisabled="#{relation.article != null}"/>
<f:selectItems value="#{articleRelationsModel.getUnits(relation)}" var="unit" itemLabel="#{unit.code}" itemValue="#{unit}"/>
<p:ajax event="change" process="#this" update="#this"/>
</h:selectOneMenu>
<p:message for="relationUnit"/>
</p:column>
How can I refresh the "relationUnit" component after the user has selected a value in the "relationArticle" component?
What happens now, is that after the autcompete itemSelect event has fired, the "relationUnit" component gets updated with new content using #{articleRelationsModel.getUnits(relation)}. During this update, the relation object is updated with one of the options from the resulting list. This, however, is not reflected in the "relationUnit" component after the update. But if I manually do another update after this, it gets selected.
How can I achieve the wanted result here?
You can use p:remoteCommand, which is usually used to call the ManagedBean Methods from Javascript.
While it serves the above purpose you can use it to update other components also.
You can call the p:remoteCommand from p:ajax's oncomplete attribute.
<p:autoComplete id="relationArticle" ...>
<p:ajax event="itemSelect" update="relationUnit" onComplete="updateRelationUnit()" process="#this"/>
</p:autoComplete>
<p:remoteCommand name="updateRelationUnit" update="relationUnit" process="#this" />
Now p:ajax will update relationUnit once and then calls the p:remoteCommand which in-turn relationUnit again.
I don't know why you want this strange behavior, but the above strategy and code servers your purpose just fine.

Datatable not refreshing with ajax

I have two calendar controls and one command button. basically i want to give a range of date to pick the data from the database and then when i press the command button the datatable is displayed in the dialog box, the problem is java bean class is working it is loading the exact data which i want, but the datatable is not refreshing with command button click
my code is given;
<h:form id="form" >
<p:calendar value="#{calendarBean.dateFrom}" id="calFrom" pattern="yyyy-mm-dd">
<p:ajax event="dateSelect" listener="#{calendarBean.handleDateSelectFrom}" />
</p:calendar>
<p:calendar value="#{calendarBean.dateTo}" id="calTo" pattern="yyyy-mm-dd">
<p:ajax event="dateSelect" listener="#{calendarBean.handleDateSelectTo}" />
</p:calendar>
<p:commandButton value="Submit" action="#{calendarBean.submit()}" update="fTable" onclick="aDlg.show()">
<f:ajax render=":form:fTable" execute="#form"></f:ajax>
</p:commandButton>
<p:dialog id="aDialog" header="Filter List" widgetVar="aDlg"
modal="true" showEffect="explode"
hideEffect="explode" >
<p:panel id="pnl">
<p:dataTable id="fTable" value="#{calenderBean.list}" var="row" >
<p:column headerText="ID">
<h:outputText value="#{row.ID}"/>
</p:column>
<p:column headerText="Name">
<h:outputText value="#{row.Name}"/>
</p:column>
<p:column headerText="Time">
<h:outputText value="#{row.Time}"/>
</p:column>
<p:column headerText="User">
<h:outputText value="#{row.userName}"/>
</p:column>
</p:dataTable>
</p:panel>
</p:dialog>
</h:form>
kindly guide me regarding this issue
First thing to do, is remove the f:ajax, it's not working good with Primefaces. Also the update attribute should do everything.
This said, I have the very same code as yours which is working good.
If removing f:ajax is not working, try to check your managed bean scope (May be it's of request scope and data is re-initialized with every request)
Try Updating the dialog instead.
update="fTable"

Resources