我正在尝试在我的Web应用程序上集成bootstrap。 现在，我想创建一个按钮，点击它后会显示一个对话框。 如果我的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>
你有没有想过要解决这个问题？非常感谢。
答案 0 :(得分：1)
好吧所以我没有永远完成jsf，但花了一些时间根据你的代码重新创建一个示例jsf项目，我得到它的工作然后我意识到解决方案非常简单，与jsf根本无关。在html表单中，如果您有一个按钮并且没有指定它将默认提交的类型，那么单击它将提交表单。既然你不希望发生这种情况，你只需要弹出一个模态而不是POST任何东西，你所要做的就是指定类型。用这个替换按钮，它应该工作：
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="button">
Launch Demo Modal
</button>
答案 1 :(得分：0)
<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