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.
Related
I have to validate that a field in a form is not empty.
The problem is that the form is in a JQueryUI dialog (since I don't know how to create "windows" in JSF), so when I click the commandButton the page is refreshed and the JQuery dialog is lost. After refreshing, I can see the error message was printed in the page code by looking at the source code. If I use ajax in the commandButton then the page is not refreshed but I don't get the message printed, I got it as a sort of "Javascript alert" in the browser.
How can I get the error message without refreshing the page?
<h:inputText value="#{myController.name}" id="myname" required="true" requiredMessage="Name required">
<f:ajax />
</h:inputText>
<h:message errorClass="..." for="myname" />
Note: This looked similar to my problem but I don't think the solution is what I'm looking for.
Note: I am not using additional libraries like Primefaces, etc
With the hint of the comment, I was able to solve it this way:
In the commandButton, use ajax with both render and execute (render only doesn't work):
<h:commandButton id="...." action="#{myController.doSomething()}" type="submit" value="Do something">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
Create a "pageUpdate()" method in myController that is called at the end of myController.doSomething(). This way, after the actions, the page is refreshed and the dialog is gone. There are of course other ways to close the dialog, but it is convenient for me to update the page when there is no error in the dialog action, so my objects in memory are updated too.
I think JQuery dialog messes with my styles after the ajax call returns with error, so check that out if you do it.
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
In our application we are displaying the menus dynamically. We have the menu object(menuitems in below code) populated with all the menu items (read from an xml). The home page then generates the menus by usinng ui:repeat. Insdie ui:repeat there are p:commandlink.
Below is the code
<h:form id="mainMenu">
<h:panelGroup id="MMPanel" layout="block" styleClass="left_menu">
<ui:repeat var="node" value="#{menuitems.level1menus}">
<p:commandLink immediate="true" styleClass="menu"
action="#{menuitems.onLevel1MenuChange(node.id)}"
update=":pageTitle :menuLevel2 :menuLevel3" title="#{node.name}"
rendered="#{menuitems.selectedLevel1.id!=node.id}" onclick="menuSelect(this)">
<span class="icon icon_#{node.name}"></span>
<span class="text">#{node.name}</span>
</p:commandLink>
<p:commandLink immediate="true" styleClass="menu activelink"
action="#{menuitems.onLevel1MenuChange(node.id)}"
update=":pageTitle :menuLevel2 :menuLevel3" title="#{node.name}"
rendered="#{menuitems.selectedLevel1.id==node.id}" onclick="menuSelect(this)">
<span class="icon icon_#{node.name}"></span>
<span class="text">#{node.name}</span>
</p:commandLink>
</ui:repeat>
</h:panelGroup>
</h:form>
The menuitems bean is at Session level.
There are two diffeent p:commandlink inside ui:repeat. The only difference between the 2 is in the styleclass and rendered attribute. This is done to identify the default menu item when the user logs for the first time and give it an extra css of "activeLink".
The java script called on onclick is given below (in case it is required)
function menuSelect(selectOne){
$(".left_menu>a").removeClass("activelink");
$(selectOne).addClass("activelink");
removeAllChannels();
}
function removeAllChannels(){
$.atmosphere.unsubscribe();
}
The removeAllChannels is to remove primepush autorefresh channels we have.
The issue i am facing is this.
All the links are getting rendered correctly and in Firebug i see all of them have the same html.
But the one which is generated with the extra css "activeLink" (through rendered condition -- menuitems.selectedLevel1.id==node.id) is not working. Nothing happens when i click this default link. All other links work fine.
So when i click on a different link, it takes me to the required page. But when i click back on the menu which was default, nothing happens
I added a Custom phase listener and saw that all the lifecyle stages are called when this link is clicked but the action method is not.
I went through the links this and this but could not figure out the issue.
Please help.
Do tell me if something is not clear
As part of safeguard against tampered/hacked requests, the JSF component's rendered attribute is re-evaluated during processing the form submit. In case of a command link/button, if it evaluates false, then its action won't be queued/invoked. This matches the symptoms you're seeing.
This can in turn happen if the managed bean #{menuitems} is request scoped and/or when the properties behind #{menuitems.level1menus} or #{menuitems.selectedLevel1} are incompatibly changed during the postback request.
Putting the bean in the view scope and ensuring that the getters do not do any business job should fix this problem.
See also:
How to choose the right bean scope?
commandButton/commandLink/ajax action/listener method not invoked or input value not updated - point 5 applies to you
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)
I am trying to develop a jsf portlet(primefaces 3.2)
I have created a jsf portlet in which i am displaying a datatable.Inside my datable there is one button.
Now when i will click on that button a jsp page should open. its not working actually.
I am trying to achieve it using this way.
<div style="text-align:right">
<p:lightBox iframe="true" width="1000" height="840">
<h:outputLink
value="./next.jsp">
<p:commandButton value="Add" icon="ui-icon ui-icon-plusthick" style="margin:3px;display: table-cell;vertical-align: middle;"/>
</h:outputLink>
</p:lightBox>
</div>
My current portletViewMode.xhtml(portlet display page) and next.jsp are present inside portlet(in xhtml folder).
Its a jsf view(portletViewMode.xhtml) which creates when you create a jsf-portlet ,and in that view I have displayed a datatable inside there is a button.
When I 'll click on that button I should be able to navigate to a jsp page which acts as a light box.. So if I close I should be able to see my previous jsf view.
So I am trying to navigate from jsf view to another jsp page on action of a button(which is a jsf component) .
what should I need to do for that?
Have any one tried navigate from jsf view to any other page.?
You are using the p:lightBox in a wrong way.
Regarding the example on the Primefaces homepage you should use the p:lightBox with iframe="true" in order to display page content.
Wrapping an h:commandButton with an h:outputLink is not the most elegant solution. You could use a simple h:button but it will also work with a h:commandButton:
<p:lightBox iframe="true">
<h:outputLink value="page2.xhtml" >
<h:commandButton action="#" value="Next page" />
</h:outputLink>
</p:lightBox>
Note that the content of the iFrame needs to go in the value attribute of h:outputLink.
Furthermore, JSP and Primefaces won't work. Use facelets only.