JSF 2：如何在同一输入中显示不同的ajax状态？

羊舌承天

2023-03-14

问题内容：

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

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

2）完成后出现另一个.gif（例如，取决于输入内容，例如“ sucess.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>

我在Google上寻找一些解决方案，我认为

<a:a4j ... >

是最佳选择，因为onbegin和oncomplete属性。在JSF 2的某些本机标记中有一些属性吗？

更新：@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>

这是我的豆子：

@ManageBean
@ViewScope
..

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

问题答案：

Ajax4jsf
onbegin和oncomplete属性只是oneventJSF2标准<f:ajax>标记的现有属性的额外抽象。您只需要引入一些额外的JavaScript代码即可实现相同的功能。

这是一个启动示例：

<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规范的表14-4和14-3中进行了描述。

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。

基本上，Ajax4jsf的onbegin和oncomplete属性消除了您必须编写带有的整个JS函数switch以实现所需功能的需要。你可以只直接涉及一些JavaScript函数里面做一样的线
内的case的语句switch。这只是一个额外的抽象。您可能要考虑使用它，以使样板代码的数量最小化。

JSF 2：如何在同一输入中显示不同的ajax状态？

相关阅读

相关文章

相关问答

相关工具

相关文档