首页 文章

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

提问于
浏览
1

我是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>

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

1 回答

  • 3

    <b:modal /> 移动到表单中会修改其id . 's an annoying property of the JSF framework: it sees to it that ids are always unique - and of of the measures to achieve that goal is to prepend the form'的id为 <b:modal > 的id . 大多数情况下,这很有效,但有时您需要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的问题,用CSS伪类表达式(“.pseudoClass”)替换你的jQuery表达式(“#id”) .

相关问题