我喜欢复合组件的原理，但这和 Bootstrap 模式不能一起工作。
管理多个自定义复合组件对话框并在 JSF 表中使用此示例的最佳实践是什么。 将托管 Bean 值从所选行传递到对话框。
这只适用于我，如果我把所有内容都写在一个页面文件中。 请参阅最后一篇。
bootstrapModal.xhtml 包装在复合组件中的模式
<?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:h="http://xmlns.jcp.org/jsf/html"
xmlns:cc="http://xmlns.jcp.org/jsf/composite">
<cc:interface>
<cc:attribute name="title" />
<cc:attribute name="linkNameLable" />
<cc:attribute name="linkNameValue" />
<cc:attribute name="urlNameLable" />
<cc:attribute name="urlNameValue" />
<cc:attribute name="saveButtonText" />
<cc:attribute name="saveButtonAction"
method-signature="java.lang.String action()" />
</cc:interface>
<cc:implementation>
<div id="#{cc.clientId}" class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h:form>
<h:outputLabel value="#{cc.attrs.linkNameLable}" />
<h:inputText value="#{cc.attrs.linkNameValue}" />
<h:outputLabel value="#{cc.attrs.urlNameLable}" />
<h:inputText value="#{cc.attrs.urlNameValue}" />
<h:commandButton value="#{cc.attrs.saveButtonText}" action="#{cc.attrs.saveButtonAction}" />
</h:form>
</div>
</div>
</div>
</div>
</cc:implementation>
</html>
换行 div 不起作用。
<div id=#{cc.clientId}>...</div>
我也尝试将 id 传递到里面的表单。
<h:form id=#{cc.clientId}
view.xhtml 的复合组件不起作用。 f:ajax 无法从复合组件中渲染 id
...
<script>
function showModal() {
$('#myModal').modal('show');
}
</script>
...
<h:dataTable id="myTable" value="#{linkController.linkList}" var="o">
...
<h:column>
<f:facet name="header">Actions</f:facet>
<h:form>
<h:commandLink value="edit" onclick="showModal()" action="#{linkController.setLinkFromParam}">
<f:ajax render="myModal value1 value2" />
<f:param name="name" value="#{o.name}" />
<f:param name="url" value="#{o.url}" />
</h:commandLink>
</h:form>
</h:column>
</h:dataTable>
<!-- 1.outside the Table rendering works fine -->
<h:outputText id="value1" value="#{linkController.name}" /><br />
<h:outputText id="value2" value="#{linkController.url}" />
<!-- 2.The render for this id does not work -->
<mahi:bootstrapModal title="Edit Link"
id="myModal"
linkNameLable="Link Name:"
linkNameValue="#{linkController.name}"
urlNameLable="URL:"
urlNameValue="#{linkController.url}"
saveButtonText="Save"
saveButtonAction="#{linkController.updateLink(link)}" />
view.xhtml 与复合组件中的内容工作正常。 因为我可以直接使用 id="myModalForm"渲染 h:form。
...
<script>
function showModal() {
$('#myModal').modal('show');
}
</script>
...
<h:dataTable id="myTable" value="#{linkController.linkList}" var="o">
...
<h:column>
<f:facet name="header">Actions</f:facet>
<h:form>
<h:commandLink value="edit" onclick="showModal()" action="#{linkController.setLinkFromParam}">
<f:ajax render="myModalForm" />
<f:param name="name" value="#{o.name}" />
<f:param name="url" value="#{o.url}" />
</h:commandLink>
</h:form>
</h:column>
</h:dataTable>
<!-- The Content from the Custom Composite Component works -->
<div id="myModal" class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myLinkModal" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h:form id="myModalForm">
<h:outputLabel value="Name:" />
<h:inputText value="#{linkController.name}" />
<h:outputLabel value="URL:" />
<h:inputText value="#{linkController.url}" />
<h:commandButton value="Save" action="#{linkController.saveLink(link)}" />
</h:form>
</div>
</div>
</div>
</div>
最佳答案
简单的解决方案:
将类添加到您的模态中以便调用它，并将您的模态称为类而不是像 id 这样的:
模态:>
<div id="#{cc.clientId}" class="modal fade myModal"
脚本:>
<script>
function showModal() {
$('.myModal').modal('show');
}
关于twitter-bootstrap - 如何在 Java Server Faces 中处理 Bootstrap 模式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30952630/