How do I automatically set the focus on <p:editor> on page load?
After page is loaded I would like to be able to write in the editor without an additional click on the editor panel.
Primefaces provide attribute 'widgetVar', so you can get element from client and focus it:
<h:head>
<script type="text/javascript">
function test() {
xxx.focus();
}
</script>
</h:head>
<h:body onload="test()">
<h:form id="form">
<p:inputText id="rongnk" value="test"/>
<p:editor widgetVar="xxx" id="nkrong" value="123" width="600"/>
</h:form>
</h:body>
Related
I have created a UI with below code.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Zip Files loading</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body styleClass="bImage">
<center>
<b><font color="Yellow" size="36px"> Welcome</font> </b>
<br/><br/><br/><br/><br/><br/>
<p:graphicImage library="images" name="filetrans.gif" id="img" style="display: block"></p:graphicImage>
<br/><br/><br/><br/>
<h:form>
<p:growl id="growl" />
<p:commandButton value="Upload zip files" type="button" onclick="PF('pbAjax').start();
PF('startButton2').disable();
PF('cancelButton').enable();
show(PF('img'));" widgetVar="startButton2" />
<p:commandButton disabled="true" value="Cancel" widgetVar="cancelButton" actionListener="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();PF('cancelButton').disable();" />
<br /><br />
<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false" style="width:400px">
<p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="PF('startButton2').enable(); PF('btnReport').enable();hide(PF('img'));"/>
</p:progressBar>
<br/><br/><br/><br/>
<p:commandButton disabled="true" widgetVar="btnReport" value="View Report" action="Report"/>
</h:form>
</center>
<script type="text/javascript">
function show(id) {
var element = document.getElementById(id);
element.style.display = 'none';
}
function hide(id) {
var element = document.getElementById(id);
element.style.display = 'block';
}
</script>
</h:body>
In the above code, I want to go to the next JSF page Report.xhtml on click of button View Report (the last button). This button is initially disabled and when the progress bar is completed then it is enabled.
I try clicking on the button to the next page but I'm unable to.
On the other hand, if I don't control the disability of the button from ajax(i.e do not enable and disable it) I'm able to go to the next JSF page easily.
Your View Report command button is disabled by default (as you used disabled=true), enabling it form Javascript using PF('btnReport').enable() will only make the button change CSS and make it look like enabled, but in fact your button is disabled.
To Make this work, create a variable at your managed bean.Like:
boolean disableReportBtn = true;
public void onComplete(){
//your existing logic
disableReportBtn = false;
}
And at you XHTML:
<p:commandButton id="reportBtnId" disabled="#{progressBarView.disableReportBtn}" widgetVar="btnReport" value="View Report" action="Report"/>
Update the button after progress bar complete:
<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false" style="width:400px">
<p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl reportBtnId" oncomplete="PF('startButton2').enable();hide(PF('img'));"/>
</p:progressBar>
When I enter valid value (only digits) to inputText and click commandButton then I'am redirected to response.xhtml.
When I enter invalid value, click on page background, then change event is triggered, message is displayed.
Now when I enter valid value and click commandButton, message hides, but I am not redirected.
When I click second time I am redirected.
index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid>
<h:inputText id="value" value="#{bean.value}">
<f:validateRegex pattern="\d+"/>
<f:ajax event="change" execute="#this" render="#this valueMessage"/>
</h:inputText>
<h:message id="valueMessage" for="value"/>
</h:panelGrid>
<h:commandButton value="OK" action="response"/>
</h:form>
</h:body>
</html>
response.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Value is <h:outputText value="#{bean.value}"/>
</h:body>
</html>
Bean.java
package app;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
#ManagedBean
#RequestScoped
public class Bean {
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
Your concrete problem is caused by the hiding message, which in turn causes the command button to move up before its own click event finishes, and thus not sitting below the mouse pointer anymore when the mouse button is released and about to trigger the form submit. If you move the message component to below the command button component like so,
<h:commandButton value="OK" action="response"/>
<h:message id="valueMessage" for="value"/>
... then the command button will stay at the same place in the UI when the message hides, and thus its click event will be successfully received and trigger the form submit.
This is just an UI design problem, not a technical problem. You need to try to make sure that the button doesn't move away before its click event finishes.
One way is to make the form 2-column wide so that the message is shown next to the input field instead of below it, hereby not occupying more horizontal space:
<h:panelGrid columns="2">
An alternative is to delay the ajax request with <f:ajax delay> attribute (only available since JSF 2.2). I tested with a few values and 100~200ms seems acceptable to cover the time span of an average click (the time from the mouse button press until the mouse button is actually released). This way the ajax request is actually not fired when the submit button is clicked, hereby avoiding the shift of the button (and "unnecessary" validation).
<f:ajax render="#this valueMessage" delay="150" />
(note that event="change" and execute="#this" are the default values already, they are already for clarity omitted in above example; technically render="#this" is also strange, but I just kept it in, for the case you actually want to redisplay a changed value after some conversion step)
You may have to do it like this in your index.xhtml
<h:form>
<h:panelGrid>
<h:inputText id="value" value="#{bean.value}">
<f:validateRegex pattern="\d+" />
</h:inputText>
<h:message id="valueMessage" for="value"/>
</h:panelGrid>
<h:commandButton value="OK" action="response" >
<f:ajax execute="value" render="value valueMessage"/>
</h:commandButton>
</h:form>
and btw in your code the first click is for change event not for the button so if you try to click anywhere in the page except the button it will make the validation to disappear and the button will redirect you from first hit.
I'm using JSF2.1.
What is the difference beetween execute="#form" and this.submit() in the code below?
<f:ajax execute="#form" render="#form"/>
and:
<h:form onkeypress="if (event.keyCode == 13) this.submit();">
The former seems to submit the values and re-render the form, while the latter causes a page refresh. Is there any way to use ajax when the enter key is pressed in the form? I'm trying to detect the enter key being pressed in an inputText box. I've tried things like this:
<h:inputText value="#{a.name}" >
<f:ajax execute="#this" />
</h:inputText>
but this just causes the values to be submitted when you click on something else (after valueChange).
In order to answer your question's title, the difference between them is that a form submit sends the whole form and reloads the view, while an ajax form execution also submits the whole form, but using an ajax request which can be used to render only a specific part of the view before response happens.
Regarding to your question content, the form submit by pressing the Enter key is implemented in the major browsers for single input forms. There's no need of javascripting the onkeypress event, as the browser will detect that and send the form by default.
So the next code piece has the same result for server side, either pressing the Send button or the Enter key: The value attribute being set. Note that in the second form, where the <h:inputText /> has an ajax behaviour, the h:outputText value is also refreshed (even not being specified a render attribute) when hitting the Enter key, that's because of the full submit request being prioritized over the ajax request and the whole page being reloaded. Only Google Chrome seems to tell about that conflict: httpError:The Http Transport returned a 0 status code. This is usually the result of mixing ajax and full requests.
Full request:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
<h:form>
<h:inputText value="#{bean.value}" />
<h:commandButton value="Send" />
</h:form>
</body>
</html>
Ajax request:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
<h:form>
<h:inputText value="#{bean.value}">
<f:ajax />
</h:inputText>
<h:outputText value="Echo: #{bean.value}" />
</h:form>
</body>
</html>
When the form has more than an input field you can use such a javascript verification for sending the form if there's no any submit button, using full submit request. If there's, doing that is unecessary.
Finally, if you want to perform an ajax request when hitting the key and update model values, use onkeypress attribute:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
<h:form>
<h:inputText value="#{bean.value}"
onkeypress="if (event.keyCode == 13) {onchange(); return false; }">
<f:ajax render="echo" />
</h:inputText>
<h:inputText value="#{bean.value2}" />
<h:outputText id="echo" value="Echo: #{bean.value}" />
</h:form>
</body>
</html>
Remind that it's advisable to use a submit button for plain accessibility matters.
See also:
JSF 2.0: ajax request when press ENTER
Jsf calling bean method from input text when pressing enter
I want to fire an event change listener when the user selects / deselects something in the h:selectManyCheckbox, if it leaves it alone nothing should happen.
My xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<link rel="stylesheet" type="text/css"
href="/juritest/resources/css/style.css" />
<script type="text/javascript"
src="/juritest/resources/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/juritest/resources/js/menu.js"></script>
</h:head>
<h:body>
<ui:composition template="../../templates/gridsTemplate.xhtml">
<ui:define name="content">
...
<h:panelGroup style="text-align: left">
<hr />
<h:selectManyCheckbox
value="#{gridPopUpBean.oneQuestionUserAnswers}"
layout="pageDirection">
<f:selectItem itemValue="a"
itemLabel="#{gridPopUpBean.currentQuestion.a}" />
<f:selectItem itemValue="b"
itemLabel="#{gridPopUpBean.currentQuestion.b}" />
<f:selectItem itemValue="c"
itemLabel="#{gridPopUpBean.currentQuestion.c}" />
<f:ajax event="click" listener="#{gridPopUpBean.changeListener()}"/>
</h:selectManyCheckbox>
</h:panelGroup>
...
I get an error saying "One or more resources have the target of 'head', but no 'head' component has been defined within the view." I have < h:head> not just < head>, I read that this was a possible problem.
And the snippet from the bean:
public void changeListener(ValueChangeEvent e) {
change = true;
}
I have tried without < f:ajax like
<h:selectManyCheckbox
value="#{gridPopUpBean.oneQuestionUserAnswers}" valueChangeListener="#{gridPopUpBean.changeListener()}" onclick="submit()"
layout="pageDirection">
<f:selectItem itemValue="a"
itemLabel="#{gridPopUpBean.currentQuestion.a}" />
<f:selectItem itemValue="b"
itemLabel="#{gridPopUpBean.currentQuestion.b}" />
<f:selectItem itemValue="c"
itemLabel="#{gridPopUpBean.currentQuestion.c}" />
<f:ajax event="click" listener="#{gridPopUpBean.changeListener()}"/>
</h:selectManyCheckbox>
but with no luck...
One or more resources have the target of 'head', but no 'head' component has been defined within the view." I have < h:head> not just < head>, I read that this was a possible problem.
Anything outside <ui:composition> is ignored. If you need a <h:head>, it needs to go in the master template, the gridsTemplate.xhtml (or any of its parent templates).
Further, if you aren't using a visual editor for your XHTML files (like Dreamweaver), then I strongly recommend to stop putting any content outside <ui:composition>, otherwise you keep confusing yourself.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
<f:ajax event="click" listener="#{gridPopUpBean.changeListener()}"/>
public void changeListener(ValueChangeEvent e) {
You're confusing valueChangeListener with <f:ajax listener>. The ValueChangeEvent argument is only applicable to valueChangeListener attribute of an UIInput component. Get rid of that argument.
public void changeListener() {
See also:
When to use valueChangeListener or f:ajax listener?
Unrelated to the concrete problem, you correctly used click (although you could safely omit it altogether), but your question title mentions change and that is indeed the wrong event for a checkbox and radio button.
See also:
What values can I pass to the event attribute of the f:ajax tag?
I'm facing a pretty similar issue on which I already made a ticket but now the problem arises in my main project. The previous ticket involved a test project.
Here's the link to the ticket. I'll first explain my project briefly and then provide the code.
It's a basic ui since I left out irrelevant parts, but when you start the webapp you should be directed to the main page which has an intro loaded through the use of ajax. I'm using a managedbean called Navigation which is a simple pojo with 2 annotations and one string property called 'page'. I've set the property to 'intro', so it's loaded by default.
// Navigation.java
#ManagedBean
#RequestScoped
public class Navigation {
private String page = "intro";
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
index.xhtml looks like this:
<!-- index.xhtml -->
<h:body>
<!-- Navigation -->
<h:form>
<p:menubar>
<p:menuitem value="Home" icon="ui-icon-home" action="#{navigation.setPage('intro')}" update=":contentPanel" />
<p:submenu label="Actions" icon="ui-icon-transferthick-e-w">
<p:submenu label="Employee">
<p:menuitem value="Search" action="#{navigation.setPage('employee/find')}" update=":contentPanel" />
</p:submenu>
</p:submenu>
</p:menubar>
</h:form>
<!-- ContentPanel -->
<p:panel id="contentPanel" styleClass="content">
<ui:include src="/#{navigation.page}.xhtml" />
</p:panel>
</h:body>
Now, when you navigate to 'Actions/Employee/Create new' the file find.xhtml does get loaded into the main page but, the form itself doesn't work. Here's the file:
<!-- find.xhtml -->
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:facet name="header">
Create new employee
</f:facet>
<h:outputLabel value="User ID: " for="userId" />
<p:inputText value="#{managedEmployee.userId}" id="userId" />
<p:commandButton value="Show" update="result" />
<h:outputText id="result" value="#{managedEmployee.userId}" />
</ui:composition>
So a user would be able to input a userId in the form and it would be displayed near the form when commandbutton is pressed. Obviously I must be doing something wrong but I can't seem to figure it out. I don't like saying it, but I'm desperate for an answer.
Thanks in advance!
I may not be understanding the question, but you don't have an action set on your commandButton so of course it's not going to do anything.
<p:commandButton value="Show" update="result" />
should have something like
<p:commandButton value="Show" update="result" action="#{backer.method}"/>
I've found a solution for my problem. Not sure what the reason is but if I surround the code in ui:composition with h:form and add that form id to update on the link it works.
Hope this helps others when they encounter it. Cheers
<p:menuitem value="Create" action="#{navigationBean.setPage('employee/create')}" update=":contentPanel :form" />
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:form id="form">
...
</h:form>
</ui:composition>