JSF select Primefaces selectOneMenu inside dialog hiding menu option z-index - jsf

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.

Related

p:selectOneMenu not refreshing properly when pressing F5

So before anything just to make it clear this is an issue that happens with firefox even in the showcase https://www.primefaces.org/showcase/ui/input/oneMenu.xhtml to replicate just select any value and hit f5 and the value will remain. Also check forum.primefaces.org/viewtopic.php?t=17525 for the details also check how to do autocomplete="off" at form level in JSF other solutions that didn't work for me
I have a little problem when hitting f5 to refresh page for some reason my selectOneMenu its keeping the previously selected value,I need him to have the default value or first one on the array again... any idea how can I fix this? or why does that happen? every other element of the page is succesfully reseting its value, this is the code of my selectOneMenu:
<p:panel styleClass="cds-panel-reset">
<p:selectOneMenu id="somOrigenConsulta" tabindex="1"
binding="#{consultaPagoPremiosMB.somOrigenConsulta}"
label="Origen" widgetVar="wvSomOrigenconsulta"
style="width: 140px !important;">
<p:ajax event="change" process="somOrigenConsulta"
update=":accordion:tbwPagarPremio:frmConsultapagopremioscod:pnlGrdDatosConsulta
:accordion:tbwPagarPremio:frmConsultapagopremioscod:dtbPagopremios"
listener="#{consultaPagoPremiosMB.mostrarDialogoOrigen()}" />
<f:selectItems
value="#{consultaPagoPremiosMB.aOrigenConsulta}" />
<p:ajax process="#this"
render=":accordion:tbwPagarPremio:frmConsultapagopremioscod:pnlGrdDatosConsulta" />
</p:selectOneMenu>
</p:panel>
Also it refreshes succesfully if I refresh by using CTRL+SHIFT+R, any idea why F5 doesn't???
could it be cache? https://www.saicharanreddy.com/whats-the-difference-between-f5-ctrlr-ctrlshiftr-ctrlf5-and-shiftf5-in-google-chrome-browser/
how can I deal with that in a selectonemenu holy..
I did some searching the problem seems to be mozilla, https://forum.primefaces.org/viewtopic.php?t=17525
But im not able to implement the autocomplete=off because it just doesn't appear to be an attribute of my selectonemenu (primefaces 7.0) please help another way to implement this
You can use dynamic="true" attribute. I got the same problem solved using this attribute.
The problem is firefox, it also happens in the showcase.
So I had a headache with this problem and I tried the first solution of this on the selectOneMenu but it didn't work, so I had to use javascript like this:
<script type="text/javascript">
$(document).ready(function(){
var oneMenu = document.getElementById('accordion:tbwPagarPremio:frmConsultapagopremioscod:somOrigenConsulta_input');
oneMenu.value="1";
})
</script>
and it started having always default value 1 when I hit F5, but I'm not 100% sure if this is a good solution.

How to connect a commandButton with CheckBox

In a html page I have a h:commandButton that I want to make it to work in combination with a h:selectBooleanCheckbox, so every time I press the button the checkbox will be checked and otherwise.
Is it possible to do that directly in the html, and not in the java code behind it?
<h:commandButton value="#{userBean.buttonText()}" action="#{userBean.changeOutput()}"/>
<h:panelGrid columns="4" rendered="#{userBean.details}" styleClass="clicked" >
<h:outputText .... />
<h:outputText ..../>
</h:panelGrid>`
If you are using JSF 2, you have to update the area that include your checkbox, using f:ajax tag.
You can find a lot of examples here in stackoverflow, look this example just hide/show a div: After showing / hiding a JSF element with AJAX how to hide the triggering element?
Hope it helps.

Select one many doesn't appear correctly

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.

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

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