I am developing web application using A4J, Richfaces.
One of my requirement is, I need to check if the user has changed any values in the form when he is trying navigate away from the page.
I have save and cancel buttons in the page.
I am using a4j:command button for cancel functionality. Clicking on cancel button should do below things
Check if the user has modified anything in the form (this I am doing by using javascript and have a flag if user changed any values)
Display confirmation box (javascript confirm with values "Do you really want to discard the changes -- YES NO") when user changes form values
If user says YES, then submit the form using AJAX (by using A4J)
My a4j command button code is like this
<a4j:commandButton action="MyClass.cancel_action"
onclick="checkIsPageChanged()"/>
The issue here is, while using using a4j:commandButton, I cannot call the intermediate javascript function (the function which checks if user has updated any values and displays confirmation box) and then submit the request using ajax.
I have looked at the code generated by JSF and the code is like (not the exact but syntact)
<input type="button"
onclick="checkIsPageChanged();AJAX.submit('')/>
The thing is when I click on button, it is calling only checkIsPageChanged() and not calling AJAX.submit().
Any workaround for this will help me.
Thank you in advance.
Use a4j:jsFunction and call that from your a4j:commandButton when the checkIsPageChanged() returns true.
eg.
<a4j:commandButton action="MyClass.cancel_action"
onclick="if(checkIsPageChanged()) { cancel(); }"/>
<a4j:jsFunction name="cancel" action="MyClass.cancel_action"/>
To be more specific we can use:
onclick="if(!isPageChanged()) {return false}"
Returning false will not submit the request.
Related
I have a form with action attribute and within: input text and submit. When the user presses submit, the information they provided will be used to send a text message using Twilio. My question is how do I do this without reloading the page or going to another a page? Instead, I would rather have a cool small animation that displays whether it sent successfully or not, with the page remaining the same.
Thank you for your help. Much appreciated!
I basically did what zeronone said with listener on submit event, but instead wrote "return false;" preventing the page reload. I then included ajax, and the rest of the code remained basically the same.
I have a checkbox:
<h:selectBooleanCheckbox value="#{bean.checkboxValue}"/>
Based on a given scenario, I need to grey-out the box and prevent the user from modifying it. I know disable will do this, but the issue is that disable prevents POST and I need to send the value to my bean whether or not the box is greyed-out.
Is there a way to grey-out and prevent user input without disable?
may be you try this:
1 - Put a styleClass="make-disabled" in your booleanCheckBox;
2 - Use a jquery function to disabled only in view context :
jQuery(document).ready(function(){
//disabled all checks with class make-disabled
$('input[type=checkbox].make-disabled').attr('disabled','disabled');
//configure before submit form to enabled all checks with class make-disabled to send do request
jQuery('#yourFormId').submit(function(){
$('input[type=checkbox].make-disabled').attr('disabled',false);
});});
Sorry my english. I'm brazilian. This example help you?
In our JSF web application, we have an input field where the user can enter a numeric ID, which is then looked up by the app. To help the user, the lookup is bound to "onchange", thus it will be triggered as soon as the user tabs out of the field or clicks elsewhere.
So, user enters "123", presses tab (or clicks), lookup runs. This works fine; however, for usability reasons, we also want to provide a button that users can click on, for users who will otherwise wonder "where should I click to trigger a lookup?". To do this, we'd like to provide something that looks and feels like a HTML / JSF button, but does nothing (as the click will trigger the "onchange" event anyway).
Is there a way to make a JSF button that does nothing? I tried using h:commandButton without the "action" attribute, but it still fires a request.
p:commandButton type="button" will just provide a push button.
Since you tagged this question also as a usability issue, I would advise against a button in the first place if the onchange already triggers the lookup.
From a user's perspective it is confusing whether or not clicking the button is mandatory. After they have entered the field and skipped to the next, they see the lookup occur without clicking the button. If there is a button they will assume it's there for a reason.
The option that I favour in these cases is a onkeypress handler with a timeout of half a second, after which the value is looked up.
In my web application currently there are many pop up windows made by various JS function which i would like to replace with Rich:ModalPanel (I'm using Myfaces 2.0.12 and RichFaces 3.3.3). Below is a typical example i like to replace:
window.open("<%=basePath1%>jsp/custhistory.faces?userid="+pk);
where pk is the value retried from a hidden input such as <h:inputHidden id="userPk" value="#{1234}"/> inside the javascript function and then added to the end of the url above.
Looking at few RichFaces ModalPanel examples (and demos) i can't figure out how i can make the above work using ModalPanel. Can someone please provide an example or a link to a resource o
I have been using Richfaces 4, but the same theory should apply.
The modal panel is essentially a div that can be shown or hidden, so you could add a <ui:include> in there if you specifically need (or want) the panel to be a seperate file.
The modal panel is rendered as part of your page, but is styled as display:none I believe. If this is triggered by a client action you can call the Richfaces API to show the panel on command.
For instance instead of a command(Link|Button) triggering Richfaces.$('elName').show() it could trigger your js function which sets and values/params your modal panel needs and then call .show() itself.
Note: IE and firefox had a truly modal popup. This is not truly modal and javascript will process in the background, and if you do not give focus to the popup panel if the user types it will interact with the application in the background.
I had used a modal js popup to prompt a user with a yes/no question int his type of idiom
if(askUser("some question?")=='yes'){
//some code to do if yes
}else{
//some code to do if no
}
Depending on how generic you want this popup, that is not really possible without using an event that is fired and defining an event handler for that event to handle the rest of the function.
I have a JSF 1.2 Form which is composed of several parts.
I have validation with required tag turned on.
I want to be able to clear a certain part of the form which has required fields so on the 'clear' button i used the immediate tag.
Now the challenge - When pressing the 'clear' button all the values that were filled since the last submission are restored to the last submitted state while I would like only the certain part of the form to be affected. (Meaning, all the values that are not in that part of the form should be sumbitted although the button pressed is immediate)
Is there a way to do this?
EDIT - Can I submit a value after every time it was filled? This might be a solution.
Thanks!
If you want to take some fields along with the cancel button with immediate="true", then you should also put immediate="true" on those fields.
If you want to skip validation on those fields as well, then you need to change required="true" to required="#{empty param['formId:cancelButtonId']}" so that it is only required when the cancel button is not been used to submit the form.
As to submitting the values on change, that's best to be achieved with ajax in combination with a value change listener. To achieve that you would need to upgrade to JSF 2.0 or to introduce an ajaxified JSF component library.