0

When I try to invoke a backing bean method from a modal, it only calls the method when I click the second time. I tried to call the method with "action=''" and "onclick=''". The issue is, that 1) I have to click two times to call the method 2) When I add a javascript function on "oncomplete", the modal window is closed, but the method was not invoked. The first time I click the button I get the Warning: Ressource /userarea/true.xhtml cannot be found. userarea is the folder my JSF page is in.

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

Now I also tried to remove the modal so the Button is within the "blank page" and rendered all the whole time like below. Still the button invokes the backing bean method only on the second click. Any ideas what the issue could be?

<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>
manban
  • 133
  • 1
  • 19
  • Can you simplify the dialog in order to hunt down the error? First, does the error disappear when you put the table outside the modal dialog? Second, does the error happen if the button is in a modal dialog, but not in a BootsFaces dataTable? The dataTable is a client-side widget, maybe that's a problem for your button. – Stephan Rauh May 31 '16 at 06:08
  • Thanks for the idea! I tried like above, but still the button calls the method on second click. – manban May 31 '16 at 15:33

2 Answers2

0

I've failed to reproduce your error. I suggest you try my code below and report back. There are a few issues with your XHTML code: the bean name teamBacking usually starts with a lower case letter, and I'm not sure the CSS class full-width exists in your project. Just in case: did you confuse it with col-xs="full-width"? That's something different that doesn't translate to a CSS class.

That said, here's my working code that calls the backend method on the first click. Let's hope it helps you to find the difference and to solve the problem:

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 file:

<?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>
Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37
  • Thanks for your answer! I set "TeamBacking" with a capital in the backing bean, so it's no issue and the "full-width" class is my own css class. The issue was the lost view-state of the ajax-rendered form. I had to update the modal and the form in order to get a new viewstate for the form directly. – manban Jun 25 '16 at 22:39
0

I found the reason for this error in this post. the view state of form-elements seems to get lost when ajax rendering a form. In order to get a new view state when open the modal, I had to update the form explicitly.

Community
  • 1
  • 1
manban
  • 133
  • 1
  • 19