html - 在引导数据切换按钮收音机上使用 JSF ajax

Question

到目前为止，我还没有找到关于 SO 的明确答案，所以如果已经回答，请尽可能指导我。

我有的：

(HTML)

<span class="btn-group" data-toggle="buttons-radio">
    <button id="btn1" onClick="$('#theTest').val('price');" type="button" class="btn" value="price">Price</button>
    <button id="btn2" onClick="$('#theTest').val('time');" type="button" class="btn" value="time">Time</button>
    <input name="theTest" id="theTest" type="hidden" value=""/>
</span>

单击按钮时，我需要使用单击按钮的值调用支持 bean 中的函数，即#theTest

我该怎么做呢？我不能从 javascript 中调用它，因为我使用的是 JSF，并且这些#{}标签不适用于 javascript。

Answer 1

只需使用生成所需 HTML 而不是普通 HTML 元素的 JSF 组件。

例如

<h:outputStylesheet library="bootstrap" name="css/bootstrap.min.css" target="head" />
<h:outputScript library="bootstrap" name="js/bootstrap.min.js" target="head" />
...
<h:form>
    <span class="btn-group" data-toggle="buttons-radio">
        <h:commandButton type="button" styleClass="btn" value="Price"><f:ajax listener="#{bean.change('Price')}" /></h:commandButton>
        <h:commandButton type="button" styleClass="btn" value="Time"><f:ajax listener="#{bean.change('Time')}" /></h:commandButton>
    </span>
</h:form>

和

public void change(String value) {
    System.out.println(value);
}

使用 JSF，您甚至可以创建自定义组件来生成所需的 HTML，这样您就可以得到更流畅的代码，如下所示：

<b:radioButtons listener="#{bean.change}">
    <b:radioButton value="Price" />
    <b:radioButton value="Time" />
</b:radioButtons>

也可以看看：

• 当 UI 可以由 CSS、HTML、JavaScript、jQuery 实现时，JSF 需要什么？