I have used p:selectOneRadio in my xhtml page but I am not being able to remove their default style class .ui-helper-hidden-accessible, hence the radio button icons are not being visible.
My code is as follows:
<p:selectOneRadio
id="whetherRegisteredThroughEdistrictApp"
layout="grid" value="#{loginMBean.whetherCitizenUser}"
required="true" requiredMessage="#{i18n['errmsg-req-fields']}"
>
<f:selectItem itemLabel="Yes" itemValue="#{true}" />
<f:selectItem itemLabel="No" itemValue="#{false}" />
<p:ajax event="change" update="notcitizenUserDiv, citizenUserDiv" />
</p:selectOneRadio>
I think Javascript is the best way to do:
$( '#yourDivName input[type="radio"]' ).removeAttr( "disabled" );
or you can find with id end disable the disable attribute.
var radio = $('[id$=radio] input');
radio.attr('disabled','disabled');
Related
I have populated multi select drop down list , i have a scenario like the color of the text in the dropdown should differ based on some condtions . i have populated the values in <f:selectItems>. I have attached the screen shot of the drop down by adding css to rendered html file. How could i add dynamic css for the label
xhtml :
<p:selectCheckboxMenu id="stackListDropDown" filter="true"
style="vertical-align:middle" filterMatchMode="contains"
value="#{stackListForPOCBean.selectedStackListFromDB}"
styleClass="help-inline selectOneMenuDefault">
<!-- <f:selectItem noSelectionOption="false" /> -->
<!-- <p:ajax event="change" process="#this"
listener="#{stackListForPOCBean.subjectSelectionChanged(stack)}" /> -->
<f:selectItems value="#{stackListForPOCBean.stackListFromDB}"
var="stack" itemLabel="#{stack.stackId} - #{stack.stackDesc}"
itemValue="#{stack.stackId}">
</f:selectItems>
<p:ajax update="stackLineGroup" process="#this "
listener="#{stackListForPOCBean.validateMultiSelectStackForPOC()}" />
<p:ajax event="toggleSelect" update="#this stackLineGroup"
listener="#{stackListForPOCBean.validateMultiSelectStackForPOC()}" />
</p:selectCheckboxMenu>
Expected Result using primefaces
I achieved it by the following code,changed to selectManyMenu and added checkbox true
<p:selectManyMenu id="stackListDropDown"
styleClass="help-inline selectOneMenuManyDefault"
value="#{stackListForPOCBean.stackListSelected}" var="t"
filter="true" filterMatchMode="contains" showCheckbox="true">
<f:selectItems value="#{stackListForPOCBean.stackListFromDB}"
var="stack" itemLabel="#{stack.stackId} - #{stack.stackDesc}"
itemValue="#{stack}" />
<p:column>
<h:outputText value="#{t.stackId} - #{t.stackDesc}"
styleClass="#{t.stackColorStyle}" />
</p:column>
<p:ajax update="stackLineGroup" process="#this "
listener="#{stackListForPOCBean.validateMultiSelectStackForPOC()}" />
</p:selectManyMenu>
The link contains an example of richfaces 4 popuppanel:
richfaces popuppanel example
Here is the code:
<rich:toolbar height="26px" id="tb">
<rich:toolbarGroup location="right">
<h:outputLink value="#">
<rich:componentControl event="click" operation="show" target="ls">
<a4j:param name="event" value="event" noEscape="true" />
<rich:hashParam>
<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element('tb')}).offset().top + jQuery(#{rich:element('tb')}).height()" />
<a4j:param noEscape="true" name="left"
value="jQuery(#{rich:element('tb')}).offset().left + jQuery(#{rich:element('tb')}).width() - p_width" />
</rich:hashParam>
</rich:componentControl>
Search
</h:outputLink>
</rich:toolbarGroup>
</rich:toolbar>
<rich:popupPanel header="Enter Search Terms" id="ls" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" >
<h:panelGrid columns="3">
<h:outputText value="Search:" />
<h:inputText />
<h:outputLink onclick="#{rich:component('ls')}.hide(event); return false;" value="#">Search
</h:outputLink>
</h:panelGrid>
</rich:popupPanel>
<h:outputScript type="text/javascript" target="body">
p_width = #{rich:component('ls')}.width();
</h:outputScript>
But the popup is appearing in random places, i.e. sometimes under the bar, and then have to scroll and sometimes above. Is it possible to make sure it always appears right above the bar while being attached to it?
The top and left parameters set the position of the panel, change them to where you want the panel to be, or call the method directly:
RichFaces.component('panelId').show(null, {top: "800px", left: "500px"})
You're using the part of the example that specifically sets the panel under the bar so it shouldn't be surprising when the panel appears there.
I want to implment a scrollbar for a outputLabel but if i use scrollbar component it put every list elment in a new row. The whole output should be disyplayed in one row and the list should be scrollable. Can i fix this problem with a CSS attribute?
i use primefaces 4.0 and jsf 2.1
here is my code
<p:commandButton id="newMessage" update=":contentForm"
actionListener="#{taskboxBean.newMessage}" value="New Message" />
<p:commandButton id="trash"
update=":contentForm, :postForm:tabViewPosts:trashTable, :postForm:tabViewPosts:inboxTable, :postForm:tabViewPosts:sentTable"
actionListener="#{taskboxBean.deleteSelectedTaskbox}" icon="ui-icon-trash" title="Trash" />
<p:scrollPanel>
<ui:repeat var="task_to_user" value="#{taskboxBean.selectedTaskbox.TASKBOX_TO_USERS}">
<p:outputLabel
value="#{task_to_user.USER.EMAIL} #{task_to_user.USER.FIRST_NAME} #{task_to_user.USER.LAST_NAME} #{task_to_user.USER.FIRST_NAME}" />
</ui:repeat>
</p:scrollPanel>
<h:outputText value="#{taskboxBean.selectedTaskbox.TASKTYPE.NAME} " />
<h:outputText value="#{taskboxBean.selectedTaskbox.CREATE_TIMESTAMP} " />
I have 2 command buttons and one select one menu. I need to call a bean method depending on the buttons selected and the currently selected item in the menu.
<h:form id="form1">
<h:outputLabel value="menu:" />
<h:commandButton value ="en" action="#{bean.exec}" >
<f:setPropertyActionListener target="#{bean.menu}" value='en' />
</h:commandButton>
<h:commandButton value ="fr" action="#{bean.exec}" >
<f:setPropertyActionListener target="#{bean.menu}" value='fr' />
</h:commandButton>
<h:outputLabel value="id:" />
<h:selectOneMenu value="#{bean.id}">
<f:selectItems value="#{bean.idlist}" />
<f:ajax listener="#{bean.exec}" render ="form1" />
</h:selectOneMenu>
</h:form>
However, although the first button updates my properties and calls the action method, the second button gives me the following message
WARNING: FacesMessage(s) have been enqueued, but may not have been displayed
and the view doesn't get updated on the fist click. However, immediately on the second click, the properties get updated and so does the view.
How is this caused and how can I solve it?
I did see the log, however I dont understand the error: this is what it shows: form1:j_idt124: Validation Error: Value is not valid What value and where?
It's easier to identify the value if you give all input components an ID and attach a <h:message> to them as follows:
<h:outputLabel for="id" value="id:" />
<h:selectOneMenu id="id" value="#{bean.id}">
<f:selectItems value="#{bean.idlist}" />
<f:ajax listener="#{bean.exec}" render ="form1" />
</h:selectOneMenu>
<h:message for="id" />
This way you will get form1:id as label instead of form1:j_idt124. Alternatively, you can also specify the label of the input component:
<h:selectOneMenu label="id" ... />
As to the "Value is not valid" error, you will get this error when the selected value does not match any one of the available values during processing the form submit. This can in turn happen when the property behind #{bean.idlist} has incompatibly changed during processing the form submit. This can in turn happen when the bean is request scoped. Putting the bean in the view scope should fix it.
See also:
Validation Error: Value is not valid
I would like to insert a <span> into the value of this outputText :
<h:outputText id="jesuis1" value="la quantité nécéssaire : #{editCommandController.myCom.nbreExemplaire*editCommandController.myCom.nbrePage}" />
my goal is to enhance this {editCommandController.myCom.nbreExemplaire*editCommandController.myCom.nbrePage} by css but it generated an error
do you have any idea
You need the escape attribute!
<h:outputText escape="false" value="#any text including el that
evaluates to html tags"/>
or you could use
<h:outputFormat escape="true" value="text with {0} tags>
<f:param value="#{bean.htmlExpression}" />
</h:outputFormat>