Я хотел бы проверить каждое поле в моей форме, когда каждое поле теряет фокус, и когда это происходит, я бы хотел, чтобы эти действия происходили:
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();
}
}