2016-05-30 25 views
0

モーダルからバッキングBeanメソッドを呼び出そうとすると、2回目のクリック時にのみメソッドが呼び出されます。 "action = ''"と "onclick = ''"のメソッドを呼び出そうとしました。問題は、その 1)私はメソッドを呼び出すために2回クリックする必要があります 2) "oncomplete"にjavascript関数を追加すると、モーダルウィンドウは閉じられますが、メソッドは呼び出されませんでした。 初めてボタンをクリックすると警告が表示されます:Ressource /userarea/true.xhtmlが見つかりません。 userareaは、私のJSFページがでているフォルダです。Bootsfaces commandButtonがモーダルで動作しない

<?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>  

ボタンは「空白のページ」内にあり、以下のようなすべての全体の時間をレンダリングだから今、私はまた、モーダルを削除しようとしました。 ボタンは2番目のクリックでのみバッキング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> 
+0

エラーを見つけ出すためにダイアログを簡略化できますか?まず、モーダルダイアログの外にテーブルを置くとエラーが消えますか?次に、ボタンがモーダルダイアログにあるが、BootsFacesのdataTableにない場合はエラーが発生しますか? dataTableはクライアント側のウィジェットです。これはおそらくボタンの問題です。 –

+0

アイデアありがとう!私は上記のようにしようとしましたが、ボタンは2番目のクリックでメソッドを呼び出します。 – manban

答えて

0

エラーの再現に失敗しました。私はあなたの下の私のコードを試して、報告することをお勧めします。あなたの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>                                                        
+0

あなたの答えをありがとう!私はバッキングビーンの資本で "TeamBacking"を設定したので、問題はなく、 "full-width"クラスは自分のcssクラスです。問題は、アヤックスレンダリングされたフォームの失われたビュー状態でした。フォームの新しいビューステートを直接取得するために、モーダルとフォームを更新する必要がありました。 – manban

0

私はthis postでこのエラーの理由を発見しました。 ajaxでフォームをレンダリングすると、フォーム要素の表示状態が失われているように見えます。モーダルを開いたときに新しいビュー状態を取得するには、フォームを明示的に更新する必要がありました。

関連する問題