I have several inputText boxes on a page with associated edit/submit buttons (which work). I want to make it so that when the user presses enter from inside the inputText box, the form is submitted. For one of my forms, it works, for the other, it doesn't. Here's the one that doesn't work:
<h:form>
<iframe src="#{appInfo.documentation}"/>
<h:commandButton value="Edit" >
<f:ajax listener="#{appInfo.editDoc}" render="#form"/>
</h:commandButton>
<h:commandButton value="Save" >
<f:ajax listener="#{appInfo.saveDoc}" render="#form"/>
</h:commandButton>
<h:inputText value="#{appInfo.documentation}" >
<!-- pressing enter causes page refresh -->
<f:ajax/>
</h:inputText>
</h:form>
And the one that does:
<h:form>
<h:dataTable id="table" value="#{appInfo.model.apps}" var="a">
<h:column>
<f:facet name="header">URL</f:facet>
<h:outputText value="#{a.url}"/>
<h:inputText value="#{a.url}">
<!-- pressing enter does NOT causes page refresh -->
<f:ajax/>
</h:inputText>
</h:column>
</h:dataTable>
... command buttons
</h:form>
Any ideas?
Pressing "Enter" in an input field fires the same behaviour like clicking the first button of that form. In your second example there is no button at all. As soon as you add e.g. a commandButton there (like in the first example), the enter will be executed like expected.
Related
I'm working with JSF 2.2.9, i have the following dataTable and buttons:
<h:commandButton id="commandButtonRemoverSelected"
actionListener="#{managedBeanName.removeSelected()}"
class="btn btn-primary" value="Sim">
</h:commandButton>
<h:dataTable var="bean" value="#{managedBeanName.beans}" styleClass="table table-hover"
binding="#{managedBeanName.dataTable}">
<h:column headerClass="smallColumn">
<f:facet name="header">
<h:selectBooleanCheckbox valueChangeListener="#{managedBeanName.selectAll}">
<f:ajax execute="#form" render="#all" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox value="#{managedBeanName.registrosSelecionados[bean]}" />
</h:column>
</h:dataTable>
The button "commandButtonRemoverSelected" just call actionListener on second click. When i remove the following line from datatabe everything works fine (the commandButton is called on first click):
<h:selectBooleanCheckbox value="#{managedBeanName.registrosSelecionados[bean]}" />
So, my managedBean have a MAP called 'registrosSelecionados' that should store a pair "Bean,Boolean". See:
private Map<Bean, Boolean> registrosSelecionados = new HashMap<Bean, Boolean>();
SOLUTION
I solved the problem with a workaround and i would share this:
1 - I noted that every first commandButton click the 'getRegistrosSelecionados()' is called and actionListener don't. So i imagine that JSF is processing getRegistrosSelecionados() and don't processing actionListener, i don't know why and this is the real problem. In second click the actionListener is processed because all checkboxs already sent to ManagedBean, in first click.
2 - So, my workaround is force that each click in checkbox call JSF request and don't wait for commandButton submit. In this way when commandButton is clicked all checkbox was processed.
<h:selectBooleanCheckbox value="#{cc.attrs.managedBeanName.registrosSelecionados[bean]}">
<f:ajax execute="#this" render="#this" />
</h:selectBooleanCheckbox>
My checkbox received the ajax to execute only itself and render itself, when i click in commandButton i just need execute the commandButton and render the form again:
<h:commandButton id="commandButtonRemoverSelected"
actionListener="#{cc.attrs.managedBeanName.removeSelected()}"
class="btn btn-primary" value="Sim">
<f:ajax execute="#this" render="#form" />
</h:commandButton>
This workaround works for me, as i didn't found a better solution for this problem.
I need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.
I am trying to show a popup menu in by checking some conditions, such as if something is not selected show popup etc. and if everyhing is fine submit the page. Here is the code:
<h:commandButton onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam" >
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Simple popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide();
return false;">
X
</h:outputLink>
</f:facet>
<p>
The popup panel is open and closed from the javascript function of component client side object. The following code
hide this panel:
<f:verbatim>#</f:verbatim> #{rich:component('popup')}.hide()
</p>
</rich:popupPanel>
then after button is clicked, popup shows for like a second and then page is refreshed and popup is lost. To prevent refreshing page i tried:
<f:ajax execute="#form" render="#none" />
but then if everything is right and if i don't need a popup i need to submit the page by commandbutton, but since i say render=#"none" i cannot do this. So what can i do about this situation?
Thanks
<h:commandButton> has a default button type submit which submits enclosing h:form when it is clicked. That is why the page refreshes when you click.
<h:button> should be used for java script usage.In addition, <h:commandButton> becomes <h:button> if type attribute is set to button.
<h:button onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam"/>
Or
<h:commandButton type="button" onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam" >
See Also :
Difference between h:button and h:commandButton
I am using primefaces dialogbox for popup purpose. But everytime it gets opened the whole screen get refreshed automatically and the popup disappears.
< p:dialog id="dialog" header="Select different user" styleClass="atf-header" widgetVar="dlg" appendToBody="true">
<ui:include src="searchpopup.xhtml" />
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header" style="width:600px"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton" style="width:600px">
<h:panelGroup id="input_search_section" >
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show()">
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
You p:commandButton is AJAX button (which is default in primefaces) which submits whole form. Add type="button" attribute to it so it will be just ordinary button which do some JavaScript (so called push button). Also I don't see where is h:form tag here. As you have appendToBody="true" in you p:dialog be shore that you don't encapsulate p:dialog inside h:form. You should have h:form inside p:dialog if it is necessary, and if it is not move p:dialog outside of h:form.
I came to strange behaviour of my application. Command buttons start to invoke actions on second hit. On first - nothing happens. It takes effect on firefox and chromium, but in epiphany works as usual.
My environment:
- ubuntu 11.04
- glassfish 3.1.1
- jsf 2.X
- primefaces 3.2
- firefox 12.0
- epiphany 2.30.6
Code example:
<ui:define name="content">
<h:form id="form">
<h:panelGrid id="panelGrid" columns="3">
<h:outputText value="#{msg.fieUserName}:"/>
<h:inputText id="name" value="#{userBb.editedUser.username}" />
<h:message for="name" styleClass="error_msg"/>
<h:outputText value="#{msg.fieUserDescription}:"/>
<h:inputText id="description" value="#{userBb.editedUser.description}" />
<h:message for="description" styleClass="error_msg"/>
<h:outputText value="#{msg.fieUserPassword}:"/>
<h:inputSecret id="password" value="#{userBb.editedUser.password}" redisplay="true"/>
<h:message for="password" styleClass="error_msg"/>
<h:outputText value="#{msg.fieUserRights}:"/>
<p:selectOneMenu id= "rights"
value= "#{userBb.editedUserGroup}"
converter="#{pGroupOfUsersConverter}">
<f:selectItems
value ="#{groupDao.findAll()}"
var ="row"
itemLabel="#{groupDao.rightsDescription(row.id)}"
itemValue="#{row.groupname}"
>
</f:selectItems>
</p:selectOneMenu>
<h:message for="rights" styleClass="error_msg"/>
<h:outputText value="#{msg.fiePorofolioName}:" rendered="#{userBb.chosenNew}"/>
<h:inputText id="portName" value="#{userBb.portfelForNewUser.nazwa}" rendered="#{userBb.chosenNew}">
<f:validateBean disabled="true" />
</h:inputText>
<h:message for="portName" styleClass="error_msg" rendered="#{userBb.chosenNew}"/>
<h:outputText value="#{msg.fiePotofolioCurrency}:" rendered="#{userBb.chosenNew}"/>
<p:selectOneMenu id= "waldep"
value= "#{userBb.portfelForNewUser.walutaDepozytowa}"
converter="#{igConverter}"
rendered= "#{userBb.chosenNew}"
>
<f:selectItems value= "#{igDao.waluty}"
var= "row"
itemLabel="#{row.nazwa}"/>
</p:selectOneMenu>
<h:message for="waldep" styleClass="error_msg" rendered="#{userBb.chosenNew}"/>
</h:panelGrid>
<h:panelGrid columns="2">
<h:commandButton value="#{msg.butCreate}" action="#{userBb.formCreate()}" rendered="#{userBb.chosenNew}" />
<h:commandButton value="#{msg.butSave}" action="#{userBb.formEdit()}" rendered="#{!userBb.chosenNew}"/>
<h:commandButton value="#{msg.butBack}" action="#{userBb.formBack()}"/>
</h:panelGrid>
</h:form>
</ui:define>
In this example method userBb.formCreate() is invoked only on second click on command button although button is visible. When fields are not properly filled up than appropriate messages appear next to them, but... only on second click! Any advice?
I check out points from: this advice, but not found solution.
Ok, I found what was wrong. So:
Appearance of the problem:
I've got a page for user data. Some input items and command buttons. When clicking "Create" button, input data is checked out. If data is ok user is created and table of users appears, or when there are errors - errors messages appear and user stays on the same page:
I found some erratic behavior. Nothing has happened on first click (action), only second and subsequent actions have an effect. But. This behavior was related to kind of web browser I use.
All actions takes place from the first click, in webrowsers: epiphany and konqueror. Although in firefox and chromium I observed this erratic behavior which I described above. Code for a command button was:
<h:commandButton value="#{msg.butCreate}" action="#{userBb.formCreate()}" rendered="#{userBb.chosenNew}"/>
Different behaviors in different webbrowsers.
The cause.
The cause was enumerated by #Balusc in his note, which I read roughly first time. It was indeed pt. 7.
The solution.
I've tried to change button declaration this way:
<h:commandButton value="#{msg.butCreate}" action="#{userBb.formCreate()}" rendered="#{userBb.chosenNew}">
<f:ajax render="userForm"/>
</h:commandButton>
where userForm was proper id of h:form. No result, still only second and subsequent clicks has an effect - shows error messages.
So I changed declaration command button from previous page, that invoked erratic behavior page. Originally it was:
<p:commandButton value="#{msg.butNew}" action="#{userBb.actionNew()}"/>
primefaces command button. And that was it, as Balusc wrote: "If a parent of the with the UICommand button is been rendered/updated by an ajax request beforehand, then the first action will always fail."
So I changed declaration to:
<p:commandButton value="#{msg.butNew}" action="#{userBb.actionNew()}" ajax="false"/>
And that's it. It works fine in any browser, for the first action.