1

我是 JSF 的新手，我目前正在基于它构建一个网络拍卖类型的应用程序。我还使用了 Bootsfaces 中的多个元素。我想做的是有一个 inputText ，投标人可以在其中输入他们的投标，然后按下一个按钮，该按钮将触发 Bootsfaces 模式。在模式中，投标人必须通过按下最终“提交”他的投标的命令按钮来确认他确实想要投标。为了使它工作（如果我正确理解了 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>

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

4

1 回答 1

4

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

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

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

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

于 2015-09-16T18:35:24.540 回答