values won't change on submit - xhtml

<h:selectOneRadio value="#{listener.values}" onchange="submit();">
<f:selectItem itemValue="v1" itemLabel="value1" />
<f:selectItem itemValue="v2" itemLabel="value2"/>
<f:selectItem itemValue="v3" itemLabel="value3"/>
</h:selectOneRadio>
values is a string value, however i doesn't change when i select the item, when i try to show values its empty

Related

p:selectCheckboxMenu Dynamic CSS

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>

Hide default style class of p:selectOneRadio

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');

Same space between 2 inputText boxes using JSF and CSS

I want to create a JSF form where users can write their name and surname and validate them using JSF validators. The problem is that I would like to set the same space between the 2 inputText boxes in the form, in both cases, when the typed data is correct according to the validator, and when it is not correct. So if between the 2 inputText boxes there are X pixels if the user has not typed anything, when typed name is not correct, the error showing message should be displayed between the 2 inputText boxes and the pixels between them should be also X px. I suppose this is a CSS issue, but I am unable to get it, so any help would be appreciated.
Here is my code
<h:form>
<p:panel id="panelregister">
<h:panelGrid columns="1">
<!--Name-->
<p:inputText id="name" label="name" size="32" maxlength="9"
value="#{mManagedBean.name}">
<f:validator validatorId="packagevalidators.NameValidator"/>
</p:inputText>
<p:watermark for="name" value="Name (*)" />
<p:message for="name"/>
<!--Surname-->
<p:inputText id="surname" label="surname" required="true" size="32" maxlength="9"
value="#{mManagedBean.surname}"
requiredMessage="Must enter a surname">
<f:validator validatorId="packagevalidators.SurnameValidator"/>
</p:inputText>
<p:watermark for="surname" value="Surname (*)" />
<p:message for="surname" />
<p:commandButton value="Submit" action="#{mManagedBean.save}" ajax="false" />
</h:panelGrid>
</p:panel>
</h:form>
You are using h:panelGrid which renders as HTML <table>.
p:message will be rendered as div and by default that div won't have any content so it won't take any space you provide.
One way to do this is to use a h:panelGroup around it and give pre defined height of p:message
Example:
<h:panelGroup layout="block" style="height:27px">
<p:message for="name" />
</h:panelGroup>

Scrollbar for outputLabel

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} " />

reRender a specific row of rich:dataTable

Good Morning!
Is it possible to reRender only 1 specific row of rich:dataTable?
I have a rich:dataTable and, when I do something that I´m sure only 1 row has changed, I need to reRednder only this row, not the entire table. Is it possible? How?
XHTML:
<rich:dataTable id="myTable" value="#{bean.table}" var="me">
<rich:column>
<h:outputText value="#{me.id}" />
</rich:column>
<rich:column>
<h:outputText value="#{me.valueOne}" />
</rich:column>
<rich:column>
<h:outputText value="#{me.valueTwo}" />
</rich:column>
</rich:dataTable>
<some:tag.... reRender="??????" action="bean.example" />
Java:
public void example{
// Do something that affects to the row selected
}
THANK YOU VERY MUCH.
Yes , it is possible . You have to specify the followings things:
Which columns to be rendered via the reRender attribute of the tags that can invoke MBean method
What rows to be rendered via the ajaxKeys attribute of the rich:dataTable .
The ajaxKeys attribute is bound to Set <Integer> Object which holds the row numbers to be updated.
For example , suppose you want to invoke a Mbean method using a4j:commandButton and want to render a particular row and column after the action finishes . You can use the following :
<a4j:commandButton action="#{bean.someAction}" reRender="columnID,columnID2">
<f:setPropertyActionListener value="#{idx}" target="#{bean.selectedRow}" />
</a4j:commandButton>
<rich:dataTable id="myTable" value="#{bean.table}" var="me" ajaxKeys="#{bean.rowsToUpdate}" rowKeyVar="idx">
<rich:column id="columnID">
<h:outputText value="#{me.id}" />
</rich:column>
<rich:column id="columnID2">
<h:outputText value="#{me.valueOne}" />
</rich:column>
<rich:column>
<h:outputText value="#{me.valueTwo}" />
</rich:column>
</rich:dataTable>
Inside the bean.someAction() , you add the row number that you want to update to the rowsToUpdate integer set:
HashSet<Integer> rows = new HashSet<Integer>();
rows.add(selectedRow);
setRowsToUpdate( rows );

Resources