Using JSF ajax on bootstrap data-toggle buttons-radio

Question

So far I haven't been able to find a clear answer on SO, so if this has already been answered, please direct me to it if possible.

What I have:

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

When a button is clicked, I need to call a function in the backing bean with the value of the clicked button, ie the value of #theTest

How do I do this? I can't call it from javascript, because I am using JSF, and the #{} tags don't work with javascript.

Just use a JSF component which generates the desired HTML instead of a plain HTML element? — BalusC, Aug 29 '13 at 12:19
@BalusC I'm not sure which component to use. More than that, though, I don't know how to combine the JSF components to make them look like twitter bootstrap toggle buttons, and how to trigger the ajax call without using javascript(Which would ruin the whole thing anyways, seeing as I can't call functions using `#{bean.function}` in `` tags. I haven't been able to find even a single example of how to do it. — Skytiger, Aug 29 '13 at 12:31

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

Just use a JSF component which generates the desired HTML instead of a plain HTML element.

E.g.

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

With

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

With JSF you can even create custom components which generate the desired HTML so that you end up with more slick code something like as this:

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

Haha you beat me to it! I was going to ask 3 questions that basically needed this answer. Going to put it to use right now, thanks! – Skytiger Aug 29 '13 at 12:41
When using the tag like that, without an opening tag - what does that do? – Skytiger Aug 29 '13 at 12:45
It basically adds `onclick="jsf.ajax.request(...)"` and thus morphs the button into an ajax button. See generated HTML output before and after removing ``. Are you now more getting into the point of JSF? – BalusC Aug 29 '13 at 12:46
Yes, thank you, and I'm liking it more and more as I go along :) – Skytiger Aug 29 '13 at 12:57

Using JSF ajax on bootstrap data-toggle buttons-radio

1 Answers1

See also: