Wenn ich versuche, eine Backing-Bean-Methode von einem Modal aufzurufen, ruft es nur die Methode auf, wenn ich das zweite Mal klicke. Ich habe versucht, die Methode mit "action = ''" und "onclick = ''" aufzurufen. Das Problem ist, dass 1) Ich muss zweimal klicken, um die Methode aufzurufen 2) Wenn ich eine JavaScript-Funktion auf "oncomplete" hinzufügen, wird das modale Fenster geschlossen, aber die Methode wurde nicht aufgerufen. Wenn ich zum ersten Mal auf den Button klicke, erhalte ich die Warnung: Ressource /userarea/true.xhtml kann nicht gefunden werden. Userbereich ist der Ordner, meine JSF-Seite befindet.Bootsfaces commandButton funktioniert nicht in modal
<?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>
Jetzt habe ich auch versucht, die modal zu entfernen, um die Taste in der „leere Seite“ ist und ausgelassene alle die ganze Zeit, wie unten. Noch immer ruft die Schaltfläche die Backing-Bean-Methode nur beim zweiten Klick auf. Irgendwelche Ideen, was das Problem sein könnte?
<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>
Können Sie den Dialog vereinfachen, um den Fehler zu finden? Erstens, verschwindet der Fehler, wenn Sie die Tabelle außerhalb des modalen Dialogs platzieren? Zweitens, tritt der Fehler auf, wenn sich die Schaltfläche in einem modalen Dialogfeld befindet, aber nicht in einer Boots- Faces-Datentabelle? Die dataTable ist ein clientseitiges Widget, vielleicht ist das ein Problem für Ihre Schaltfläche. –
Danke für die Idee! Ich habe versucht, wie oben, aber immer noch ruft die Taste die Methode auf einen zweiten Klick. – manban