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>
我在谷歌上寻找一些解决方案，我认为
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 属性只是现有 oneevent 属性 <f:ajax> 标签.您只需要引入一些额外的 JavaScript 代码即可实现相同的功能.
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 背景图像的消息元素上添加/删除 CSS 样式类等.这对于保持 crossbrowser 并非微不足道兼容的.我建议在那里加入一些 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屋！
