在引导数据切换按钮收音机上使用 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>

当一个按钮被点击时，我需要在backing bean中调用一个函数，其值是被点击按钮的值，即#theTest的值

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

Answer 1

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

例如

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

另见：

• What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?