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.

Pressing enter does not hit the expected search button via p:defaultCommand [duplicate]

This question already has answers here:
Submit form with primefaces widgets on enter
(2 answers)
Closed 6 years ago.
I am trying to use primefaces but its not producing expected result. My code snippet is below
<h:form id="searchForm" styleClass="searchForm">
<p:panelGrid columns="3">
<p:commandButton id="left-overlay-btn" value="" styleClass="xschnapp-search-filter-menu" />
<p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />
<p:commandButton value=" " id="searchButton" action="#{cc.attrs.searchAction}" styleClass="xschnapp-search-action" />
</p:panelGrid>
<p:defaultCommand target="searchButton">
</h:form>
In Above code, when I press enter then it hits the first column button and not the expected search even after using primefaces p:defaultCommand.
http://blog.primefaces.org/?p=1787
Someone adviced me to use javascript to manually click search button, thats also failing. Perhaps due to my weak javascript knowledge. Below is code snippet with javascript and that also hit first column button instead of desired search button
<h:form id="searchForm" styleClass="searchForm" onkeypress="if (event.keyCode == 13) {document.getElementById('searchButton').click(); return false}">
<p:panelGrid columns="3">
<p:commandButton id="left-overlay-btn" value="" styleClass="xschnapp-search-filter-menu" />
<p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" />
<p:commandButton value=" " id="searchButton" action="#{cc.attrs.searchAction}" styleClass="xschnapp-search-action" />
</p:panelGrid>
</h:form>
Can somebody please help me.

I have had the same problem defining global hotkey for my enterprise site. The aproach which worked for me is:
<h:form id="form">
<p:hotkey bind="Enter" update="msg" actionListener="#{yourBean.yourSearchfunction}"/>
<p:remoteCommand name="search" actionListener="#{yourBean.yourSearchfunction}" update="msg"/>
//Your code
</h:form>
<h:outputScript>
$(':input').bind('keydown', 'Enter', function () {
search();
return false;
});
</h:outputScript>
With this code regardless where your cursor stays it will start your search function on pressing enter. Maybe you want it a bit more finegrained then you can remove the p:hotkey component to only use to start your search function if the cursor is inside a input field.
The javascript is needed because the p:hotkey component works everywhere except if the cursor stays inside an input field. So you bind your remote comand to the enter event inside every inputfield in the view.

p:commandButton only works with two clicks (JSF 2.2 Bug?)

i'm trying to update (merge) a field from a ListDataModel and I'm experiencing what I think is a bug in Jsf (Mojara) 2.2. The update only works if the PrimeFaces command button is clicked twice. I've read a number of posts on here and tried the solutions but nothing seems to be working:
h:commandButton/h:commandLink does not work on first click, works only on second click
commandButton only works on the second click
p:commandButton with p:fileDownload and no ajax only works in second click
The list comes from
<h:form>
<p:dataTable value="#{proDocFolBean.selectedProDocs}" var="docs">
<p:column headerText="Document Name:">
<h:outputText value="#{docs.docName}"/>
</p:column>
<p:column headerText="Description">
<h:outputText value="#{docs.description}"/>
</p:column>
<p:column headerText="Date Created">
<h:outputText value="#{docs.dateCreated}">
<f:convertDateTime pattern="dd-MMM-yyyy" />
</h:outputText>
</p:column>
<p:column headerText="Classification">
<h:outputText value="#{docs.classification}"/>
</p:column>
<p:column>
*** <p:commandLink value="Update" action="#{proDocFolBean.prepareUpdateDoc}"/> ***
</p:column>
<p:column>
<p:commandLink id="downLoadLink" value="Download" ajax="false">
<p:fileDownload value="#{proDocFolBean.downloadFromFolders}"
contentDisposition="attachment"/>
</p:commandLink>
....
</h:form>
Clicking the Update link in the above form calls a preparedUpdate method in the bean:
public String prepareUpdateDoc() {
docToUpdate = selectedProDocs.getRowData();
selectedId = docToUpdate.getProjectDocId();
docsFacade.find(selectedId);
return "UpdateProDoc";
}
The above method populates the update form:
<h:outputScript name="js/formbugfix.js" target="head" />
<p:inputTextarea rows="30" cols="60" value="#{proDocFolBean.docToUpdate.description}" immediate="true"/>
<p>
<p:commandButton value="Change" action="#{proDocFolBean.updateProjectDoc}">
<!-- <f:ajax execute="#form"/> -->
</p:commandButton>
I included a js script although I realize that PF has already fixed view state through embedded js. I thought possibility including a script as stated in this question.
might solve the problem but it results in the same behavior.
Finally, the form calls the following merge method in the bean:
public String updateProjectDoc() {
docsFacade.update(docToUpdate);
return "ProSysHome";
}
If I try to use an h:commandbutton or set ajax to false using the p:commandButton (without the js script), the form is simply refreshed and the updated value is not merged into the database. If i use the p:commandButton on its own, I am able to get the operation working but only after two clicks. This is very odd behavior and would appreciate any help. Thanks in advance!

