JSF 字段通过 ajax 帖子突出显示?

发布于 2024-12-02 14:17:34 字数 1918 浏览 0 评论 0原文

我正在构建 BalusC 的解决方案来突出显示和聚焦JSF 中的字段。我的计划是输出一个带有 ids 的 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 post 成功时调用的函数中获取此列表。

现在 f:ajax 确实具有 onevent 属性,并且该函数确实被调用,但我不确定它到底传递了什么。我如何才能以某种方式将无效 ID 从阶段侦听器传递到此函数?似乎传递了一个代表 HTMLInputElement 的对象?

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

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

谢谢!

I'm building on BalusC's solution to highlight and focus fields in JSF. My plan is to output a JSON array with ids and then have a method be called which will process this array. This works fine when I don't use <f:ajax/>

Here is my phase listener solution:

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

Basically this would produce errorFields value with something like ["#some\:id1", "#some\id2"]. Then I can do something like this in my root layout file:

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

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

With a processInputErrors function like this:

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

However, I need to somehow obtain this list in the function which gets called on success of an ajax post.

Now f:ajax does have the onevent attribute and this function does get called, but I'm not sure exactly what it gets passed. How would I be able somehow pass the invalid Ids from the phase listener to this function? It seems to be passed an object which represents the HTMLInputElement?

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

Happy to hear about alternative suggestions or ideas. The goal is basically to focus and highlight the field(s) which are invalid not only on a full post-back but also when using f:ajax.

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

眼中杀气 2024-12-09 14:17:34

那篇文章更多地针对 JSF 1.x。 JSF 2.x 现在提供了许多优点,其中以下优点有利于您的特定需求:

  • 您可以通过 #{component} 引用 EL 中的当前组件。对于输入组件,这是 UIInput 又具有 isValid() 方法。这可以在 styleClass 属性中使用。
  • 您可以使用 重新渲染视图的某些部分,以及

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 了。如果需要,您可以将输入标记样板包装在 复合组件标记文件


回到关于 onevent 属性的具体问题,请检查以下答案:JSF 2:如何在同一输入中显示不同的ajax状态?

That article was more targeted on JSF 1.x. JSF 2.x offers now a lot of advantages of which the following are beneficial for your particular requirement:

  • You can refer the current component in EL by #{component}. In case of input components this is the UIInput which in turn has an isValid() method. This could be used in styleClass attribute.
  • You can use <f:ajax> to re-render parts of the view, also <script> elements.

1+1 is...

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

No need for a PhaseListener anymore. You could if necessary wrap the input markup boilerplate in a composite component or a tag file.


Back to your concrete question about the onevent attribute, check this answer: JSF 2: How show different ajax status in same input?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文