Java JSF2：如何在相同的输入中显示不同的ajax状态？_Java_Jsf_Jsf 2

Java JSF2：如何在相同的输入中显示不同的ajax状态？

java jsf jsf-2

Java JSF2：如何在相同的输入中显示不同的ajax状态？,java,jsf,jsf-2,Java,Jsf,Jsf 2,当每个字段失去焦点时，我想验证表单中的每个字段，当这种情况发生时，我想执行以下操作： 1）在字段的右侧显示一个图像.gif（表示系统正在检查用户输入） 2）完成后，右侧会出现另一个.gif（取决于输入，“suces.gif”或“error.gif”）和一条消息我不想使用弹出窗口或类似的东西，用户将失去可用性，我不想这样我正在尝试做这样的事情，这是我到目前为止所做的： <h:form id="form"> <h:panelGrid columns="3" >

当每个字段失去焦点时，我想验证表单中的每个字段，当这种情况发生时，我想执行以下操作：

1）在字段的右侧显示一个图像.gif（表示系统正在检查用户输入）

2）完成后，右侧会出现另一个.gif（取决于输入，“suces.gif”或“error.gif”）和一条消息

我不想使用弹出窗口或类似的东西，用户将失去可用性，我不想这样

我正在尝试做这样的事情，这是我到目前为止所做的：

<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>

这是我的豆子：

@ManageBean
@ViewScope
..

public void doSomething(){
    try {
        Thread.sleep(2000);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
}

Ajax4jsf的

onbegin

和

oncomplete

属性只是JSF2标准标记的现有

onevent

属性的额外抽象。您只需要引入一些额外的JavaScript代码即可实现相同的功能

以下是一个启动示例：

下面是一个基本的启动示例

showProgress

函数。

data

参数是一个JS对象，其属性已在

您可以使用示例图像或在使用CSS背景图像的message元素上添加/删除CSS样式类等来替换此启动示例的

innerHTML

。这对于保持交叉浏览器的兼容性来说并不简单。我建议在里面放一些

基本上，Ajax4jsf的

onbegin

和

oncomplete

属性消除了使用

开关编写整个JS函数以实现所需功能的需要。您可以直接引用一些JavaScript函数，这些函数的作用与开关的case
语句中的行相同。这只是一个额外的抽象概念。您可能想考虑使用它来最小化样板代码的数量。
我尝试了您的方法，但是您在JS中放置的状态变化太快。这就像不等待方法处理的bean一样。抱歉这么晚才回答，因为我正试图解决这个问题。我更新我的帖子是为了向你们展示我是如何做的。你们要求将这一点应用于输入验证，而不是操作方法。要获得动作方法的进度，只需在命令按钮的
中添加另一个onevent，并使用稍微不同的JS函数。
<!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();
    }
}

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;
    }
}