Bootstrap模态框无法在里面显示<h:form>
Bootstrap modal can't displayed inside <h:form>
我正在尝试将 bootstrap 集成到我的 Web 应用程序中。
现在，我想创建一个按钮，单击它后会显示一个对话框。
如果我的 xhtml 页面不包含 h:form，这是成功完成的，但是一旦我的 xhtml 页面显示 h:form，模型就不能'不显示。
下面是按钮：
<div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的 xhtml 页面，包括模态按钮：
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/pages/indexTemplate.xhtml">
<h:head>
<title>SLEAM Book | Consult a Facebooker</title>
<link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/>
<style>
.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td {
border-style: none;
</style>
</h:head>
<h:body>
<ui:composition template="indexTemplate.xhtml">
<ui:define name = "content">
<h:form>
<h:outputText value="Add a Publication" styleClass="text-primary"/>
<br/><br/>
<h:inputText value="#{userBean.publicationContent}" styleClass="form-control"/>
<br/>
<p:commandButton value="Post"
action="#{userBean.createPublication}"
styleClass="btn btn-primary"
id="btn" ajax="true"/>
#{userBean.lps.size()}
<div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/><br/>
<div class="table-responsive">
<p:dataTable var="car" value="#{userBean.lps}" tableStyleClass="table table-striped">
<f:facet name="header">
List Of Publications
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Title">
<h:outputText value="#{car.title}" />
</p:column>
<p:column style="width:32px;text-align: center">
<p:commandButton value="Post"
id="btn"
ajax="true"
styleClass="btn btn-primary"/>
</p:column>
</p:dataTable>
<p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty userBean.selectedPublication}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{userBean.selectedPublication.id}" />
<h:outputText value="Title" />
<h:outputText value="#{userBean.selectedPublication.title}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
文件faces-config.xml是：
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
</faces-config>
请问您对解决这个问题有什么想法吗？。非常感谢。
好吧，我已经很久没有做 jsf 了，但是花了一些时间根据你的代码重新创建了一个示例 jsf 项目，我让它工作了，然后我意识到这个解决方案非常简单，与 jsf 完全无关.在 html 表单中，如果你有一个按钮，但没有指定它默认提交的类型，那么点击它就会提交表单。由于您不希望这种情况发生，您只希望弹出一个模式而不是 POST 任何东西，您所要做的就是指定类型。用这个替换按钮，它应该可以工作：
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="button">
Launch Demo Modal
</button>
你可以这样试试：
<p:commandLink value="Edit" styleClass="btn btn-primary" onclick="$('#myModal').modal('show');" update=":myForm" immediate="true"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<h:form id="myForm">
<div class="modal-header">
<h4 class="modal-title">Test Modal</h4>
</div>
<div class="modal-body">
Hello World
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</h:form>
</div>
</div>
</div>
HTH
我正在尝试将 bootstrap 集成到我的 Web 应用程序中。 现在，我想创建一个按钮，单击它后会显示一个对话框。 如果我的 xhtml 页面不包含 h:form，这是成功完成的，但是一旦我的 xhtml 页面显示 h:form，模型就不能'不显示。
下面是按钮：
<div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的 xhtml 页面，包括模态按钮：
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/pages/indexTemplate.xhtml">
<h:head>
<title>SLEAM Book | Consult a Facebooker</title>
<link rel="shortcut icon" type="image/x-icon" href="#{resource['icons/hki2.gif']}"/>
<style>
.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td {
border-style: none;
</style>
</h:head>
<h:body>
<ui:composition template="indexTemplate.xhtml">
<ui:define name = "content">
<h:form>
<h:outputText value="Add a Publication" styleClass="text-primary"/>
<br/><br/>
<h:inputText value="#{userBean.publicationContent}" styleClass="form-control"/>
<br/>
<p:commandButton value="Post"
action="#{userBean.createPublication}"
styleClass="btn btn-primary"
id="btn" ajax="true"/>
#{userBean.lps.size()}
<div class="panel panel-default">
<div class="panel-heading">
Modals
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Demo Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/><br/>
<div class="table-responsive">
<p:dataTable var="car" value="#{userBean.lps}" tableStyleClass="table table-striped">
<f:facet name="header">
List Of Publications
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Title">
<h:outputText value="#{car.title}" />
</p:column>
<p:column style="width:32px;text-align: center">
<p:commandButton value="Post"
id="btn"
ajax="true"
styleClass="btn btn-primary"/>
</p:column>
</p:dataTable>
<p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty userBean.selectedPublication}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{userBean.selectedPublication.id}" />
<h:outputText value="Title" />
<h:outputText value="#{userBean.selectedPublication.title}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
文件faces-config.xml是：
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
</faces-config>
请问您对解决这个问题有什么想法吗？。非常感谢。
好吧，我已经很久没有做 jsf 了，但是花了一些时间根据你的代码重新创建了一个示例 jsf 项目，我让它工作了，然后我意识到这个解决方案非常简单，与 jsf 完全无关.在 html 表单中，如果你有一个按钮，但没有指定它默认提交的类型，那么点击它就会提交表单。由于您不希望这种情况发生，您只希望弹出一个模式而不是 POST 任何东西，您所要做的就是指定类型。用这个替换按钮，它应该可以工作：
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="button">
Launch Demo Modal
</button>
你可以这样试试：
<p:commandLink value="Edit" styleClass="btn btn-primary" onclick="$('#myModal').modal('show');" update=":myForm" immediate="true"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<h:form id="myForm">
<div class="modal-header">
<h4 class="modal-title">Test Modal</h4>
</div>
<div class="modal-body">
Hello World
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</h:form>
</div>
</div>
</div>
HTH