使用 ajax 帖子突出显示 JSF 字段？

Question

我正在 BalusC's solution 的基础上突出显示和聚焦 JSF 中的字段。我的计划是输出一个带有 id 的 JSON 数组，然后调用一个方法来处理这个数组。当我不使用

时，这很好用

这是我的相位监听器解决方案：

public void beforePhase(PhaseEvent event) {
    FacesContext facesContext = event.getFacesContext();
    List<String> highlightFields = new ArrayList<String>();

    Iterator<String> highlightFieldsItr = facesContext
            .getClientIdsWithMessages();
    while (highlightFieldsItr.hasNext()) {
        StringBuilder sb = new StringBuilder();
        sb.append("#");
        sb.append(highlightFieldsItr.next().replaceAll(":", "\\\\:"));
        highlightFields.add(sb.toString());
    }
    JSONArray jsonHighlightFields = new JSONArray(highlightFields);

    facesContext.getExternalContext().getRequestMap()
            .put("errorFields", jsonHighlightFields.toString());
}

基本上这会产生类似于 ["#some\:id1", "#some\id2"] 的 errorFields 值。然后我可以在我的根布局文件中做这样的事情：

   <script>
     var errorFields = ${errorFields}; // This will xlate to ["#some\\:id1", "#some\\:id2"

     $(document).ready(function(){
         processInputErrors(errorFields);
     });
   </script>

使用这样的 processInputErrors 函数：

function processInputErrors(ids) {
    for (id in ids) {
        if (focus == false) {
            jQuery(ids[id]).focus();
            focus = true;
        }
        jQuery(ids[id]).addClass('input-error');
    }
}

但是，我需要以某种方式在 ajax 发布成功时调用的函数中获取此列表。

现在 f:ajax 确实有 onevent 属性并且这个函数确实被调用了，但我不确定它到底传递了什么。我如何能够以某种方式将来自相位侦听器的无效 ID 传递给该函数？似乎传递了一个代表 HTMLInputElement 的对象？

  <f:ajax event="change" onevent="test" render="test test_msg" immediate="true" />

很高兴听到其他建议或想法。目标基本上是集中并突出显示无效的字段，不仅在完整的回发中而且在使用 f:ajax 时也是如此。

谢谢！

Answer 1

那篇文章更针对 JSF 1.x。 JSF 2.x 现在提供了许多优点，其中以下对您的特定要求有益：

• 您可以通过#{component} 引用EL 中的当前组件。对于输入组件，这是UIInput，它又具有isValid() 方法。这可以用在styleClass 属性中。
• 您可以使用<f:ajax> 重新渲染部分视图，也可以使用<script> 元素。

1+1 是...

<h:inputText id="input1" value="#{bean.input1}" required="true" styleClass="#{component.valid ? '' : 'error'}">
    <f:ajax render="@this input1message focus" />
</h:inputText> 
<h:message id="input1message" for="input1" />
...
<h:inputText id="input2" value="#{bean.input2}" required="true" styleClass="#{component.valid ? '' : 'error'}">
    <f:ajax render="@this input2message focus" />
</h:inputText> 
<h:message id="input2message" for="input2" />
...
<h:panelGroup id="focus"><script>jQuery(":input.error:first").focus();</script></h:panelGroup>

不再需要PhaseListener。如有必要，您可以将输入标记样板封装在 composite component 或 tag file 中。

---

回到您关于onevent 属性的具体 问题，查看以下答案：JSF 2: How show different ajax status in same input?