primefaces save on datatable edit not working - jsf-2

Question

my xhtml page. the add functionality works fine. So the converters are working and as ViewScope is not working, I tried SessionScope and it works fine.
<p:commandButton id="addOfficeButton" icon="ui-icon-circle-plus" oncomplete="AddOfficeDialog.show();"/>
<h:form id="officeform">
<p:growl id="growl" showDetail="true" sticky="true" />
<p:dataTable id="officeDT" var="office" value="#{offices}" rowKey="#{office.id}" style="width:40%"
selection="#{officeManagementController.selectedOffice}" selectionMode="single" editable="true">
<p:ajax event="rowSelect" listener="#{officeManagementController.onRowSelect}" oncomplete="editDlg.show()"
update=":tabView:officeform:growl,:tabView:officeform:editPanel"/>
<p:column sortBy="#{office.id}" headerText="Office ID">
<h:outputText value="#{office.id}" />
</p:column>
<p:column headerText="System">
<h:outputText value="#{office.department.name}" />
</p:column>
<p:column headerText="Section">
<h:outputText value="#{office.role.name}" rendered="#{office.role!=null}"/>
</p:column>
<p:column headerText="Options" style="width:50px">
<p:rowEditor></p:rowEditor>
</p:column>
</p:dataTable>
<p:dialog id="AddOfficeDialog" widgetVar="AddOfficeDialog" modal="true" header="Add/Edit Office" hideEffect="fade" showEffect="fade">
<p:outputPanel layout="block" id="officeDetail">
<p:panelGrid columns="2">
<h:outputText value="Systemmm" />
<h:selectOneMenu value="#{officeManagementController.selectedSystem}" converter="#{applicationSystemConverter}">
<f:selectItem itemLabel="Select One" itemValue="#{null}" />
<f:selectItems value="#{departmentss}" var="appdepartment" itemLabel="#{appdepartment.name}" itemValue="#{appdepartment}"/>
<f:ajax event="change" listener="#{officeManagementController.onDepartmentChanged}" render="role"/>
</h:selectOneMenu>
<h:outputText value="Section" />
<h:selectOneMenu id="role" validate="true" value="#{officeManagementController.newOffice.role}" converter="#{departmentSectionConverter}">
<f:selectItem itemLabel="Select One" itemValue="#{null}" />
<f:selectItems value="#{officeManagementController.assignableRoles}" var="role" itemLabel="#{role.name}" itemValue="#{role}"/>
</h:selectOneMenu>
</p:panelGrid>
<p:outputPanel layout="block" style="text-align:center;">
<p:commandButton actionListener="#{officeManagementController.createOffice}" id="addOffice"
value="Add Office" title="Add new office" oncomplete="AddOfficeDialog.hide();" update="growl,officeform"/>
</p:outputPanel>
</p:outputPanel>
</p:dialog>
<p:dialog id="editDlg" widgetVar="editDlg" modal="true" header="Add/Edit Office" hideEffect="fade" showEffect="fade">
<p:outputPanel id="editPanel">
<p:panelGrid columns="2">
<h:outputLabel value="Office ID: " />
<h:outputText value="#{officeManagementController.selectedOffice.id}"/>
<h:outputText value="System" />
<h:selectOneMenu value="#{officeManagementController.selectedOffice.department}" converter="#{applicationSystemConverter}">
<f:selectItem itemLabel="Select One" itemValue="#{null}" />
<f:selectItems value="#{applicationSystems}" var="appdepartment" itemLabel="#{appdepartment.name}" itemValue="#{appdepartment}"/>
<f:ajax event="change" listener="#{officeManagementController.onApplicationSystemChanged}" render="sect"/>
</h:selectOneMenu>
<h:outputText value="Section" />
<h:selectOneMenu id="sect" validate="true" value="#{officeManagementController.selectedOffice.role}" converter="#{departmentSectionConverter}">
<f:selectItem itemLabel="Select One" itemValue="#{null}" />
<f:selectItems value="#{officeManagementController.assignableSysSections}" var="role" itemLabel="#{role.name}" itemValue="#{role}"/>
</h:selectOneMenu>
</p:panelGrid>
<p:outputPanel layout="block" style="text-align:center;">
<h:inputHidden binding="#{officeManagementController.selectedOfficeId}" />
<p:commandButton actionListener="#{officeManagementController.updateOffice()}"
value="Update Office" title="Update office" oncomplete="editDlg.hide();" update="#this,editPanel,growl,officeform"/>
</p:outputPanel>
</p:outputPanel>
</p:dialog>
</h:form>
Backing Bean:
public void updateOffice() {
selectedOffice.setId(Long.valueOf((String)selectedOfficeId.getValue()));
officeManagementService.update(selectedOffice);
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, CrudStatusMessage.SUCCESS.toString(), "Successfully updated Module: " + selectedOffice.getName()));
}
I am getting the dialog populated with the row values but the issue is onclick of update button, i am getting a Value is not Valid error on dept, but the main thing is the selectedModule's values are not set. Please help. stuck with it since a week.

Answer 1

I think you actually need actionListener (instead of action) on you button. You should read about the differences in API docs but the bottom line is that actionListener will perform an AJAX post-back while action will lead to a redirect (which in turn will destroy your view and replace it with a new one).

Answer 2

Firstly you don't need () in:
<p:commandButton action="#{officeManagementController.updateOffice}" value="Update Office" title="Update office" oncomplete="editDlg.hide();" update="#this,editPanel,growl,officeform"/>
Try using <f:ajax/> in your <h:selectOneMenu> and check if it works.