I am developing a primefaces web page. The problem i have is that when i try to use a select one menu with primefaces, the menu appears with the color of the button that when clicked shows the menu.
<p:selectOneMenu id="nombre" value="#{actividad.nombre} style="width:150px">
<f:selectItem itemLabel="Nombre" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{actividad.a}" />
</p:selectOneMenu>
If i change it to it appears correctly but i want to use the one from primefaces
to make the interface look good. Any suggestions on why this happens, Thank you!!
Give the correct doctype to your page.
Your page should also have all the required tags properly (<head>, <body> etc)
Validate the output HTML and see if it is validateable. (Note that not all Primefaces components output validateable code)
Check on multiple browsers and see what is happening.
Related
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
View:
<p:dialog header="Search in code tables" widgetVar="dlg" resizable="true">
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId">
<f:selectItems value="#{xxx.tables}" ></f:selectItems>
</p:selectOneMenu>
The z-index for the dialog causes the menu options to hide behind it.
I am following standard example from Primefaces showcase:
http://www.primefaces.org/showcase/ui/overlay/dialog/loginDemo.xhtml
This appears to be a know n issue
http://forum.primefaces.org/viewtopic.php?f=3&t=33972
Can someone suggest a proper fix.
okay I have managed to figure this out.
I was missing a appendTo telling which component to append the select:
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId" appendTo="#this" >
This fixes the z-index as well as adding a scrollbar to the drop down.
I have not been able to find this anywhere so posting this self answer.
Try to use panelStyle for selectOneMenu.
Using appendTo = "#this" may cause something like this:
You could use panelStyle = "position:fixed" instead.
Regards.
Please can anyone explain what the layout property represents in this tag?
<h:selectOneRadio value="" layout="pageDirection" border="1">
<f:selectItem itemLabel="red" itemValue="1" />
<f:selectItem itemLabel="white" itemValue="2" />
</h:selectOneRadio>
Thank you.
See this question: layout with h:selectoneradio.
Basically, JSF can lay out the radio buttons horizontally by layout="lineDirection" or vertically by layout="pageDirection".
Here's the <h:selectOneRadio> reference for you.
Checkboxes and buttons can be set up to either go next to each other on the current line (layout="lineDirection") or stacked vertically, with line breaks after each one (layout="pageDirection").
Since the component is writing a bunch of HTML on your behalf, this just affects how it does it.
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 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