单击编辑按钮时,Bootsfaces modalbox填充了来自dataTable列的错误用户数据

时间:2017-07-13 10:37:15

标签: jsf datatable modal-dialog bootsfaces

这是我的表

  

假设我在表中有10个用户并且我点击用户ID 2进行编辑,bootsfaces模式将表中的最后一个用户显示为模态;这是用户ID 10.

<div class="tab-pane fade" id="add9">
<h:form class="form-horizontal" >
  <h3 class="title-section title-bar-high mb-40">System User Report</h3>
      <div class="orders-info">
         <div class="table-responsive">
             <b:dataTable class="table table-bordered table-responsive" var="user" value="#{userBean.findsAll()}" onorder="console.log('order');" onselect="ajax:userBean.editUser(user)" onpage="console.log('page');" >
                  <h:column>
                      <f:facet name="header">Sr. No.</f:facet>
                       <h:outputText value="#{user.id}" />
                  </h:column>
                  <h:column>
                     <f:facet name="header">Name</f:facet>
                     <h:outputText value="#{user.userName}" />
                  </h:column>
                  <h:column>
                     <f:facet name="header">Status</f:facet>
                     <h:outputText value="#{user.userLevel}" />
                  </h:column>
                  <h:column>
                     <f:facet name="header">Mobile</f:facet>
                     <h:outputText value="#{user.userPhone}" />
                   </h:column>
                   <h:column>
                     <f:facet name="header">Email</f:facet>
                     <h:outputText value="#{user.userEmail}" />
                   </h:column>
                   <h:column>
                      <f:facet name="header">Date</f:facet>
                      <h:outputText value="#{user.userDate}" />
                   </h:column>
                   <h:column>
                       <f:facet name="header">Action</f:facet>
                      <b:commandButton iconAwesome="pencil" look="link" action="#{userBean.editUser(user)}" onclick="$('.modalPseudoClass').modal();return false;">
                            <f:ajax execute="#{userBean.editUser(user)}" render="@none" />
                        </b:commandButton>
                        <b:commandButton action="#{userBean.deleteUser(user)}" onclick="return confirm('You Are About You Delete This User!')" iconAwesome="trash" look="link">                            
                        </b:commandButton>
                  </h:column>
             </b:dataTable>
           </div>
         </div>
      </h:form>
    </div>

这是我的bean控制器

public class UserBean implements Serializable {

    @EJB
    private UserFacade userFacade;

    private User user;

    public UserBean() {
        user = new User();
    }

    public UserFacade getUserFacade() {
        return userFacade;
    }

    public void setUserFacade(UserFacade userFacade) {
        this.userFacade = userFacade;
    }

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    public void deleteUser(User user){
        userFacade.remove(user);
    }

    public void editUser(User user){
        this.user = user;
    }

    public void editUser(){
        userFacade.edit(this.getUser());
        user = new User();
    }   
}

这是我的bootsfaces模式

