h:selectOneMeny valueChangeListner is not working - jsf

I am using h:selectOneMenu for dropdown but the valueChangeListner is not firing.
I can not use submit() onChange as it will refresh my entire page and i will lose the selected values for other components. Please suggest how to fire valueChangeListner without affecting other components on the page.
The h:selectOneMenu implemented like below:
<h:selectOneMenu id="Q1List"
value="#{myBean.q1Value}" onclick="showHideQ1()"//To open another field based on value selected, working fine
valueChangeListener="#{myBean.q1ValueChangeListner}">
<f:selectItem itemValue="" itemLabel="Make a selection"/>
<f:selectItems value="#{RateComparision.q1OptionsList}" id="dr1"/>
</h:selectOneMenu>
Note: i can not use ajax or anything like that as my page is not supporting them.
Any JS solution or component property may help me.
Thanks,
Mahesh

Related

JSF h:selectOneMenu wont call relevant setter method

Hi I've got a question
<h:selectOneMenu id="cmbFileStatus1" disabled="#{!schedulerController.oldFile}"
value="#{schedulerController.test}">
<f:selectItem itemValue="#{null}" itemLabel="--Show All--" noSelectionOption="true"/>
<f:selectItems value="#{schedulerController.statusList}"/>
<f:ajax execute="#this" render="dataTable"/>
</h:selectOneMenu>
The above code the ajax executes(I checked through firebug). But the thing is the selected value wont be set to h:selectOneMenu value parameter.
There is a h:form tag that is wrapping this element, plus there are two other elements similarly using ajax as shown here. But they are positioned before this element in the DOM, they call the relevant setter methods and the updates the bean variables.
But this element it doesn't set necessary selected value.
Also another detail, the list that is populated for selection, it is a list created from enum values.
One instance I moved the problematic code to the top of the DOM (before the other two elements that ajax is applied) and then it hit the setter method when ran in debug mode.
I cannot understand whats wrong, it doesn't show any javascript errors and such. The JSF version is 2.0, this is an old project.
Any ideas guys?

onchange="submit()" reloads my PrimeFaces Mobile page

I am having a problem with my JSF project, where I am using PrimeFaces Mobile. This page has several pm:views
I have a list of radio buttons, which looks like this:
<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter"
onchange="submit()"
valueChangeListener="#{bean.elementChanged}">
<f:selectItems value="#{bean.currentItem.elements}" var="element"
itemLabel="#{element.elementName}" itemValue="#{element}" />
</p:selectOneRadio>
My valueChangeListener looks like this:
public void elementChanged(ValueChangeEvent e) {
currentElement = (Element) e.getNewValue();
System.out.println(getCurrentElement().getElementName());
}
The problem is, whenever I click on a radio button element, my page completely reloads to the start view, which has to do with the onchange="submit()". I have also tried f:ajax elements, but this doesn't seems to be working with my radio buttons, because I can't click them when I use this.
Is there a possiblty to just submit my current form or pm:view (without the f:ajax)?
PS: I have also tried exactly this on a single PrimeFaces Mobile page, which completely worked, since the application just consisted of one page.
When using PrimeFaces components, you should be using <p:ajax> instead of <f:ajax>. Just get rid of the onchange="submit()". This indeed invokes a synchronous (non-ajax) form submit which totally explains the page reload. You also need to replace valueChangeListener by <p:ajax listener>. The valueChangeListener is the wrong tool for the job whereby you're merely interested in invoking a JSF action method when the newly selected value is being set.
All in all, the rewrite should look like this:
<p:selectOneRadio value="#{bean.currentElement}" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{bean.currentItem.elements}" var="element"
itemLabel="#{element.elementName}" itemValue="#{element}" />
<p:ajax listener="#{bean.elementChanged}" />
</p:selectOneRadio>
Don't forget to remove the ValueChangeEvent argument from the elementChanged() method. In order to access the selected value, just access the currentElement property directly.
See also:
When to use valueChangeListener or f:ajax listener?

h:selectOneRadio doesn't work with ajax change event

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

Richfaces: rich:select click event fails

I am using a rich:select, which I want to repopulate when it is clicked on the page. I tried this using a4j:ajax listening for the onClick-Event, but it seems like it is never received. For testing purposes I added an alert to the control, that is shown after an unpredictable number of clicks. The code in my Backing Bean is never called.
If I change the control to h:selectOneMenu it works, but the list collapses immediately so that the users cannot select an item. Additionally the manual input is a required feature.
Code in my JSF-Page:
<rich:select id="auftragsIdsCombo" value="#{einsatzController.einsatz.auftrag.id}" enableManualInput="true" onclick="alert('hi')">
<f:selectItem itemLabel="" noSelectionOption="true" />
<f:selectItems value="#{einsatzController.auftragsIds}" />
<a4j:ajax event="click" render="auftragsIdsCombo" listener="#{einsatzController.loadAuftragsIds()}"/>
</rich:select>
Maybe there is another way of doing this, wich I am not aware of. I just want to load the items after clicking on the Dropdownbox, so that the users can either select one or use autocompletion by typing into the control.
Regards

How to use ajax to re-render selectManyCheckbox from selectOneRadio

I'm trying to use a selectOneRadio to redraw some of my components (namely enabling/disabling them). I've tried just using the id of my selectManyCheckbox; didn't work. I also tried putting the selectManyCheckbox inside of a h:panelGroup; also didn't work. I'm pretty sure my tags are properly created, since I don't know how else it could work.
This is what I have so far:
<tr:selectOneRadio id="useFilterChoices" value="#{randomCardBean.useFilters}">
<f:selectItem itemLabel="All Cards" itemValue="allCards"/>
<f:selectItem itemLabel="Filter By Category" itemValue="someCards"/>
<f:ajax event="click" render="categoryChoicesBox"/>
</tr:selectOneRadio>
<tr:selectManyCheckbox id="categoryChoicesBox" disabled="#{randomCardBean.filterDisabled}" value="#{randomCardBean.selectedFilters}">
<f:selectItems value="#{randomCardBean.filterChoices}"/>
</tr:selectManyCheckbox>
I'm using selectOneRadio because I want to be able to extend the filter options eventually. Any help on this would be MUCH appreciated!

Resources