We Keep Coding

Closing popup only if the form is valid

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.

How to prevent PostBack without using JavaScript?

I have an asp button in default.aspx:
<asp:Button ID="Button1" runat="server" Text="Button" />
And there is a procedure in default.aspx.vb:
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Panel1.Controls.Add(New LiteralControl(Date.Now))
End Sub
And teacher asked me, how to make exactly same operation (when click on button, shows up a date) but without postback and without javascript code. I could make a java code there and use OnClientClick="return false" but it seems not right

Refer The Client Side of ASP.Net Pages
You can't do. The default behaviour of Button(input type=submit) is to submit/post the form to the url specified in the form's action attribute.
If you want to prevent default behaviour you need to write a javascript return false
<asp:Button ID="btn" OnClientClick="return false" runat="server" Text="Button" />
By Default asp.net post the form to the same page itself. We say this as PostBack. See the form tags action value from rendered html in browser , it will be the same page name
<input type =submit name ="btn" id="btn"
onclick="javascript:__doPostBack('btn','')"value ="Button">
The following built in javascript code does this
<script>
function __doPostBack(eventTarget, eventArgument) {
document.Form1.__EVENTTARGET.value = eventTarget;
document.Form1.__EVENTARGUMENT.value = eventArgument;
document.Form1.submit();
}
</script>
Your page will have the below fields added automatically, inorder to detect which event needs to be fired in server side. you can access simply in a request parameters like Request.Params["__EVENTTARGET"]
<input type =hidden name ="__EVENTTARGET" value ="">
<input type =hidden name ="__EVENTARGUMENT" value ="">

Required JSF input component which is hidden by JavaScript is still validated

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.

How to invoke a p:commandButton by JavaScript on enter keypress?

I have write a and a in my page.
When enter key was pressed ,I want to do any js check, if success post an action.
Javascript：
function text_onkeypress() {
if(event.keyCode==13){
formSubmit();
}
}
HTML:
<p:inputText id="context" value="#{bean.fileName}"
onkeydown="text_onkeypress();"></p:inputText>
<p:commandButton id="search" value="submit" onclick="return formSubmit();"
action="#{action.getResult}" ></p:commandButton>
when I write query("#search")[0].click() in the javascript.It can do the check, but can't do action="#{action.getResult}".
I don't know how to do the losted action.

The easiest way for you to submit your form from Javascript is to just invoke the click() event for the jQuery object of the <p:commandButton>.
Most of the Primefaces components can be accessed from Javascript by declaring the widgetVar attribute. This attribute creates a Javascript variable. Eg.
<p:commandButton id="search" value="submit" onclick="return formSubmit();" action="#{action.getResult}" widgetVar="searchClientVar" />
I can now access the variable in the formSubmit function. This Javascript variable has an attribute called jq which references the underlying jQuery object and what you can use to invoke the click event.
function text_onkeypress() {
if(event.keyCode==13) {
searchClientVar.jq.click();
}
}
This will invoke the server side action of the commandButton and submit the form values if they pass validation.

What kind of checks do you need?
You don't need to manually submit on enter(especially when you have just one form).
If you want to submit the form only if the user enters something you could take advantage of validateLength tag.
<h:outputLabel for="firstname" value="Firstname: *" />
<p:inputText id="firstname"
value="#{personBean.firstname}"
required="true" requiredMessage="You have to enter your name" label="Firstname">
<f:validateLength minimum="2" />
</p:inputText>
<p:message for="firstname" />
See here a demo: http://www.primefaces.org/showcase-labs/ui/pprAjaxStatusScript.jsf
PS:What PF version do you use?

Show/hide another input fields using h:selectBooleanCheckbox

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 :)