Question

当我尝试从模态调用辅助bean方法时，它仅在我第二次单击时调用该方法。我尝试用“action =''”和“onclick =''”来调用方法。问题是，那 1）我必须单击两次才能调用该方法 2）当我在“oncomplete”上添加一个javascript函数时，模态窗口被关闭，但是没有调用该方法。我第一次点击按钮时收到警告：无法找到Ressource /userarea/true.xhtml。 userarea是我的JSF页面所在的文件夹。

    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://xmlns.jcp.org/jsf/html"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:b="http://bootsfaces.net/ui"
          xmlns:p="http://primefaces.org/ui"
          xmlns:c="http://java.sun.com/jsp/jstl/core">

        <ui:composition template="../WEB-INF/templates/template-main.xhtml">
            <ui:define name="title">Team</ui:define>
            <ui:define name="content">
                <f:metadata>
                    <f:viewAction action="#{TeamBacking.currentUserIsMemberOfATeam()}" />
                    <f:viewAction action="#{TeamBacking.onPageLoad()}" />
                </f:metadata>
                    <b:row>
                        <b:column span="7">
                           <!--Rendered in case there is a team-->
                            <b:panel rendered="#{TeamBacking.currentUserIsMemberOfATeam()}" 
                                     title="Team" 
                                     collapsible="false">
                                <h1>#{TeamBacking.teamName}</h1>
                                <b:dataTable value="#{TeamBacking.team.students}"
                                             var="teamMember"
                                             id="team-members"
                                             styleClass="table table-striped table-bordered">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Name" />
                                        </f:facet>
                                        <h:outputText value="#{teamMember.firstName} #{teamMember.lastName}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Benutzername" />
                                        </f:facet>
                                        <h:outputText value="#{teamMember.username}" />
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Aktion" />
                                        </f:facet>       
                                        <h:form>
                                             <b:commandButton look="danger" 
                                                              size="small" 
                                                              value="Entfernen"                                                         
                                                              onclick="ajax:TeamBacking.setSelectedUser(teamMember);" 
                                                              oncomplete="javascript:$('.delete-user-pseudo').modal();return false;" 
                                                              update="delete-user-modal">

                                             </b:commandButton>                                         
                                        </h:form>                                                                                    
                                    </h:column>
                                </b:dataTable>
                                <h:outputText rendered="#{TeamBacking.team.project != null}" escape="false">
                                    <p>Projekt: #{TeamBacking.team.project.projectName}</p>
                                </h:outputText>
                            </b:panel>
                        </b:column> 
</b:row>    

     <b:modal id="delete-user-modal" 
                                 closable="true" 
                                 title="Teammitglied entfernen" 
                                 styleClass="delete-user-pseudo" >                        
                            <p>Folgenden Nutzer aus dem Team entfernen?</p>
                            <ul>
                                <li>Name: #{TeamBacking.selectedUser.firstName} #{TeamBacking.selectedUser.lastName}</li>
                                <li>Menutzername: #{TeamBacking.selectedUser.username}</li>
                            </ul>


                                <h:form id="delete-user-form">
                                    <b:commandButton look="warning" 
                                                     value="Abbrechen"
                                                     onclick="javascript:$('.delete-user-pseudo').modal('hide');return false;" />
                                    <b:commandButton look="danger" 
                                              value="Löschen"   
                                              onclick="ajax:TeamBacking.deleteSelectedUserFromTeam()" 
                                              oncomplete="javascript:$('.delete-user-pseudo').modal('hide');return false;"                                                                                     
                                              update="team-members" /> 
                                </h:form>                                                                                                                                       

                        </b:modal>


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


    </html>

现在我也尝试删除模态，因此Button位于“空白页面”内并像下面一样全部渲染。仍然按钮仅在第二次单击时调用backing bean方法。任何想法可能是什么问题？

<b:row id="delete-user-modal" 

                             styleClass="delete-user-pseudo" >     
                 <b:column span="12">
                        <p>Folgenden Nutzer aus dem Team entfernen?</p>
                        <ul>
                            <li>Name: #{TeamBacking.selectedUser.firstName} #{TeamBacking.selectedUser.lastName}</li>
                            <li>Menutzername: #{TeamBacking.selectedUser.username}</li>
                        </ul>


                            <h:form id="delete-user-form">
                                <b:row>               
                                    <b:column span="4" />
                                    <b:column span="4">
                                        <b:commandButton look="warning"
                                                         value="Abbrechen"
                                                         styleClass="full-width"
                                                         iconAwesome="stop-circle"
                                                         onclick="javascript:$('.delete-user-pseudo').modal('hide');return false;" />
                                    </b:column>                                    
                                    <b:column span="4" >
                                          <b:commandButton look="danger"
                                                           value="Löschen"
                                                           onclick="ajax:TeamBacking.deleteSelectedUserFromTeam()"
                                                           update="team-members form-picklist"
                                                           styleClass="full-width"
                                                           iconAwesome="trash-o"/> 
                                    </b:column>
                                </b:row>                                                              
                            </h:form>                                                                                                                                       
                        </b:column>
                    </b:row>

Answer 1

我无法重现您的错误。我建议你尝试下面的代码并报告回来。您的XHTML代码存在一些问题：bean名称teamBacking通常以小写字母开头，我不确定您的项目中是否存在CSS类full-width。以防万一：您是否将其与col-xs="full-width"混淆了？这是不同的，不会转换为CSS类。

那就是说，这是我在第一次点击时调用后端方法的工作代码。让我们希望它能帮助您找到差异并解决问题：

import java.io.Serializable;                                                                                     

import javax.faces.bean.ManagedBean;                                                                             
import javax.faces.bean.SessionScoped;                                                                           

@ManagedBean                                                                                                     
@SessionScoped                                                                                                   
public class TeamBacking implements Serializable                                                                 
{                                                                                                                
    private static final long serialVersionUID = 1L;                                                             

    public void deleteSelectedUserFromTeam() {                                                                   
        System.out.println("removed user");                                                                      
    }                                                                                                            
}

XHTML文件：

<?xml version="1.0" encoding="UTF-8"?>                                                                           
<!DOCTYPE html>                                                                                                  
<html xmlns="http://www.w3.org/1999/xhtml"                                                                       
  xmlns:h="http://xmlns.jcp.org/jsf/html"                                                                        
  xmlns:p="http://primefaces.org/ui"                                                                             
  xmlns:b="http://bootsfaces.net/ui"                                                                             
  xmlns:f="http://xmlns.jcp.org/jsf/core">                                                                       
<h:head>                                                                                                         
</h:head>                                                                                                        
<h:body>                                                                                                         
  <h:form id="delete-user-form">                                                                                 
    <b:row>                                                                                                      
      <b:column span="4">                                                                                        
        <b:commandButton look="danger" value="Löschen"                                                           
          onclick="ajax:teamBacking.deleteSelectedUserFromTeam()"                                                
          update="@form" styleClass="full-width" iconAwesome="trash-o" />                                        
      </b:column>                                                                                                
    </b:row>                                                                                                     
  </h:form>                                                                                                      
</h:body>                                                                                                        
</html>

Answer 2

我在this post中找到了此错误的原因。当ajax呈现表单时，表单元素的视图状态似乎会丢失。为了在打开模态时获得新的视图状态，我必须明确更新表单。

Bootsfaces commandButton不能用于模态

2 个答案: