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

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

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

2）完成时出现另一个.gif（例如，取决于输入，’sucess.gif’或’error.gif’）和右侧的消息。

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

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

我正在寻找谷歌的一些解决方案

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

更新 ：@BalusC方法：

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

这是我的豆子：

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

Answer 1

Ajax4jsf的onbegin和oncomplete属性只是JSF2标准标记的现有onevent属性的额外抽象。 您只需要引入一些额外的JavaScript代码即可实现相同的function。

这是一个启动示例：

这是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背景图像的消息元素上添加/删除CSS样式类等。这对于保持crossbrowser兼容并不是一件容易的事。 我建议在那里引入一些jQuery 。

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