tommy
tommy

Reputation: 89

Primefaces DataTable update does not work properly

I've problem with updating dataTable, after some operations. For example, when I try add new user by New User button, i can't add second one, beacause button is "inactive". I try update="dataTable" and update=":form:dataTable", without succes. Can somebody tell me what i'm doing wrong?

<ui:composition template="../adminTemplates/layout.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <ui:define name="content">
        <h:form id="form" prependId="false">
            <p:growl id="messages" showDetail="true" />
            <p:contextMenu for="dataTable">
                <p:menuitem value="Delete" update="dataTable" icon="ui-icon-close"
                    actionListener="#{userMB.deleteUser}" />
            </p:contextMenu>
            <p:dataTable id="dataTable" var="user" value="#{userMB.userList}"
                paginator="true" rows="5" rowKey="#{user.user_id}"
                selection="#{userMB.selectedUser}" selectionMode="single"
                filteredValue="#{userMB.filteredUsers}" editable="true"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                rowsPerPageTemplate="5,10,15">
                <p:ajax event="rowEdit" immediate="true" listener="#{userMB.onEdit}"
                    update=":form:messages, :form:dataTable" />
                <f:facet name="header">  
                    Students  
                 </f:facet>

                <p:column sortBy="name" filterBy="name" id="name" headerText="Name">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{user.name}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{user.name}" required="true"
                                requiredMessage="Please Enter Name"
                                validatorMessage="Name is too short!">
                                <f:validateLength minimum="2"></f:validateLength>
                            </p:inputText>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column sortBy="surname" filterBy="surname" headerText="Surname">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{user.surname}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{user.surname}" required="true"
                                requiredMessage="Please Enter Surname!"
                                validatorMessage="Surname is too short!">
                                <f:validateLength minimum="2"></f:validateLength>
                            </p:inputText>
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column sortBy="username" filterBy="username"
                    headerText="Index number">
                    <h:outputText value="#{user.username}" />
                </p:column>

                <p:column sortBy="userDescription" filterBy="userDescription"
                    headerText="Faculty">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{user.userDescription}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{user.userDescription}" required="true"
                                requiredMessage="Please Enter User Description" />
                        </f:facet>

                    </p:cellEditor>
                </p:column>
                <p:column style="width:6%" headerText="Edit">
                    <p:rowEditor />
                </p:column>
                <f:facet name="footer">
                    <p:commandButton value="New User" oncomplete="newUserDialog.show()"
                        icon="ui-icon-star" title="Creates new user" />

                </f:facet>
            </p:dataTable>
        </h:form>


        <p:dialog header="Create New User" widgetVar="newUserDialog"
            resizable="false" id="newUserDlg">
            <h:form id="newUserForm">
                <p:messages autoUpdate="true" />
                <p:panelGrid id="displayNewUser" columns="2" cellpadding="4"
                    style="margin:0 auto;">
                    <h:outputText value="Name :"></h:outputText>
                    <p:inputText id="name" value="#{userMB.name}" required="true"
                        requiredMessage="Please Enter Name"
                        validatorMessage="Name is too short!">
                        <f:validateLength minimum="2"></f:validateLength>
                    </p:inputText>

                    <h:outputText value="Surname :"></h:outputText>
                    <p:inputText id="Surname" value="#{userMB.surname}" required="true"
                        requiredMessage="Please Enter Surname!"
                        validatorMessage="Surname is too short!">
                        <f:validateLength minimum="2"></f:validateLength>
                    </p:inputText>

                    <h:outputText value="Index_num :" />
                    <p:inputText id="indexx" value="#{userMB.username}" required="true"
                        requiredMessage="Please Enter Index Number"
                        validatorMessage="Index Number should have 6 numbers!">
                        <f:validateLength minimum="6" maximum="6" />
                        <f:validateRegex pattern="^[0-9]+$" />
                    </p:inputText>



                    <h:outputText value="PESEL :"></h:outputText>
                    <p:inputText value="#{userMB.password}" required="true"
                        requiredMessage="Please Enter PESEL!"
                        validatorMessage="PESEL should have last 5 numbers!">
                        <f:validateLength minimum="5" maximum="5" />
                        <f:validateRegex pattern="^[0-9]+$" />
                    </p:inputText>

                    <h:outputText value="User Description :"></h:outputText>
                    <p:inputText value="#{userMB.userDescription}" required="true"
                        requiredMessage="Please Enter User Description" />

                    <f:facet name="footer">
                        <p:commandButton value="Submit" actionListener="#{userMB.addUser}"
                            oncomplete=" handleSubmitRequest(xhr, status, args, 'newUserDlg','newUserForm');"
                            update=":form:dataTable, :growl" validateClient="true" />
                        <p:commandButton type="reset" value="Reset"></p:commandButton>
                    </f:facet>
                </p:panelGrid>
            </h:form>
        </p:dialog>

        <p:growl id="growl" showDetail="true" life="5000" />

        <script type="text/javascript">
            function handleSubmitRequest(xhr, status, args, dialogName,
                    formName) {
                dialog = jQuery('#' + dialogName);
                if (args.validationFailed) {
                    dialog.effect("shake", {
                        times : 3
                    }, 100);
                } else {
                    clearForm(formName);
                    newUserDialog.hide();
                    userDialog.hide();
                }
            }
            function clearForm(formName) {
                jQuery('#' + formName).each(function() {
                    this.reset();
                });
            }
        </script>

    </ui:define>
</ui:composition>

Upvotes: 0

Views: 2185

Answers (1)

Asif
Asif

Reputation: 429

Change the code as

<f:facet name="footer">
 <p:commandButton value="New User" onclick="newUserDialog.show()"
  icon="ui-icon-star" title="Creates new user" />
 </f:facet>

Updated:: I have a similar implementation I am sharing what I did, I can't find your fault.

    <p:commandButton ajax="false" update=":ff1:actDetails:lis"
oncomplete="handleComplete(xhr, status, args)" value="Submit" actionListener="#{insertbean.insert()}" type="submit" />
  1. actionListener signature should not be like this actionListener="#{userMB.addUser}" should be like actionListener="#{userMB.addUser()}"
  2. My javascript is

    function handleComplete(xhr, status, args) { if (!args.validationFailed) { dlg1.hide(); } else { } }

dlg1 is the dialog widgetVar. Form inside dialog has also validation like required=true type but my dialog doesn't have any animation. 3. I made ajax="false" because ajax="true" wasn't updating the datatable new entry. 4. My add new button is <f:facet name="footer"> <p:commandButton value="Add Activity" type="button" onclick="dlg1.show()" /> </f:facet> May it help.

Upvotes: 1

Related Questions