Well I think I solved this with Vsevolod's help. First it's totally unnecessary to use a separate js script because as Vsevolod says PF has its own fix.
Using p:commandButton alone I was getting a javascript error
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM94:25 Uncaught TypeError: Cannot read property 'debug' of undefined
It seems that this error comes from the original list form at the point I click the UPDATE link to call the prepareUpdateDoc method and populate the update form. Setting the ajax to false on this column solved the problem:
<p:column>
<p:commandLink value="Update" action="# {proDocFolBean.prepareUpdateDoc}" ajax="false"/>
</p:column>
The form now works after a single click but I would still like to know if the cause was due to two repeated ajax calls (one from the list form p:commandLink and the second from the actual update call by the p:commandButton) and why the js error disappears after setting ajax to false?

I had this "2 click" problem as well. In my case the solution was to use
<p:commandLink value="Update" id="sButton" action="#{myBean.myAction}" update=":myForm"/>
and not
<p:commandLink value="Update" id="sButton" action="#{myBean.myAction}">
<p:ajax event="click" update=":myForm"/>
</p:commandLink>

I had this problem, but in my case there was ajavax.faces.application.ViewExpiredException
Here is a good article about it javax.faces.application.ViewExpiredException: View could not be restored

Primefaces BlockUI doesn't work

I have a Problem with Primefaces BlockUI. After i click on the p:commandButton the form is updated and it shows the correct things, but the blockUI doesn't hide the form.
I found out there are several Problems with blockUI and p:commandButtons which uses update.
<h:form id="form">
<h:panelGroup id="askInput">
<p:inputTextarea id="sparql" value="#{connect.query}" rows="10"
cols="80" rendered="#{resultController.askStatus}"
styleClass="width size" />
<p:watermark for="sparql" value="Ask your Questions here..."
rendered="#{resultController.askStatus}" />
<h:panelGroup rendered="#{!resultController.askStatus}">
<p:dataTable var="result" value="#{resultController.maps}"
scrollRows="20" scrollable="true" scrollHeight="500"
id="results">
<p:columns value="#{resultController.header}" var="column">
<f:facet name="header"> #{column}</f:facet>
<h:outputText value="#{result[column]}" styleClass="size" />
</p:columns>
</p:dataTable>
</h:panelGroup>
<p:commandButton value="Search More NOW" id="searcher"
actionListener="#{resultController.setRs(connect.result())}"
update="form" styleClass="btn btn-primary width" />
<p:blockUI widgetVar="dlg" block="form" trigger="searcher">
LOADING<br />
<p:graphicImage value="./images/ajax-loader.gif" />
</p:blockUI>
</h:panelGroup>
</h:form>
Now i found something interesting in the deployed xhtml page:
<script id="form:j_idt31_s" type="text/javascript">
$(function()
{PrimeFaces.cw('BlockUI','dlg',
{id:'form:j_idt31',block:'form',triggers:'form:searcher'});});
</script>
And
<button id="form:searcher" name="form:searcher"
class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only btn btn-primary width"
onclick="PrimeFaces.ab({source:'form:searcher',update:'form'});return false;"
type="submit">
<span class="ui-button-text ui-c">Search More NOW</span>
</button>
If i copy the function of the script in the javascript console of my browser execute it.
After that exectue the onclick function of the button in the console. everything works.
So my guess is that the script isn't load and therefore it can't be invoked. So any idea how i can invoke it by myself?
If you need anything else i will put it here ;)
THANKS ALOT IN ADVANCE :)

FINALLY FOUND THE ANSWER :)
I had a jquery.js file under my resources. Primefaces provides a jquery.js itself.
After i deleted the jquery.js everything works :)

i found a solution (still not working for me, but for a co-worker of mine)
$(document).ajaxStart(function() {
PF('dlg').show();
});
$(document).ajaxComplete(function(){
PF('dlg').hide();
binding();
});
This shows on EVERY ajax start the BlockUI and hide it after the completion.
Like i said unfortunately doesn't work for me but for my co-worker, so hopefully it helps other people :)

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