I've two radio button which are backed by two instance variables of a Backed bean in JSF{That is the requirement, not to bind with one variable.}. And, If one is checked, other one should be disabled. Below is my code, What is the wrong with it? Why it doesn't work as I expected.
appropriate help appreciated.
<h:graphicImage url="/images/orange_arrows.gif" />
<h:outputLabel for="addBundle">
<h:outputText value="Subscribe Bundle :" styleClass="item-name"/>
</h:outputLabel>
<h:selectOneRadio id="addBundle" value="#{accountAdjustmentBean.bundleAdded}" required="false"
onchange="enableSubmit( this.checked != bundleAdded );disableRadioButton('unsubscribe');">
<f:selectItem id="subscribe" itemValue="true"/>
<h:message styleClass="errors" for="addBundle"/>
</h:selectOneRadio>
<h:panelGroup/>
<h:graphicImage url="/images/orange_arrows.gif" />
<h:outputLabel for="removeBundle">
<h:outputText value="Unsubscribe Bundle" styleClass="item-name"/>
</h:outputLabel>
<h:selectOneRadio id="removeBundle" value="#{accountAdjustmentBean.bundleRemoved}" required="false"
onchange="enableSubmit( this.checked != bundleRemoved );disableRadioButton('subscribe');">
<f:selectItem id="unsubscribe" itemValue="true"/>
<h:message styleClass="errors" for="removeBundle"/>
</h:selectOneRadio>
<h:panelGrid columns="1" styleClass="adjustments-submit">
<h:commandButton id="submitBtn" action="#{accountAdjustmentBean.addDataBundleAction}"
value="Submit"/>
<f:verbatim>
<script type="text/javascript">
function enableSubmit( enable ) {
document.getElementById('ccAcountStatus:submitBtn').disabled = !enable;
}
// Disable submit button on load (enable when account locked status changes)
enableSubmit(false);
function disableRadioButton(elementId) {
document.getElementById(elementId).disabled = true;
}
// save the account locked status at page load. used to detect if changed.
var bundleadded = </f:verbatim><h:outputText value="#{accountAdjustmentBean.bundleAdded}"/><f:verbatim>
</script>
</f:verbatim>
The radio buttons are not connected to each other.
What you could do is bind only one and use script to unselect the other. In your bean do the same, when Boolean a is set to true, set b to false and the other way around.
Related
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>
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
<h:selectOneMenu class="medium" id="state" value="#{locationDataBean.stateSelected}" required="true" requiredMessage="Select State">
<f:selectItem itemLabel="Select State" itemValue="-1"/>
<f:selectItems value="#{systemResultViewUtil.stateList}"/>
<a4j:ajax event="change" listener="#{locationServiceBean.retrieveStateDetails()}" render="district,taluka,centerNameList1,stateMsg"/>
</h:selectOneMenu>
<h:message for="state" style="color: red" id="stateMsg"/>
This is the JSF tag that i have been using and the value="#{locationDataBean.stateSelected}" already contains the vlaue from the back bean. but still i dont get a the value selected on the page in chrome. it shows a blank record on the page. the value is obtained on the page and even when i inspect the element it shows the following html script
<option value="55" selected="selected">466-Assam </option>
but then also the value is not shown on the page.
If the selectbox HTML looks right yet you cannot see it on the rendered page, maybe your CSS class medium is defined to hiding it? Try removing the class attribute and see if this has any effect.
Did you try any other browser ?
Try value change listener in h:selectOneMenu element itself like
<h:selectOneMenu class="medium" id="state" value="#{locationDataBean.stateSelected}" required="true" requiredMessage="Select State" valueChangeListener="#{locationServiceBean.retrieveStateDetails}">
<f:selectItem itemLabel="Select State" itemValue="-1"/>
<f:selectItems value="#{systemResultViewUtil.stateList}"/>
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;
}
}
Richfaces 3.3.3, Jsf 1.2:
I have a a4j:form that uses some simple validation, mainly required="true" to ensure the form does not get submitted without some necessary data.
I also have some complex data to add (optionally) to the form, so I thought the best way to do this is to have a a4j:commandButton that displays a rich:modalPanel where the user can create the complex data set.
The created data is also displayed in a h:selectManyListbox that is reRendered when the modalPanel is closed.
That's the plan, at least. I have the following problems:
reRender works, but only if I prevent validation via immediate="true" - which in turn seems to prevent the selected data from the modalPanel to be present in the backing Bean
if I remove the immediate tag, the data gets updated, but only if there are no validation errors
What is the best way to get this to work the way I want? Is there another, better way?
UPDATE:
The Validation that fails is in some different part of the form, not in the data entered via the modalPanel, which is displayed in the Listbox
CODE:
modalPanel:
<rich:modalPanel id="addTrimming" domElementAttachment="parent" width="150" height="130">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Define Filter" />
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/close.gif" styleClass="hidelink" id="hidelinkAddTrimming"/>
<rich:componentControl for="addTrimming" attachTo="hidelinkAddTrimming" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<h:panelGrid id="trimsettings" columns="3">
<h:outputText value="Target:" style="font-weight:bold"/>
<h:inputText id="target" label="XML Filename" required="true" value="#{xmlCreator.trimTarget}">
</h:inputText>
<h:outputText value=""/>
<h:outputText value="Mode:"/>
<h:selectOneMenu value="#{xmlCreator.trimMode}">
<f:selectItem itemLabel="Quality" itemValue="quality"/>
<f:selectItem itemLabel="after Primer" itemValue="afterPrimer"/>
<f:selectItem itemLabel="fixed" itemValue="fixed"/>
<f:selectItem itemLabel="Median length" itemValue="median"/>
<f:selectItem itemLabel="Motif" itemValue="motif"/>
</h:selectOneMenu>
<h:outputText value=""/>
</h:panelGrid>
<h:panelGroup>
<a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" onclick="from:submit()">
<a4j:support event="oncomplete" ajaxSingle="true" immediate="true" reRender="trimsPanel"/>
</a4j:commandButton>
</h:panelGroup>
</rich:modalPanel>
relevant form part:
<h:outputText value="Trimming:"/>
<a4j:outputPanel id="trimsPanel">
<h:selectManyListbox id="trims" value="#{xmlCreator.selectedTrimmings}">
<f:selectItems value="#{si:toSelectTrimmingList(xmlCreator.trimmings)}"/>
</h:selectManyListbox>
</a4j:outputPanel>
<a4j:commandButton id="addTrimButton" immediate="true" value=" + Trimming">
<rich:componentControl for="addTrimming" attachTo="addTrimButton" operation="show" event="onclick"/>
</a4j:commandButton>
If you do it in one form than you should separate it into two: one will be your main form and another will be form inside modal panel. Thus you'll be able to submit modal panel independently of main form and your submit button in modal panel will look like this:
<a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" reRender="trimsPanel"/>
you should use process with immediate to send modalpanel's data to bean when closing panel with a a:commandButton or a:commandLink.
for this, modal panel data has to be valid as expected, so you will get valid new data and add it to h:selectManyListBox 's bean value and reRender h:selectManyListBox.
this should work. if not please post your a:form and modalPanel code full to check.