I have a form in which I needed to have radio buttons that look like bootstrap toggle buttons. I achieved this by using command buttons in a button group, and setting the attribute data-toggle="buttons-radio", like so:
<div id="flightChoiceButtons" class="btn-group" data-toggle="buttons-radio">
<h:commandButton type="button" styleClass="btn btn-inverse" value="One Way"><f:ajax render="flexibleDates" listener="#{searchFlightsBean.setDirectionOneWay}"/></h:commandButton>
<h:commandButton type="button" styleClass="btn btn-inverse" value="Round Trip"><f:ajax render="flexibleDates" listener="#{searchFlightsBean.setDirectionRoundtrip}"/></h:commandButton>
</div>
The problem I'm stuck with right now is that I need the "Round Trip" button to be selected, or in the down state, when the page loads. I don't need the button's ajax call to be fired, because the data displayed on the page is already in the state it needs to be in.
Anyone have any ideas?
If any more information is needed I'd be glad to supply it.
The bootstrap button's active state is identified by presence of active style class. Knowing that, you can just let JSF print the style class conditionally. The way how your model is setup is unclear, so here's just a kickoff example provided that you've a #{searchFlightsBean.direction} property returning an enum.
<h:commandButton ... styleClass="btn btn-inverse #{searchFlightsBean.direction == 'ONE_WAY' ? 'active' : ''}">...</h:commandButton>
<h:commandButton ... styleClass="btn btn-inverse #{searchFlightsBean.direction == 'ROUND_TRIP' ? 'active' : ''}">...</h:commandButton>
You can replace the #{searchFlightsBean.direction == '...'} part by any other boolean condition. You can find examples in this answer: Conditionally displaying JSF components.
Related
I have three options for user: two equipment selection and one option to say I don't want equipment. To select two equipment I used p:commandLink. To say I do not want equipment I used h:selectOneRadio.
If user do not want to buy equipment, user can select the option button 'I do not wish to have'. So at anytime, only one button can be selected within the three of them.
If I press h:selectOneRadio button, then other two buttons (p:commandLink) are updating properly to 'select'. But if I select an equipment (p:commandLink), then h:selectOneRadio button is not deselecting even though it's bean value is updated to false.
JSF page
<h:panelGroup id="pwpPanel">
<div class="row">
<ui:repeat value="#{reconBean.EQList}" var="equipment">
<div class="col-md-4">
<div class="btn-fibre-tab text-center">
<ui:fragment rendered="#{reconBean.pwpSelectedEquipmentID != equipment.id }">
<p:commandLink id="selectpwp" process="#form" update=":mainForm:pwpPanel"
styleClass="select_button" action="#{reconBean.updatePWPItem(equipment.id)}"
immediate="true">
Select
<f:ajax render=":mainForm:pwpPanel" />
</p:commandLink>
</ui:fragment>
<ui:fragment rendered="#{reconBean.pwpSelectedEquipmentID eq equipment.id }">
<p:commandLink id="selectedpwp" process="#form" update=":mainForm:pwpPanel"
styleClass="selected_button" action="#{reconBean.updatePWPItem(equipment.id)}"
immediate="true">
Selected
<f:ajax render=":mainForm:pwpPanel" />
</p:commandLink>
</ui:fragment>
</div>
</div>
</ui:repeat>
</div>
<div class="row">
<div class="col-sm-12 ">
<h:selectOneRadio value="#{reconBean.notPurchaseWithPurchase}" id="radioDoNotWant"
name="pwpEquipment">
<f:selectItem itemLabel="I do not wish to have" itemValue="true" />
<f:ajax event="click" execute="#this" listener="#{reconBean.resetPWPSelection}"
render="pwpPanel" />
</h:selectOneRadio>
</div>
</div>
</h:panelGroup>
Bean values
public void updatePWPItem(String itemID) {
pwpSelectedEquipmentID = itemID;
notPurchaseWithPurchase = false;
}
public void resetPWPSelection(AjaxBehaviorEvent event) {
pwpSelectedEquipmentID = null;
}
The problem is the immediate attribute set to true on the CommandLinks. It is essentially to understand the The Lifecycle of a JavaServer Faces Application. The impact of the immediate attribute differs in, on what kind of component it is applied. As stated in a good article:
In the standard JSF lifecycle, the action attribute on an Command component is evaluated in the Invoke Application phase
... if you set immediate="true" on it.
To be honest, i do not exacly know why this prevents your radio option from being unchecked (I am still learning all aspects of the JSF lifecylce), but i think it is because it remains unchanged in the component tree and gets rendered as it was even if the model is updated through your action (if someone may comment on this i will update accordingly).
The solution to your problem is to remove the immediate attribute from your CommandLinks or set it to false.
Some remarks:
PrimeFaces CommandLinks have build in AJAX capabilities which are enabled by default. There is no need to enclose an additional <f:ajax />. Only if you want to disable AJAX you have to set its ajax attribute to false. The render attribute of Ajax conforms to the update attribute of CommandLink.
You are using SelectOneRadio in a context it is not designed for. As stated on JSFToolbox:
This component is designed for situations where you want to display a mutually exclusive list of options to the user as a set of radio buttons.
Consider using another better suited component like CommandLink or CommandButton.
I’m new in JavaServer Faces.
I have a simply form:
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">#{msgs.leavereply}</h3>
<h1>#{!forumsBean.activeWithProject}</h1>
<h:form>
<h:inputTextarea value="#{forumpostsBean.text}" style="resize:none"/>
<h:commandButton value="#{msgs.add}" action="#{forumpostsBean.addForumpost}"/>
</h:form>
</div>
By clicking command button all it’s fine, executes method forumpostsBean.addForumpost.
But when I modify code to this:
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">#{msgs.leavereply}</h3>
<h1>#{!forumsBean.activeWithProject}</h1>
<h:form>
<h:inputTextarea value="#{forumpostsBean.text}" style="resize:none" disabled="#{not forumsBean.active}"/>
<h:commandButton value="#{msgs.add}" action="#{forumpostsBean.addForumpost}" disabled="#{not forumsBean.active}"/>
</h:form>
</div>
When items not disabled, current page only have refreshed, but method forumpostsBean.addForumpost don’t executes.
In both variants, <h1>#{!forumsBean.activeWithProject}</h1> shows correct value.
You have 2 beans? one called forumpostsBean and another just forumsBean? I can't see if you've got them both but maybe its the main error? as the comment above says, maybe your logic is out of place.
You may want to use rendered="" on the button rather that just disabling it so its not part of the dom at all upon page load and then use an ajax call when you type data in your input field to do partial ajax render the div again and show it. good for testing.
What is the preferred way to create a button with JSF to call JS function ?
Actually I use :
<p:button onclick="myJSFunction();" href="#"/>
but my urls are suffixed with the anchor symbol (#).
Is there another recommended way to create button which will not reload/navigate to URL but call JS function please ?
That's because it's actually navigating to #. You need to block the button from performing its default action, which is navigating to the current view, or to the URL as specified in href or outcome. You can achieve this by adding return false; to the end of onclick.
<p:button onclick="myJSFunction(); return false;" />
Or, if myJSFunction() actually returns a boolean which should determine if the button should continue its default action, then delegate to it:
<p:button onclick="return myJSFunction();" />
The <h:button> works exactly the same way, it's only in standard look'n'feel.
An alternative is to use <p:commandButton type="button">, which generates a real <input type="button"> without any navigation. This way you don't need to return false from onclick.
<p:commandButton type="button" onclick="myJSFunction()" />
This however requires a <h:form> (although placing it outside any form doesn't break any functionality). The same applies to <h:commandButton>.
i have two radio buttons and no one is selected by default, and it's mandatory to select one of them, so here's what i did:
<div id="payment_method">
<h:message for="sel_payment_method" style="Color:red;"/>
<h:selectOneRadio id="sel_payment_method" required="true" requiredMessage="Please select a payment method" value="#{myBean.selectedPaymentMethod}">
<f:selectItem itemLabel="Debit or Credit Card" itemValue="credit" />
<f:selectItem itemLabel="Checking Account" itemValue="checking" />
<f:ajax event="change" render="credit_inputs_fragment checking_inputs_fragements" />
</h:selectOneRadio>
</div>
the selectedPaymentMethod property is a string and its default value is null
and the credit_inputs_fragment is a ui:fragement that contains a div
ISSUE: when clicking on a radio buttons the two fragments to be changed are not affected.
please advise, thanks.
You're not entirely clear in describing the concrete problem, but I can see at least two potential problems in the code posted so far:
The <f:ajax event="change"> is wrong in case of radiobuttons and checkboxes. It should be event="click". Or, better, just remove it altogether. It defaults to the right one already. See also What values can I pass to the event attribute of the f:ajax tag?
The component referenced in <f:ajax render> must be a fullworthy JSF UI component and always be rendered to the client side. If the component is by itself never rendered to the HTML, then JavaScript simply can't find it to update its content. You basically need the conditionally rendered components in another component which is always rendered. See also Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
i followed the example code in the following link, and it solved my issue:
JSF: Dynamically change form
I'm developping an application in JSF2.0. I encountered a problem when mixing ajax and a panelGroup with a rendered attribute.
My page contains 3 panels. In the first panel the user selects an item from a <h:selectOneMenu>. This causes to render the second panel.
The second panel contains an h:dataTable that is connected to a DataModel in the backing bean. The values of the dataTable are determined by the item that was chosen in the <h:selectOneMenu> of the first panel. Each row in the table contains a commandLink to view detailed info about the item of that row:
<h:commandLink action="#{faseController.selectInvulling}">
<f:ajax render="#form" execute="#form" />
</h:commandLink>
Clicking on the commandLink the third panel gets rendered:
<h:panelGroup rendered="#{faseController.invullingSelected}" layout="block" styleClass="panelElement" id="invulling">
<label>
<span>Datum:</span>
<h:inputText value="#{faseController.selectedInvulling.datum}" required="true" requiredMessage="Gelieve een datum in te vullen." converterMessage="Gelieve een geldige datum in te vullen (dd/mm/jjjj)." >
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:inputText>
</label>
<label>
<span>Evaluatie</span>
<h:inputTextarea value="#{faseController.selectedInvulling.evaluatie}" cols="100" />
</label>
<label>
<span>Methode</span>
<h:inputTextarea value="#{faseController.selectedInvulling.methode}" cols="100" />
</label>
</h:panelGroup>
This is where I encounter a problem. The first time I click on a commandLink to view the detailed info about that row in the table, I get the correct data in the third panel. Afterwards I change the item in the <h:selectOneMenu> of the first panel: the correct corresponding dataTable gets rendered in the second panel. However this time when I click on a commandLink in the table to view the details of that item, I get to see the info from the item I clicked the first time.
If I ommit rendered="#{faseController.invullingSelected}" everything works fine, but this causes confusion in the view, since the third panel is now always rendered.
All three panels are located in the same form. My backing bean is ViewScoped. What am I doing wrong? Any help woud be greatly appreciated.
This can happen if you're doing business logic in an getter method instead of in an (action)listener method. I also wonder if you really need to execute and render the entire form. Try to be more specific in specifying the elements which are to be executed and/or re-rendered.
The question is way too broad and the code is not complete enough in order to pinpoint the real cause and propose the a ready-to-use solution.
Try using this.
<a4j:commandLink action="#{faseController.selectInvulling}" execute="#this"
render="thirdPanelId" limitRender="true"/>
Execute only the components which you want to process and render only the components which needs to be refreshed.