JSF 2:如何在相同的输入中显示不同的ajax状态

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

1)在字段的右侧出现一个图像，一个。gif(表示系统正在检查用户输入)

2)完成后出现另一个。gif(这取决于输入，' success .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>

我在谷歌上搜索一些解决方案，我想

<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属性只是JSF2标准<f:ajax>标记的现有onevent属性的额外抽象。您只需要引入一些额外的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;
    }
}

您可以用示例图像代替这个kickoff示例的innerHTML，或者在使用CSS背景图像的message元素上添加/删除CSS样式类，等等。保持跨浏览器兼容并不是一件简单的事情。我建议在里面加入一些jQuery。

基本上，Ajax4jsf的onbegin和oncomplete属性消除了您必须使用switch编写整个JS函数以实现所需功能的需要。您可以直接引用一些JavaScript函数，这些函数的作用与switch的 case语句中的行相同。这只是一个额外的抽象。您可能需要考虑使用它，以便将样板代码的数量降至最低。

相关内容

最新更新

热门标签：