我目前正在编写我的第一个JSF 2页面,我想实现以下内容:当用户在ah:inputText元素中写入内容并按下回车按钮时,另一个h:inputText应该从数据库中更新一些数据.
我的testpage包含以下代码:
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:body>
<h3>JSF 2.0 Example</h3>
<h:form>
<h:inputText id="inputField" value="#{helloBean.name}">
<f:ajax render="output" execute="inputField" event="keypress" listener="#{bean.myChangeListener}" />
</h:inputText>
<h2><h:outputText id="output" value="#{helloBean.name}" /></h2>
</h:form>
</h:body>
</html>
Bean包含所有必要的getter和setter以及此函数:
public void myChangeEvent( AjaxBehaviorEvent event) {
System.out.println( "VALUE CHANGED" );
}
更新2013-12-16:
经过数小时的故障排除后,我发现了为什么在离开文本字段或在文本字段中按Enter键时没有提交任何内容的问题.我的Web应用程序是使用模板创建的,在我的页面标题的模板中是一个'a4j:status'标签,这与JSF 2冲突.删除'a4j:status'行后,当我点击时调用myChangeEvent方法编辑文本字段值后,在网页上的其他位置.
但是存在的问题是,在更改文本字段值后单击enter时整个页面都会被提交.这是因为我在页面底部有一个按钮,用于保存用户输入,因此提交整个页面,这是正常的.但是在文本字段中按Enter键时不应调用此按钮.我必须添加到现有代码中？
更新2013-12-17: 在JS遇到麻烦之后我终于在L-Ray的帮助下工作了(再次感谢).在这里,我将展示使用JQuery的最终版和工作版:
<h:inputText id="inputField" value="#{helloBean.name}" >
<f:ajax render="output" execute="inputField" event="change" listener="#{helloBean.myChangeEvent}" />
</h:inputText>
<h2><h:outputText id="output" value="#{helloBean.name}" /></h2>
<script type="text/javascript">
$(document).ready(function() {
$( "#mainForm\\:inputField" ).bind('keypress', function(e) {
var keyCcode = e.keyCode || e.which;
// Enter was pressed
if(keyCcode == 13) {
e.target.blur();
e.stopPropagation();
return false;
} else {
return true;
}
});
});
</script>
L-R*_*Ray 12
我建议不要listener="#{bean.myChangeEvent}"在inputText(它期望的ValueChangeEvent)中使用该属性,但是来自的一个监听器调用f:ajax,它要求没有参数或者a AjaxBehaviorEvent.
此外,我建议不要在内部听一个keypressed-event,f:ajax而是一个更改事件,以及一个javascript - keypress - 事件.
因此,作为解决方案,以下代码可能适合您...
<h:form>
<h:inputText id="inputField" value="#{helloBean.name}"
onkeypress="if (event.keyCode == 13) {event.target.blur();event.stopPropagation();return false;} else {return true;};">
<f:ajax render="output" execute="inputField" event="change"
listener="#{helloBean.myChangeEvent}"/>
</h:inputText>
<h2><h:outputText id="output" value="#{helloBean.name}" /></h2>
</h:form>
托管bean
public void myChangeEvent( AjaxBehaviorEvent e ) {
System.out.println( "VALUE CHANGED" );
}
该event对象将由浏览器本身提供给我们的javascript部分 - 因此在on* - 属性外部运行它将不起作用.
javascript方法event.stopPropagation()是一个jQuery方法或seamingly也是一个javascript方法(参见W3C学校),防止其他事件被称为冒泡DOM树.
| 归档时间： |
|
| 查看次数： |
10417 次 |
| 最近记录： |