<f:view>
                <h:form class="form-horizontal">
                    <b:modal id="amodal" title="Basic info and Contact No. #{userBean.user.id}" styleClass="modalPseudoClass">
                        <div class="profile-details tab-content">
                            <div class="personal-info">
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="userName">User Name:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <h:inputText class="form-control" id="userName" value="#{userBean.user.userName}" title="UserName" requiredMessage="" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="firstName">First Name:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <h:inputText class="form-control" id="firstName" value="#{userBean.user.firstName}" title="FirstName" requiredMessage="" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="lastName">last-name:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <h:inputText class="form-control" id="lastName" value="#{userBean.user.lastName}" title="LastName" requiredMessage="" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="userEmail">E-mail Address:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <h:inputText class="form-control" id="userEmail" value="#{userBean.user.userEmail}" title="UserEmail" requiredMessage="" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="userPostal">Zip Code:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <h:inputText class="form-control" id="userPostal" value="#{userBean.user.userPostal}" title="UserPostal" requiredMessage="" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="userPhone">Phone:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <h:inputText class="form-control" id="userPhone" value="#{userBean.user.userPhone}" title="UserPhone" requiredMessage="" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="userCountry">Country:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <div class="custom-select">
                                            <h:selectOneMenu id="userCountry" value="#{userBean.user.userCountry}" title="UserCountry" class="select2">
                                                <f:selectItem itemValue = "o" itemLabel = "Please Select" />
                                                <f:selectItem itemValue = "Bangladesh" itemLabel = "Bangladesh" /> 
                                                <f:selectItem itemValue = "Spain" itemLabel = "Spain" /> 
                                                <f:selectItem itemValue = "Belgium" itemLabel = "Belgium" /> 
                                                <f:selectItem itemValue = "Ecuador" itemLabel = "Ecuador" /> 
                                                <f:selectItem itemValue = "Ghana" itemLabel = "Ghana" /> 
                                                <f:selectItem itemValue = "South Africa" itemLabel = "South Africa" /> 
                                                <f:selectItem itemValue = "India" itemLabel = "India" /> 
                                                <f:selectItem itemValue = "Pakistan" itemLabel = "Pakistan" /> 
                                                <f:selectItem itemValue = "Thailand" itemLabel = "Thailand" /> 
                                                <f:selectItem itemValue = "Malaysia" itemLabel = "Malaysia" /> 
                                                <f:selectItem itemValue = "Italy" itemLabel = "Italy" /> 
                                                <f:selectItem itemValue = "Japan" itemLabel = "Japan" /> 
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="userLevel">User Level:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <div class="custom-select">
                                            <h:selectOneMenu class="select2" id="userLevel" value="#{userBean.user.userLevel}" title="UserLevel">
                                                <f:selectItem itemLabel="Choose item" noSelectionOption="true" />
                                                <f:selectItems value="#{userBean.findAllUserRole()}" var="user" itemLabel="#{user.name}" itemValue="#{user.name}" />
                                                <f:ajax render="#{user.name}" />
                                            </h:selectOneMenu>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" value="Town / City:" for="userTown" />
                                    <div class="col-sm-9">
                                        <h:inputText class="form-control" id="userTown" value="#{userBean.user.userTown}" title="UserTown" requiredMessage="" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                              <div class="form-group">
                                    <h:outputLabel class="col-sm-3 control-label" for="userAbout">About Me:</h:outputLabel>
                                    <div class="col-sm-9">
                                        <h:inputTextarea class="form-control" id="userAbout" value="#{userBean.user.userAbout}" title="UserAbout" requiredMessage="" style="height: 150px;" rows="8" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                            <f:facet name="footer">
                                <div class="form-group mb-none">
                                    <div class="col-sm-3">
                                        <b:commandButton value="Save" look="success" style="width:80px" action="#{userBean.editUser()}" a:dismiss="modal" />
                                    </div>
                                    <div class="col-sm-3">
                                        <b:button value="Close" look="warning"  style="width:80px" dismiss="modal" />
                                    </div>
                                </div>
                            </f:facet>
                        </div>
                    </b:modal>
                </h:form>
            </f:view>

1 个答案:

答案 0 :(得分:0)

当用户选择行时,您需要更新模态的内容。您知道,数据表和模态是同一个XHTML文件的一部分,因此它们同时呈现。当然,这太早了,所以如果没有更新,模态会显示错误的用户。

顺便说一句,我认为将user重命名为selectedUser,将其初始化为null,并仅在selectedUsereditUser()时才呈现模态的内容是一个好主意。不是空的。这样,你会注意到什么时候出错了。此外,更少的HTML代码将发送到客户端。

与您的问题没有直接关系:您的代码段多次调用if (context.Request.Method == "OPTIONS") { context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { (string)context.Request.Headers["Origin"] }); context.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "Origin, X-Requested-With, Content-Type, Accept, Authorization" }); context.Response.Headers.Add("Access-Control-Allow-Methods", new[] { "GET, POST, PUT, DELETE, OPTIONS" }); context.Response.Headers.Add("Access-Control-Allow-Credentials", new[] { "true" }); } 。你可能想做一些家务。