I know there some posts similar like this one on the page, but none of the posted answers worked for me.
I have a login form with jsf and I use ajax to reload a panel depending on the user attributes after login. I have two problems:
The first problem is that I canĀ“t make my browser to prompt to save password. I read that if you use ajax for a security reason browsers doesnt store password, is any way to force this? or any workaround?
Problem two (I think simpler) I want to execute the button on enter key.
This is my form:
<h:form id="formLogin">
<h:panelGroup id="pgLogin" layout="block">
<h:panelGroup id="panel1" rendered="#{empty login.sessionUsuario}" layout="block">
<h:inputText type="text" id="userLogin" value="#{login.usuario}" autocomplete="on">
</h:inputText>
<h:message for="userLogin" class="error"/>
<h:inputSecret type="password" id="passwordLogin" value="#{login.password}" autocomplete="on">
</h:inputSecret>
<f:ajax render="pgLogin loginOK" execute="#form" >
<h:commandLink id="btlogin" action="#{login.iniciarSesion}">
<button type="button" id="logIn">Log In</button>
</h:commandLink>
</f:ajax>
</h:panelGroup>
</h:panelGroup>
</h:form>
I assume you want to invoke the submit button from either of the input fields.
Add this script to your page:
<script>
var triggerSubmit = function(event){
if (event.keyCode == 13) {
document.getElementById('btlogin').click();
}
};
document.getElementById('userLogin')
.addEventListener('keypress', triggerSubmit);
document.getElementById('passwordLogin')
.addEventListener('keypress', triggerSubmit);
</script>
Related
When I want to "delete a plane" from my jsf page, if successful the plane deletes, and I do a redirect to the page and show an alert telling the user the plane was succesfully deleted. However, the values the user entered in the h:inputText are still there, they dont empty.
JSF Page:
<h:form>
<h:panelGrid columns="3" class="table">
<h:outputLabel value="Plane ID" />
<h:inputText value="#{listAirplaneBB.airPlaneId}"/>
<h:commandButton value="Delete"
class="btn btn-primary"
action="#{addAirplaneCtrl.deleteAirplane}" />
</h:panelGrid>
</h:form>
Bean code:
public String deleteAirplane(){
//delete the plane
return private/user?faces-redirect=true;
}
Any ideas on why the fields dont empty after redirect?
Maybe your listAirplaneBB is a #ViewScoped bean (cant tell by your example).
In that case you have to clean any particular fields manually before redirecting as JSF keeps alive that bean while the target page has not changed.
I can't change the data information in my jsp page when I submit the form and call a java function(When the button is pressed).
This is a peace of code used in my .jsp form field:
...
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="contactName" value="#{msj.contactName}"/>
<h:inputText id="contactName" value="#{CustodiaBean.name}" required="true">
<f:validator validatorId = "TextValidator" />
</h:inputText>
<h:message for="contactName" styleClass="errorMessage" style="color:red"/>
<h:outputLabel for="contactLastName" value="#{msj.contactLastName}"/>
<h:inputText id="contactLastName" value="#{CustodiaBean.last_name}" required="true" >
<f:validator validatorId = "TextValidator" />
</h:inputText>
<h:message for="contactLastName" styleClass="errorMessage" style="color:red"/>
</h:panelGrid>
<div id="button">
<h:commandLink styleClass="hoveringLink3doubleGreen" action="#{CustodiaBean.updateAccount}">
<h:outputText id="save_button" value="#{msj.save_changes}"/>
</h:commandLink>
<h:commandLink styleClass="hoveringLink3double" action="myAccountCustodia">
<h:outputText id="cancel_button" value="#{msj.cancel}"/>
</h:commandLink>
</div>
</h:form>
...
This is the same piece of code used in other pages like login and register user.
The form fields get the current values in "CustodiaBean", but i try to change the value in the form and when I press the button to check the value(call a function in "CustodiaBean"), I always get the previous value (The new form value is not changed in my class "CustodiaBean").
I'm using a tomcat server and eclipse.
Is necesary to force the field to be bloqued and save the changes when the button is pressed??
I don't know why this is happen. Can anyone help me or give me some advice??
Thanks a lot in advance
Does h:inputText etc also has a property name? Try to see what html is generated. It may be possible that your data is not getting submitted properly. Any HTML form directly submit feilds which are non disabled with the name property of each field. IF id is present and not name, it wont be submitted correctly. Try debugging at browser level or via some firefox plugin like tamper data.
Hope it helps
hi chums I am new to JSF and I got stuck in JSF problem.I want to add dynamically my content in my JSF page.My requirment is that I have one facelets which I have to add in my page after some event.
My page contains
two fields 'user name' and 'answer'
and
two buttons 'login' and 'recover password'
Facelet contains
a field and just a button
Now I want that when I run my this page it should show only Page contents(described above)
and if user press the button 'recover password' then it should show the facelet under the components of page on the same page mean after pressing the button , page could include facelet.
But now when I run my code it show both as I haven't put any logic to add 2nd facelet dynamically.Here a patch of my code given below
<h:inputText id="txtLogin" styleClass="textEntry" required="true" requiredMessage="Username is required.">
</h:inputText>
<h:inputText id="answer" styleClass="textEntry" autocomplete="off" required="true" requiredMessage="Answer is required."></h:inputText>
<h:commandButton id="btnSave" value="Save" styleClass="formbutton" onclick="btnSave_Click" />
<h:commandButton id="btnRecover" value="Recover" styleClass="formbutton" onclick="btnRecover_Click"/>
Now I want when this btnRecover_click click then it include this facelet or run this code
<div class="divPadding">
<ui:include id="passrecov" src="ucPasswordRecovery.xhtml" rendered="false"/>
</div>
Keep in mind that I have to do this with JSF and don't want to do this with JavaScript
Thanks
I'll post a sample using with 1 column, remember that you could use another ui container.
<h:form>
<h:panelGrid id="login">
<h:panelGrid>
<h:inputText id="txtLogin" styleClass="textEntry" required="true"
requiredMessage="Username is required.">
</h:inputText>
<h:inputText id="answer" styleClass="textEntry" autocomplete="off"
required="true" requiredMessage="Answer is required.">
</h:inputText>
<h:commandButton id="btnSave" value="Save" styleClass="formbutton"
onclick="btnSave_Click" />
<h:commandButton id="btnRecover" value="Recover" styleClass="formbutton"
action="#{loginBean.showPassRecovery}" />
</h:panelGrid>
</h:panelGrid>
<h:panelGrid id="passRecovery">
<h:panelGrid rendered="#{not loginBean.loginEnabled}">
<ui:include id="passrecov" src="ucPasswordRecovery.xhtml" />
</h:panelGrid>
</h:panelGrid>
</h:form>
And your managed bean:
#ManagedBean
#ViewScoped
public class LoginBean {
private boolean loginEnabled;
public LoginBean() {
loginEnabled = true;
}
//getters and setters...
//this method will return void, so the page will be refreshed with the new
//loginEnabled value. this time the components inside "login" panelGrid won't be rendered
//but "passRecovery" panelGrid components will.
public void showPassRecovery() {
loginEnabled = false;
}
}
Below is the javascript on my JSP page:
<SCRIPT language="JavaScript">
function checkPass(){
var pass1=request.getParameter('password');
var pass2=request.getParameter('password2');
if (pass1==pass2){
window.alert("YES");
}
else{
window.alert("NO");
}
}
</SCRIPT>
Below is my form input text boxes:
<h:outputLabel value="Password:" for="password" />
<h:inputSecret id="password" value="#{StaffController.staff.password}"
size="20" required="true"
label="Password" >
<f:validateLength minimum="8" />
</h:inputSecret>
<h:message for="password" style="color:red" />
<h:outputLabel value="Password:" for="password2" />
<h:inputSecret id="password2"
size="20" required="true"
label="Password" >
<f:validateLength minimum="8" />
</h:inputSecret>
<h:message for="password2" style="color:red" />
Below is my commandbutton linked with onmousedown to call the script when clicked:
<h:commandButton action="#{StaffController.saveUser()}" onmousedown="checkPass();" value="Submit"/>
I can't seem to retrieve value from my user input form.
JSF changes id of components - view source of your page in browser. It should be something like a combination of form id+component id
Submit command invokes onmousedown event before making submit, so in checkPass you do not have a request object
Better to write a custom validator for checking password
First you require to set in the h:form the value false to the "prependId" attribute to make possible to get the textboxes by id on javascript. Is not recomended to remove the prependId. But it makes to you easier to work with javascript. In other way you could use a field name or css name an other kind of selection (like using Jquery $('.cssname') or $('#cssid')
Now you need to change the javascript. javascript is performed on the client side. You can't get data from the request because the request is not done when the javascript is executed.
You need to get the inputSecret object ,that in the html is an input item, using something like this:
var pass1 = document.getById('password').value;
var pass2 = document.getById('password2').value;
I'm trying to use one <h:commandButton> with ajax to check some conditions, if it's OK the other <h:commandButton> with no ajax will be display. The one with ajax work well, but the other doesn't although I have specified a return String to another page. I cannot figure out why it failed, the syntaxes are all correct.
<h:form>
<label style="font-weight: bold">Room Code: </label>#{r.code}
<label style="font-weight: bold">Room Type: </label>#{r.roomType}
<label style="font-weight: bold">Price Per Day: </label>#{r.pricePerDay}
<br/>
<h:commandButton value="Check" action="#{bookingController.checkRoom}">
<f:param name="selectedRoomID" value="#{r.id}"/>
<f:ajax execute="#form" render="informer"/>
</h:commandButton>
<h:panelGroup id="informer">
<h:outputText value="#{bookingController.message}" rendered="#{bookingController.checked}"/>
<h:commandButton value="Book now!" action="#{bookingController.doBook}" rendered="#{bookingController.goodToBook}">
<f:param name="selectedRoomID" value="#{r.id}"/>
<f:param name="customerID" value="#{customerLoginController.customerUser.customer.id}"/>
</h:commandButton>
</h:panelGroup>
</h:form>
You've a rendered attribute on the second <h:commandButton>. If it evaluates false during processing of the form submit, then the button's action won't be invoked. This will happen if the bean is request scoped and you don't preserve the same condition for the rendered attribute during the form submit request as it was during displaying the form.
There are several ways to go around this. Since you're using JSF 2.0, best is to put the bean in the view scope instead.
#ManagedBean
#ViewScoped
public class BookingController {
// ...
}
See also:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated