I am trying to autosubmit a jsf form.
I have one inputhidden textbox in the form, where the field value is set from request object.Once its done, the form need to submit automatically.
I have done autosubmit using javascript and also using Primefaces, but I need to do it using Simple JSF stuff.
No need of using richfaces, primefaces.
<h:form id="form">
<h:inputhidden value="#ManagedBean.user"/>
<h:comandbutton action="#{ManagedBean.processAction()}" /> //disabled
</h:form>
if you use jquery, you can add an event listener to the form and check if enter is pressed.
We do this following way with richfaces, but it maps quite simple to jquery:
<rich:hotKey
selector="#searchForm"
key="return"
type="keypress"
handler="if (isValidInputFieldForHotkeyEvent(event)) { event.preventDefault(); jQuery('.searchFormDefaultAction').click(); } else { sendShiftEnter(event); }"
disableInInput="false"
disableInInputTypes=""/>
These are the javascript functions:
function isValidInputFieldForHotkeyEvent(event) {
return event.target.type != 'textarea';
}
function sendShiftEnter(event) {
event.shiftKey = true;
event.ctrlKey = true;
event.altKey = true;
event.keyCode = 13;
event.target.fireEvent("keyPressed", event);
}
You can use plain old javascript? On window load call
document.getElementById('form').submit();
Related
How to trigger primefaces <p:blockUI> using boolean in backing bean? In this showcase, it requires a commandButton to trigger the the blockUI. What I want is block some part of the page base on a boolean in the backing bean. Is this possible? I tried setting the rendered attribute in the <p:blockUI> tag but it still won't work.
Here is my code:
<p:blockUI block="grid" rendered="#{bean.trueValue}"></p:blockUI>
<p:panelGrid id="grid">
-- content
</p:panelGrid>
One way is to call hide() and show() method of BlockUI from Managed Bean.
You can do that by using RequestContext:
RequestContext.getCurrentInstance().execute("widgetVar.show()");
Another is you can pass the variable to JavaScript function and then let the Javascript function take care of that for you.
onClick="func(#{elvariable})"
<script type="text/javascript">
function func(value)
{
if(value==something){
widgetVar.show();
}else{
widgetVar.hide();
}
}
I'm using p:button with onclick action. (I can't move to p:commandButton, because of legacy outcome navigation in faces-config.xml and custom navigation history in db):
<p:remoteCommand name="unlock_tt" actionListener="#{ttEntityMBean.unlock()}"/>
<p:button value="#{msgs['button.ok']}" outcome="#{ttEntityMBean.navigationMenuItemToRedirect.navigationRule}" onclick="unlock_tt()"/>
Generated by primefaces javascript looks like
onclick="unlock_tt(); window.open(....)"
And after clicking button, unlock_tt() in browser initiated, but immediatly broken by page redirecting, so backed java method didn't execute.
Should I make unlock_tt() or java call async to be sure it will be executed before browser leaves page?
Upd: I'm thinking to use p:commandButton, if it is possible to get to-view-id programically, like in this question:
Programmatically get navigation case <to-view-id> from faces-config.xml by outcome
<p:commandButton action="#{ttEntityBean.unlock()}"/>
public String unlock() {
//some business logic
return OutcomeResolverHelper.getRuleFor(navigationMenuItemToRedirect.navigationRule)
}
This should reduce number of requests
I'm not sure this will work but can you try this :
Instead of :
<p:remoteCommand name="unlock_tt" actionListener="#{ttEntityMBean.unlock()}"/>
<p:button value="#{msgs['button.ok']}" outcome="#{ttEntityMBean.navigationMenuItemToRedirect.navigationRule}" onclick="unlock_tt()"/>
do:
<h:panelGroup>
<f:ajax event="click" listener="#{ttEntityMBean.unlock}"/>
<p:button value="#{msgs['button.ok']}" outcome="#{ttEntityMBean.navigationMenuItemToRedirect.navigationRule}" />
<h:panelGroup>
Don't forget to remove onclick and your remotecommand.
This should wrap a panelGroup around your button. PanelGroup implements ClientBehaviorHolder so it can get f:ajax tag in its children. Thus when you click on it it should trigger the listener.
The easiest way was migration from p:button to p:commandButton, which allows to execute some java-code in action method before redirect. The core is programmical translation of navigation rule, defined in faces-config.xml to base url, usable in explisit jsf-2.0 style:
//receive base url from <to-view-id> tag
public static String resolveOutcomeRule(String ruleName) {
FacesContext context = FacesContext.getCurrentInstance();
ConfigurableNavigationHandler configNavHandler = (ConfigurableNavigationHandler)context.getApplication().getNavigationHandler();
NavigationCase navCase = configNavHandler.getNavigationCase(context, null, ruleName);
return navCase.getToViewId(context);
}
//decorate it with faces-redirect=true and our custom navigation
public static String resolveOutcome(NavigationMenuItem item) {
return resolveOutcomeRule(item.getNavigationRule()) + "?faces-redirect=true&menu=" + item.getId();
}
//controller-method
public String cancelEditTT() {
super.unlock();
return FacesUtil.resolveOutcome(getNavigationMenuItemToRedirect());
}
//new jsf button:
<p:commandButton value="#{msgs['button.ok']}" action="#{ttEntityMBean.cancelEditTT}"/>
This solution provided 1-step redirect instead of 2-step old one.
I need to make a calculator in a jsf view using only client-side part. No data can be passed to server-side.
I have the view splitted in a couple of <h:form> with calculator in the middle:
<h:form id="customer_form">
// view here working nice
</h:form>
<h:panelGroup layout="block" styleClass="ui-grid-col-2 offset-boxes" >
<p:panel id="calculator" header="Calculadora" styleClass="half-screen-height calculator-table">
<h:inputText id="result" widgetVar="result" styleClass="result-text"/>
<p:button value="X" widgetVar="X" ajax="false" onclick="calculate('x')" styleClass="right"></p:button>
// more calculator buttons
</p:panel>
</h:panelGroup>
<h:form id="consumption_form">
// view here working nice
</h:form>
Until here all is ok, but when I try to manage calculator with javascript:
<script type="text/javascript">
function calculate(sel){
if (sel == "x") {
document.getElementById("result").value = "";
} else {
var input = document.getElementById("result").value;
document.getElementById("result").setAttribute("value", input + sel);
}
}
</script>
Each time i change result value, server-side is called and value is reset to original value.
EDIT according to PrimeFaces documentation of p:button::onclick event
Client side callback to execute when button is clicked.
Either <h:button> tag is acting like this, so I guess problem is the way JSF or PrimeFaces are handling the javascript event...
I also tried to call and set input value by jquery with $("result").value but the result i get is a function(b7) not the value itself.
What am I doing wrong?
Thanks! ;)
J
you got to make sure you're JS code will not try to submit the form, so that will trigger a server side call, for that I suggest you return false and try using event.preventDefault() on your HTML buttons onclick calls, so you will avoid bubbling up the event to any listeners.
I have a jsf facelet which displays a summary of a search process.
Now I want to redirect to a detail page, if only one element was found by the search engine. I do not want to implement this redirect in my beans because I want to have the "knowledge" about this redirection out of my java code.
So I want to write something like that:
<ui:redirect if="#{searchResult.count eq 1}" target="details.jsf">
<f:param name="id" value="#{searchResult.firstResult.technicalId}" />
</ui:redirect>
Any solutions or ideas for that?
I know, there are page-actions in JSF 2.2 but I am using JEE6 and there is JSF 2.0 available.
Btw. I currently I am usingMyFaces, Primefaces and Richfaces.
Greetings.
You should do this job in the controller, not in the view.
To get search results, you first need to invoke an action method by a search form, right? Just do the redirect job right there. You can tell JSF to send a redirect by specifying the faces-redirect=true in the query string of the action outcome.
public String search() {
results = service.find(query);
if (results.size() == 1) {
return "details?faces-redirect=true&id=" + results.get(0).getTechnicalId();
}
else {
return "results";
}
}
Or if it's a GET request which is handled by <f:event type="preRenderView">, then do so:
public void onPreRenderViewListener() {
results = service.find(query);
if (results.size() == 1) {
FacesContext.getCurrentInstance().getExternalContext().redirect("details.jsf?id=" + results.get(0).getTechnicalId());
}
}
I would say the cleanest way is to generate the action in the bean.
Anyway I would propose you to simulate a click in case your search count is eq to 1 with javascript.
you need an input hidden containing the count:
<h:inputHidden id="count" value="#{searchResult.count}" />
and a hidden button to trigger the redirection:
<h:commandButton id="redirectButton" action="details.jsf" style="display: none;" />
then when you trigger the search, you update the input count and oncomplete you can check
if the value of count is 1, then you can do a click on the commandButton.
If you use Jquery, it would be something like
if($("#count").val()==1){
$("#redirectButton").click();
}
This seems like it should be pretty straightforward but I'm not feeling it.
I have a JSF CommandButton that executes a long running serverside task (10-15 seconds). I've seen forms where the button context changes after it's been clicked (The label on the button changes and the button becomes disabled until the processing is complete).
I'm using ICEFaces and have the disabled property set to a boolean on the underlying page code.
The action listener bound to the button changes that boolean to disable it but alas, no changes on the JSP.
Anyone?
What you can do is to change the status of the button using Javascript:
<h:commandButton ... onclick="this.disabled=true"/>
Edit regarding the comment:
If the previous code does not submit the form, then you have to disable the button a little time after the click, not "during" the click itself. You can do that using the following code:
<h:commandButton ... onclick="setTimeout('this.disabled=true', 100);"/>
I'm not sure if the fact to use the this keyword directly in the setTimeout method will work correctly. If not, you can use another way to do that:
<h:commandButton ... onclick="disableButton(this.id);"/>
with the following Javascript function:
function disableButton(buttonId) {
setTimeout("subDisableButton(" + buttonId + ")", 100);
}
function subDisableButton(buttonId) {
var obj = document.getElementById(buttonId);
if (obj) {
obj.disabled = true;
}
}
(I'm sure this code can be enhanced, thus)
You should use an ice:commandButton instead of h:commandButton, since it has the partialSubmit property, which will perform the action as an AJAX call. This should refresh your button's state, so if the property on the server has been set to false, your button should be disabled.
do a javascript submit(); first and then disable the button
Similar to the solution from romaintaz
For a Firefox specific solution, the following works (it does not work in IE):
<h:commandButton ... onclick="disableButton(this.id);" />
Using Javascript function:
function disableButton(buttonId) {
var obj = document.getElementById(buttonId);
if (obj) {
setTimeout(function(thisObj) { thisObj.disabled=true; }, 50, obj);
}
}
do it after icefaces has updated the DOM. you can use ice.onAfterUpdate(callback):
Here with jQuery
ice.onAfterUpdate(function(){
updateButtons();
});
function updateButtons(){
if(!isButtonEnabled()){
jQuery(".myButton").attr('disabled', true);
jQuery(".myButton").removeClass("iceCmdBtn").addClass("iceCmdBtn-dis");
}else{
jQuery(".myButton").removeAttr('disabled');
jQuery(".myButton").removeClass("iceCmdBtn-dis").addClass("iceCmdBtn");
}
}