Question

我是JSF的新手，我目前正在构建基于它的网络拍卖类型的应用程序。我还使用了Bootsfaces中的多个元素。我想要做的是有一个inputText，投标人可以在其中键入他们的出价，然后按下一个按钮，触发Bootsfaces模式。在模态中，投标人必须通过按下最终“提交”其出价的commandButton来确认他实际上想要出价。为了使其工作（如果我已经正确理解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添加到{{1}的id中}。大多数情况下，这很有效，但有时您需要HTML ID。您的按钮使用jQuery表达式，因此这是其中之一。加上侮辱伤害，JSF使用冒号作为分隔符，jQuery不能很好地处理结肠。

简而言之，我建议使用模态对话框的CSS类而不是id。你已经给它一个伪CSS类。该课程不承担任何布局信息。相反，您可以在按钮中使用它：

<b:modal >

TL; DR：如果遇到id的问题，请用CSS伪类表达式替换你的jQuery表达式（＆＃34;＃id＆＃34;）（＆＃34; .pseudoClass＆＃34;）。

Bootsfaces模式在<h：form>中不起作用

1 个答案: