Bootsfaces 模态无法在内部工作 <h:form>

Question

我是 JSF 的新手，我目前正在基于它构建一个网络拍卖类型的应用程序。我还使用了 Bootsfaces 中的多个元素。我想做的是有一个输入文本，投标人可以在其中输入他们的出价，然后按下一个按钮，该按钮将触发 Bootsfaces 模式。在模态中，投标人必须确认他确实想要投标，方法是按下一个命令按钮，最终 "submit" 他的投标。为了使其工作（如果我正确理解了 JSF 的工作原理），我需要在同一个 h:form 元素中使用 inputText 和 commandButton。唯一的问题是，每当我将模态代码放入表单中时，当我按下触发它的按钮时，模态就不会出现。我的代码如下：

<h:form>
    <b:inputText class="bid1" value="#{detailedViewBean.current}" placeholder="Type the amount you would like to bid..." style="width: 90%" onfocus="enableButton('atrigger1')" onblur="bidAmount(this.value, '#{detailedViewBean.previous}')">  <!--current highest bid-->
        <f:facet name="prepend">
            <h:outputText value="$" />
        </f:facet>
        <f:facet name="append">
            <b:buttonGroup>
                <a id="atrigger1" class="btn btn-primary" href="#amodal1" data-toggle="modal">Bid!</a>
            </b:buttonGroup>
        </f:facet>
    </b:inputText>

    <b:modal id="amodal1" title="Warning!" styleClass="modalPseudoClass">
        <p id="amodal1body"> Are you sure ?</p>
        <f:facet name="footer">
            <b:button value="Close" dismiss="modal" onclick="return false;"/>
            <b:commandButton value="Yes, submit my bid!" id="modalbidbutton" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#amodal2"/>
        </f:facet>
    </b:modal>
<h:form>

有谁知道为什么会发生这种情况或我该如何纠正它？

Answer 1

将 <b:modal /> 移动到表单中会修改其 ID。这是 JSF 框架的一个令人讨厌的属性：它确保 ID 始终是唯一的 - 实现该目标的措施之一是将表单的 ID 添加到 <b:modal > 的 ID 之前。大多数时候，这很好用，但有时您需要 HTML id。您的按钮使用 jQuery 表达式，所以这是其中一次。雪上加霜的是，JSF 使用冒号作为分隔符，jQuery 不能很好地处理冒号。

长话短说，我建议使用模式对话框的 CSS class 而不是 id。你已经给了它一个伪 CSS class。此 class 不包含任何布局信息。相反，您可以在按钮中使用它：

    <a id="atrigger1" class="btn btn-primary disabled" 
       href=".modalPseudoClass" data-toggle="modal">Bid!</a>

TL;DR：如果您运行遇到 id 问题，请将您的 jQuery 表达式（“#id”）替换为 CSS 伪 class 表达式（ “.pseudoClass”）。

Bootsfaces 模态无法在内部工作 <h:form>

Bootsfaces modal not working inside <h:form>

jsf

modal-dialog

bootstrap-modal

bootsfaces