JSF 2:如何在同一输入中显示不同的ajax状态? [英] JSF 2: How show different ajax status in same input?
问题描述
当每个字段失去焦点时，我想验证表单中的每个字段，当这种情况发生时，我希望这些操作发生:
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)在该字段的右侧出现一个图像，即.gif(表示系统正在检查用户输入)
1) in the right side of the field appears an image, a .gif (to represent that the system is checking the user input)
2)完成后出现另一个.gif(例如，取决于输入内容，例如"sucess.gif"或"error.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.
我不想使用弹出窗口或类似的东西，用户将失去可用性，我也不想这样做.
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>
我正在Google上寻找某种解决方案，我认为
I was searching for some solution on Google and I think
<a:a4j ... >
由于onbegin和oncomplete属性，
是我最好的选择. 在JSF 2的某些本机标记中有某些属性吗?
is my best option, because of the onbegin and oncomplete attributes.
There's some attribute as these in some native tag in JSF 2 ?
更新: @BalusC方法:
UPDATE: @BalusC approach:
<!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>
这是我的豆子:
@ManageBean
@ViewScope
..
public void doSomething(){
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
推荐答案
Ajax4jsf的onbegin和oncomplete属性只是JSF2标准
The Ajax4jsf's onbegin and oncomplete attributes are just extra abstractions of the existing onevent attribute of the JSF2 standard <f:ajax> tag. You only need to bring in some extra JavaScript code in to achieve the same functionality.
这是一个开球示例:
<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>
这是showProgress函数的一个基本启动示例. data参数是一个JS对象，其属性已经在 JSF规范.
Here's a basic kickoff example the showProgress function. The data argument is a JS object whose properties are already described in tables 14-4 and 14-3 of the JSF specification.
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;
}
}
您可以用图像替换此启动示例的innerHTML，或在使用CSS背景图像的message元素上添加/删除CSS样式类，等等.这对于保持跨浏览器的兼容性并不是很简单.我建议在其中放入一些 jQuery .
You could substitute the innerHTML of 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 jQuery in there.
基本上，Ajax4jsf的onbegin和oncomplete属性消除了您必须使用switch编写整个JS函数以实现所需功能的需求.您可以直接引用一些JavaScript函数，这些函数的作用与switch的case语句的 inside 行相同.这只是一个额外的抽象.您可能要考虑使用它，以使样板代码的数量最小化.
Basically, the Ajax4jsf's onbegin and oncomplete attributes removes the need that you've to write a whole JS function with a switch to achieve the desired functionality. You could just refer directly some JavaScript functions which do the same as the lines inside the case statements of the switch. It's just an extra abstraction. You may want to consider using it so that amount of boilerplate code is minimized.
这篇关于JSF 2:如何在同一输入中显示不同的ajax状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
