几秒后隐藏 p:messages

Question

如何使用 jsf primefaces 在指定的秒数后隐藏消息（对于 onedit 和 oncancel 或单独）；

<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable id="platform" var="platform" value="#{platformMB.platformList}" editable="true">  
   <p:ajax event="rowEdit" listener="#{platformMB.onEdit}" 
           update=":formConfig:messages"/>
   <p:ajax event="rowEditCancel" listener="#{platformMB.onCancel}" 
           update=":formConfig:messages"/>  
....

Answer 1

您可以在完成 PrimeFaces ajax 请求时调用 JS 函数，方法是挂钩特殊的 pfAjaxComplete 事件。

$(document).on("pfAjaxComplete", function() {
    // ...
});

您可以使用 JS setTimeout() 安排函数在 n 毫秒后调用。

setTimeout(function() {
    // ...
}, 1000);

您可以使用 jQuery $.hide(), or nicer, $.slideUp() 来隐藏 DOM 元素。

$(element).slideUp();

您当然不想过早隐藏它们。假设我们从 3 秒的最小超时开始，作为人眼的 "warming up" 时间，然后为消息中的每个单词计算 200 毫秒。

现在，让我们把它们放在一起：

$(document).on("pfAjaxComplete", function() {
    var $messages = $(".ui-messages div");

    if ($messages.length) {
        var wordCount = $messages.text().split(/\W/).length;
        var readingTimeMillis = 3000 + (wordCount * 200);

        setTimeout(function() {
            $messages.slideUp();
        }, readingTimeMillis);
    }
});

几秒后隐藏 p:messages

Hide p:messages after certain seconds

primefaces

jsf-2