java JSF 2：如何在同一输入中显示不同的 ajax 状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7043840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSF 2: How show different ajax status in same input?
提问by Valter Silva
I would like to validate every field in my form when each field lose the focus, when this happens i would like these actions happen:
当每个字段失去焦点时，我想验证表单中的每个字段，当发生这种情况时，我希望发生以下操作：
1) in the right side of the field appears an image, a .gif (to represent that the system is checking the user input)
1）在该字段的右侧出现一个图像，一个.gif（表示系统正在检查用户输入）
2) when finished appears another .gif (which depends of the input, 'sucess.gif' or 'error.gif', for example) and a message on the right side.
2) 完成后会出现另一个 .gif（这取决于输入，例如 'sucess.gif' 或 'error.gif'）和右侧的消息。
I don't want to use popup or something like, the user is gonna lose usability and i don't want this.
我不想使用弹出窗口或类似的东西，用户会失去可用性，我不想要这个。
I'm trying to do something like this, this is what i have done so far:
我正在尝试做这样的事情，这是我迄今为止所做的：
<h:form id="form">
<h:panelGrid columns="3" >
<h:outputLabel for="first_name" value="First Name:" />
<h:inputText id="first_name" value="#{register.bean.firstName}" >
<f:ajax event="blur" render="m_first_name" />
</h:inputText>
<a4j:status name="ajaxStatus">
<f:facet name="start">
<h:graphicImage name="loader.gif" library="images" />
<h:outputText value="Processing ..." />
</f:facet>
</a4j:status>
<a4j:commandButton value="Register !" action="#{register.validateName}" status="ajaxStatus" />
</h:panelGrid>
</h:form>
I was searching for some solution on Google and I think
我在谷歌上寻找一些解决方案，我认为
<a:a4j ... >
is my best option, because of the onbeginand oncompleteattributes.
There's some attribute as these in some native tag in JSF 2 ?
是我最好的选择，因为onbegin和oncomplete属性。在 JSF 2 的一些本机标签中有一些属性？
UPDATE: @BalusC approach:
更新：@BalusC 方法：
<!DOCTYPE html>
<html lang="pt-br"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Insert title here</title>
<script type="text/javascript">
function showProgress(data) {
var inputElement = data.source; // The HTML DOM input element.
var ajaxStatus = data.status; // Can be "begin", "success" and "complete"
var messageForInputElement = document.getElementById(inputElement.id + "_message");
switch (ajaxStatus) {
case "begin": // This is called right before ajax request is been sent.
messageForInputElement.innerHTML = "validating...";
break;
case "complete": // This is called right after ajax response is received.
messageForInputElement.innerHTML = "";
break;
case "success": // This is called when ajax response is successfully processed.
if (messageForInputElement.innerHTML.length == 0) { // So, no message has been set.
messageForInputElement.innerHTML = "valid!";
}
break;
}
}
</script>
</h:head>
<h:body>
<h:form id="form">
<h:panelGrid columns="3">
<h:outputLabel for="first_name" value="First Name" />
<h:inputText id="first_name" value="#{bean.firstName}" required="true">
<f:ajax event="blur" render="first_name_message" onevent="showProgress" />
</h:inputText>
<h:message id="first_name_message" for="first_name" />
<h:panelGroup />
<h:commandButton value="Submit" action="#{register.doSomething}">
<f:ajax execute="@form" render="@form" />
</h:commandButton>
<h:messages globalOnly="true" layout="table" />
</h:panelGrid>
</h:form>
</h:body>
</html>
And this is my bean:
这是我的豆子：
@ManageBean
@ViewScope
..
public void doSomething(){
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
回答by BalusC
The Ajax4jsf's onbeginand oncompleteattributes are just extra abstractions of the existing oneventattribute of the JSF2 standard <f:ajax>tag. You only need to bring in some extra JavaScript code in to achieve the same functionality.
Ajax4jsf 的onbegin和oncomplete属性只是oneventJSF2 标准<f:ajax>标记的现有属性的额外抽象。您只需要引入一些额外的 JavaScript 代码即可实现相同的功能。
Here's a kickoff example:
这是一个启动示例：
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="input1" value="Input 1" />
<h:inputText id="input1" value="#{bean.input1}" required="true">
<f:ajax event="blur" render="input1_message" onevent="showProgress" />
</h:inputText>
<h:message id="input1_message" for="input1" />
<h:outputLabel for="input2" value="Input 2" />
<h:inputText id="input2" value="#{bean.input2}" required="true">
<f:ajax event="blur" render="input2_message" onevent="showProgress" />
</h:inputText>
<h:message id="input2_message" for="input2" />
<h:panelGroup />
<h:commandButton value="Submit" action="#{bean.submit}">
<f:ajax execute="@form" render="@form" />
</h:commandButton>
<h:messages globalOnly="true" layout="table" />
</h:panelGrid>
</h:form>
Here's a basic kickoff example the showProgressfunction. The dataargument is a JS object whose properties are already described in tables 14-4 and 14-3 of the JSF specification.
这是showProgress函数的基本启动示例。所述data参数是一个JS对象，其属性在表14-4和14-3中已经描述的JSF规范。
function showProgress(data) {
var inputElement = data.source; // The HTML DOM input element.
var ajaxStatus = data.status; // Can be "begin", "success" and "complete"
var messageForInputElement = document.getElementById(inputElement.id + "_message");
switch (ajaxStatus) {
case "begin": // This is called right before ajax request is been sent.
messageForInputElement.innerHTML = "validating...";
break;
case "complete": // This is called right after ajax response is received.
messageForInputElement.innerHTML = "";
break;
case "success": // This is called when ajax response is successfully processed.
if (messageForInputElement.innerHTML.length == 0) { // So, no message has been set.
messageForInputElement.innerHTML = "valid!";
}
break;
}
}
You could substitute the innerHTMLof this kickoff example with for example images or adding/removing CSS style class on the message element which uses CSS background images, etc. This is not exactly trivial to keep crossbrowser compatible. I'd suggest to throw in some jQueryin there.
您可以innerHTML使用例如图像或在使用 CSS 背景图像的消息元素上添加/删除 CSS 样式类等来替换此启动示例的 。这对于保持跨浏览器兼容并非微不足道。我建议在那里加入一些jQuery。
Basically, the Ajax4jsf's onbeginand oncompleteattributes removes the need that you've to write a whole JS function with a switchto achieve the desired functionality. You could just refer directly some JavaScript functions which do the same as the lines insidethe casestatements of the switch. It's just an extra abstraction. You may want to consider using it so that amount of boilerplate code is minimized.
基本上，Ajax4jsf 的onbegin和oncomplete属性消除了您必须编写带有 的整个 JS 函数switch来实现所需功能的需要。你可以只直接涉及一些JavaScript函数里面做一样的线内的case的语句switch。这只是一个额外的抽象。您可能需要考虑使用它，以便最大限度地减少样板代码的数量。
