I have a list of values from ,from the list of values i want to check some values means at that corressponding text box will show in bottom.Otherwise the text box will be hidden.I have done this process using javascript. But my issues is i have to validate using required=true attribute. But the problem is the hidden text box also validated.
Primefaces pages for List values:
<p:selectManyCheckbox onchange="checkValue();" value="#{volunteerBean.knowAbt}" layout="pageDirection" id="s" immediate="true" required="true" requiredMessage="Select how to konws about cv?" style="width:300px;height:170px;">
<f:selectItems value="#{volunteerBean.hearLst}" var="he" itemLabel="#{he}" itemValue="#{he}" />
<p:ajax event="change" update="msg1111" />
</p:selectManyCheckbox>
Input Text Box coding:
<p:inputText style="display:none;" id="searchEngine" value="#{volunteerBean.searchEngine}"><p:watermark for="searchEngine" value="Search Engine"/>
JavaScript for hidden and show inputText through checking the list of checkBox:
function checkValue() {
var chk = document.getElementById("volunteerForm:s:10");
if (chk1.checked) {
document.getElementById('volunteerForm:searchEngine').style.display='';
}else {
document.getElementById('volunteerForm:searchEngine').style.display='none';
}
}
I am using primefaces 3.0 and jsf 2.0. How to solve it
You're changing only the HTML DOM tree and you're not changing the JSF component tree. JSF is not aware at all that the HTML element has been hidden in the client side. You need to show/hide the JSF component instead by its rendered attribute and include its client ID in the <p:ajax update>.
<p:selectManyCheckbox ... value="#{volunteerBean.knowAbt}">
<f:selectItems value="#{volunteerBean.hearLst}" />
<p:ajax event="change" update="msg1111 searchEngine" />
</p:selectManyCheckbox>
<p:inputText id="searchEngine" ... rendered="#{volunteerBean.knowAbt.contains('valueOfItem10')}" />
where valueOfItem10 is the exact value of the item at index 10, like as you tried to check in JS. Note that I assume that knowAbt is a List<String>, exactly as your hearLst suggests (for which I have removed the superfluous var, itemLabel and itemValue from the above example as they are the defaults already). Otherwise you'd need to perform the job in a helper method of the backing bean instead.
Related
I have simple button and input text:
<p:button id="someBtnID" value="Join" />
<p:inputText id="someID" placeholder="ID" />
I want on button click get value from input text, concat it and do redirect.
For example: I have link domain.com/folder/action=
input text value = 11025
I need concat value from input text here and do redirect to domain.com/folder/action=11025
Can I do it without binding with any bean in JSF but on frontend?
I want to validate my inputText field, which is in a popupPanel. It should contains only numbers.
<h:form>
<h:outputText value="Input:"/>
<h:inputText id="myID" value="#{myBean.field}"
validatorMessage="Only numbers">
<f:validateRegex pattern="([0-9])*$" />
<rich:validator />
<a4j:ajax event="change" render="msgValidator" />
</h:inputText>
<h:message id="msgValidator" for="myID" styleClass="text_colorRed" />
</h:form>
After all I want to save all with button. If the input is correct I want to close the popup, otherwise I want to re-insert the correct input without closing popup.
<a4j:ajaxButton type="submit" value="Save" styleClass="text_weigthBold"
action="#{myBean.save()}" render="myTable"
oncomplete="#{rich:component('myPopup')}.hide();" execute="#this">
</a4j:ajaxButton>
Unfortunately when I type wrong input and click two times on the button, it save the request and close the popup without requesting to input the correct text.
I also used a Java validator but the behavior is still the same.
What can I do to correct this bug?
This is because you're closing popup unconditionally. You must check yourself if validation was OK. In JSF 2.0 you can use FacesContext#isValidationFailed().
<a4j:commandButton execute="#form" value="Save" styleClass="text_weigthBold"
oncomplete="if (!#{facesContext.validationFailed}) {#{rich:component('myPopup')}.hide();}"
action="#{myBean.save}" render="myTable" />
To check also other errors you can use facesContext.maximumSeverity.ordinal gt 0 or facesContext.maximumSeverity != null.
I don't know RF 3.X (and you didn't tell if you're using RF 3 or 4) but it looks like it never had component named a4j:ajaxButton, did you mean a4j:commandButton? Also note that I've changed action="#{myBean.save()}" to action="#{myBean.save}" which is corrent.
Resolved. In the form there were some h:checkbox, I remove the checkboxes and now it works fine. I dont know why the Richfaces checkbox doesn't work correctly but I replace them with HTML checkbox.
I have a datatable which has a column with a value of commandlink. I want to change the background color of that row, when the user click the commandlink. Any idea?
<o:column id="name" width="8%"
class="result_col" sortingComparator="caseInsensitiveText">
<f:facet name="header">
<h:outputText value="#{message.label_name}" />
</f:facet>
<o:commandLink
action="#{page.getName(name)}"
onajaxend="openHistoryName();">
<h:outputText style="color:#A3A7DC;" value="Click here" />
</o:commandLink>
</o:column>
o:column does not support the class attribute.
Use styleClass instead.
Since you are making an AJAX call on the click of a button, you have two options:
Pass the new CSS styleClass as a response. Ex:
<o:column styleClass='#{someManagedBean.className}'.../>
So when you render your datatable/row, you get the updated style applied automatically.
Using JS/jQuery, you have to manually trigger the updated CSS on the 'onajaxend' method. For this you would need to understand the HTML code that is generated by openfaces. Based on selectors, you can apply the CSS changes.
I am using a SEAM based JSF web application. I have a simple form that includes a lookup (pop up window) that retrieves a Category name and ID (both are retrieved with no issues and are stored in myView). When the look up returns, the Category name is used to populate "selectedCategoryName" (using Jquery).
The issue comes when you try to submit the form, and another field fails validation (simple required field missing). All of my other fields remain unchanged, but selectedCategoryName is cleared (even though the bean still has it's value, so fixing the validation error and resubmitting resolves to a proper submit). So my question is, how can I maintain showing the value that's in "selectedCategoryName" when the form validation fails?
Thanks in advance!
<s:decorate id="selectedCategoryField" template="/layout/edit.xhtml">
<span>
<h:panelGroup rendered="#{! myView.persisted}">
<img class="lookup" src="${request.contextPath}/images/lookup.gif" width="15" height="14" alt=""
title="Category Lookup"
onclick="return openNewWindow('${CategoryLookupUrl}?#{myView.lookupParameters}', 'id');"/>
</h:panelGroup>
<h:inputText id="selectedCategoryName" required="true"
value="#{myView.selectedCategoryName}"
size="50"
readonly="true">
<a:support event="onchanged" reRender="selectedCategoryField" ajaxSingle="true"/>
<a:support event="oninputchange" reRender="selectedCategoryField" ajaxSingle="true"/>
</h:inputText>
</span>
The problem is, that actually the bean does not hold the selected value because of readonly="true". When you apply that property to an UIInput the UIInput will not be processed on a submit.
To fix this you can do the following:
If you use JSF2 you can use readonly="#{facesContext.renderResponse}" instead.
If not, define a method isReadonly on your backing bean and use readonly="#{myView.isReadonly}".
public boolean isReadonly() {
return FacesContext.getCurrentInstance().getRenderResponse();
}
Have a look at the following similiar question and especially the answer for more details on why this works:
Data in <h:inputText readonly="true"> disappears when command button is clicked
I am using JSF2 and Java to build a web application. I want to build a form like the one at the picture below:
When somebody unchecks the checkbox the form should disappear:
Here is an example with gwt.
So far,
I tried some stuff with the <f:ajax> tag and an PropertyActionListener in the managedBean but it didn't work. Can somebody give me an example or at least some hints to accomplish my goal. I would be really thankfull
Use <f:ajax render="idOfPanelContainingInputFields"> in the checkbox and give the component containing the input fields a rendered attribute which depends on the checkbox's state. No need for another JS code clutter.
<h:form>
<fieldset>
<legend>
<h:selectBooleanCheckbox binding="#{showUserInfo}">
<f:ajax render="idOfPanelContainingTextBox" />
</h:selectBooleanCheckbox>
<h:outputText value="User information" />
</legend>
<h:panelGroup id="idOfPanelContainingTextBox" layout="block">
<ui:fragment rendered="#{not empty showUserInfo.value and showUserInfo.value}">
<p>
<h:outputLabel for="firstName" value="First name:" />
<h:inputText id="firstName" value="#{bean.user.firstName}" />
</p>
</ui:fragment>
</h:panelGroup>
</fieldset>
</h:form>
The above example binds the checkbox to the view, you can of course also bind it to a boolean bean property, you can then remove the not empty check from the rendered attribute.
<h:selectBooleanCheckbox value="#{bean.showUserInfo}">
...
<ui:fragment rendered="#{bean.showUserInfo}">
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
As suggested by amorfis, the idea of using Ajax here is not the best solution, as you will do a call to your server for a client-side manipulation.
The best solution is to use Javascript to hide your component(s). For example, if all your labels and input texts are nested in a <h:panelGrid> component, you can do that:
<script type="text/javascript">
function hideOrShow(show) {
// Get the panel using its ID
var obj = document.getElementById("myForm:myPanel");
if (show) {
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
</script>
<h:form id="myForm">
<h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/>
<h:panelGrid id="myPanel" columns="2">
...
</h:panelGrid>
</h:form>
You could do it by jQuery, or another JavaScript. It is also possible by <f:ajax>, but it connects to the server, which you don't need here.
By jQuery you can just hide the form, not changing the DOM. As far as I understand, it should be enough.
Post some .xhtml if you want more :)