This question already has answers here:
How to let validation depend on the pressed button?
(4 answers)
Closed 7 years ago.
I want to check the calendar input while the Save button is clicked. It means if I clicked other buttons or do anything else, it would not check input. How to express it ?
Write a button onClick event handler function in javascript
In the onClick event handler function, you can access the HTML document (DOM) ant its elements (For convenience you can use jquery). You can get the attribute value using this.
you can use the required tag in your calendar and use the process tag in your Save commandButton like this:
<h:form>
<p:inputText id="otherinput" value="Other inputs..."/>
<p:calendar id="calendar" required="true"/>
<p:commandButton process="calendar" value="Save"/>
<p:commandButton process="otherinput" value="Other Button"/>
</h:form>
This way when you click the "Save" button it will only process the calendar and not the other elements. Also when you click the "Other Button" it will not check the calendar.
I assumed here that you are using Primefaces as your 3rd party JSF component provider since you didn't mention any, let alone post any sample code you've tried.
Hope this helps
Related
Below is my code:
<h:form>
<p:autoComplete id="autoCompleteID" value="#{myBean.item}"
completeMethod="#{myBean.completeMethod}"
</p:autoComplete>
<h:commandButton action="#{myBean.searchRelatedItems}"/>
</h:form>
Here my scenario is like standard Google search, I can see related Items in suggestion and also redirect another page based on text typed in p:autoComplete text field. Its works fine by click on Button, but I also want to achieve by hitting ENTER in p:autoComplete text field.
A late answer, but I will just leave it here...
Try using a Primefaces commandButton, it is p:commandButton, not h:commandButton.
Make sure the attribute type of the commandButton is "submit" and not "button", "submit" is the default in Primefaces.
Lastly a certain (but nasty I believe) solution is to put an id at the commandButton like "search-button" and an id at the h:form like "searchForm" and put the following at the p:autoComplete or h:form onkeyup="if (event.keyCode === 13) { document.getElementById('searchForm:search-button').click(); return false; }"
Similar topic: Submit form with primefaces widgets on enter
I'm using Primefaces and MyFaces. I would like to use the selectBooleanButton component, to control visibility of other components within a long and rather complex form.
simplified sample code:
<p:selectBooleanButton
onLabel="Comment" offLabel="Comment"
onIcon="ui-icon-check" offIcon="ui-icon-close"
value="#{not empty myBean.comment}"
onchange="toggleDisplay(this.checked,'myForm:commentPanel');" />
<h:panelGroup id="commentPanel"
style="display:#{empty myBean.comment ? 'none' : 'block'}">
<p:inputTextarea value="{myBean.comment}"/>
</h:panelGroup>
The javascript in the onchange attribute simply toggles the display style from none to block and vice-versa to hide or unhide the panel group. I want/need the components to remain in the view, I do not want to use rendered attributes to remove them completely.
Where I get into trouble is because of the EL construct used in the value attribute of the setBooleanButton component. I do realize that this EL statement is not compatible with the set operation, and this results in an exception.
What I want to be able to do is when the form is loaded, have the initial status of the selectBooleanButton components set to 'on' when the comment property has some existing text it, and 'off' when it is empty. I am looking for a way to work around this that would not require me to create a property in the model for each and every instance where I want to hide the panel, as that would result in dozens and dozens of properties because my real world form is very large with many of these comment sections.
I also posted this question on Primefaces forum, and did not receive any answers there either, so at this time there may not be a great solution to this problem, or at least not one that has been shared. What I ended up doing to work around this is to create two versions of the component, and use the rendered attribute to control which one is used, like this:
<p:selectBooleanButton
onLabel="Comment" offLabel="Comment"
onIcon="ui-icon-check" offIcon="ui-icon-close"
value="true" rendered="#{not empty myBean.comment}"
onchange="toggleDisplay(this.checked,'myForm:commentPanel');" />
<p:selectBooleanButton
onLabel="Comment" offLabel="Comment"
onIcon="ui-icon-check" offIcon="ui-icon-close"
value="false" rendered="#{empty myBean.comment}"
onchange="toggleDisplay(this.checked,'myForm:commentPanel');" />
This question already has answers here:
p:commandbutton action doesn't work inside p:dialog
(4 answers)
Closed 6 years ago.
I am currently running my web application in JSF 2.0 and jquery. Moreover i have added jquery dialog. Model dialog is opening properly without any errors. However when i try to submit by ajax input vales on the dialog are not posting to server side.
Please refer below input text and button to submit the values.
Input:
<h:inputText id="routingNumber_1" required="true" class="routingNo"
value="#{paymentInfoController.modelBankInfo.routingNumber}"
valueChangeListener="#{paymentInfoController.getBankByRoutingNumber}">
</h:inputText>
Button:
<h:commandLink styleClass="fll btn2 btnOff mr savepannextbutton"
id="savepannextbutton" style=" align:left;height: 40px; width: 70px;"
value="Confirm" title="Confirm">
<f:attribute name="bank"
value="#{paymentInfoController.modelBankInfo.routingNumber}">
</f:attribute>
<f:ajax execute="#form" onevent="addBankshowSuccessMessage" event="click"
render=":formPaymentInformation:paymentInformationDataTable"
listener="#{paymentInfoController.addBank}">
</f:ajax>
</h:commandLink>
A JS/CSS modal dialog is by design usually repositioned to end of body (to prevent possible browser specific layout/presentation/zindex problems). So, if you have placed the HTML element representing the dialog inside a <h:form>, then the dialog will end up being placed outside any HTML <form> and thus not being able to submit anything to the server.
You need to ensure that the <h:form> is been placed inside the dialog.
Unrelated to the concrete problem, consider looking at a JSF component library which is using jQuery UI under the covers instead of homebrewing/reinventing all the JSF+jQuery matters. PrimeFaces, for example, has a <p:dialog> component as all-in-one solution for this purpose.
I am using PrimeFaces 3.2 with JSF 2 in a glassfish 3.1.2.
I have a <p:dataTable> which displays search results containing information on different issues (the issues are assigned to users).
If somebody clicks on the icon of the assigned user a <p:dialog> pops up.
The user icon and the according dialog are implemented using a composite.
Inside the composite I am using some jQuery functions which need a unique ID for each dialog component - I am not able to find a way to solve this problem.
My investigations so far:
I need to set the widgetVar attribute, which works fine as long as I have only one user in the list but it seems that inside a dataTable the widgetVar is not unique for many composites.
Since the user can be displayed more than one time inside the search result, I am not able to setup an widgetVar like this:
<ui:param name="myWidgetVar" value="widget_#{user.id}" />
and use it this way
<p:dialog widgetVar="#{myWidgetVar}">
also using #{cc.id} does not resolve the problem 'cause it only returns the id of the widget without the naming-container part which is always the same.
I need the complete id as displayed in html (e.g.: form:jdt123:dialog:456) - how can I get this?
Does anyone know what to do?
Thanks Pete
My solution is using #{cc.clientId} which I did not know yet.
This gives me the complete html element id constisting of the series of identifiers glued with the UINamingContainer#getSeparatorChar (e.g.: form:jdt123:dialog:jdt456)
Thanks for the answer. You solved my unrelated problem, but I think I stumbled on another solution for your problem.
From the PrimeFaces user guide (http://primefaces.org/documentation.html):
8.2 EL Functions
PrimeFaces provides built-in EL extensions that are helpers to common use cases.
Common Functions
Component
<h:form id="form1">
<h:inputText id="name" />
</h:form>
//#{p:component(‘name’)} returns ‘form1:name’
WidgetVar
<p:dialog id="dlg">
//contents
</p:dialog>
<p:commandButton type="button" value="Show" onclick="#{p:widgetVar(‘dlg’)}.show()" />
It looks like you would be most interested in the WidgetVar implementation.
I have a main jsf page, it contains a link to a popup window.
I want to update a component of the main jsf page. when i close the popup window.
popup.xhtml:
<h:commandButton value="close" onclick="return window.close();"
action="showDevoir.xhtml">
<f:ajax execute="#form" render=":devoirForm" />
</h:commandButton>
main.xhtml
<form id="devoirForm" >
<p:panel id="devoir" />
</form>
When i close the popup, i want to update the panel component of the form with id="devoirForm"
I see that you're using PrimeFaces.
Just use <p:dialog> instead of window.open(). See also the showcase. This creates a <div> element in the very same window, so you would just have instant access to the main form from there.
Add to your main page a JavaScript function that updates said component. Call it from the onunload event from your popup windows.
I am less familiar with the issue of rerendering a component JavaScript; in the worst of the worlds you can add a commandButton that refreshes the component, make it invisible through CSS, and make the JS launch its click event (like in this example)