【问题标题】:RichFaces: Displaying a notification "popup" when AJAX operation succeededRichFaces:AJAX 操作成功时显示通知“弹出”
【发布时间】:2022-05-03 08:01:35
【问题描述】:

我们目前正在开发一个基于 Java EE 5、JSF、Facelets 和 RichFaces 的 B2B 网上商店。到目前为止,该技术确实运行良好,但现在我面临一个小问题,我只是不知道如何解决:

产品以表格形式列出,通过单击行尾的小图标,可以将每件商品添加到购物篮中。添加产品是通过 AJAX 完成的,以避免页面完全重新加载。只需使用h:dataTablea4j:commandLink 调用将所选产品添加到购物篮的操作方法,就可以正常工作。即使在侧栏中始终可见的篮子总数的重新渲染也可以正常工作。

由于 AJAX 的性质,没有可见的指示(除了旁边的更改总数)操作成功或至少已完成。现在我想添加一个小“弹出”框,当 AJAX 操作完成时,它在添加图标旁边可见,表明该项目已添加到购物篮中。这个框应该会在几秒钟后自动消失。

这是我认为应该起作用的(popup_message 和 popup_content css-classes 使框漂浮在其标记所在的位置之上):

<h:dataTable ....>
    ...
    <h:column>
        <a4j:commandLink action="...">
            <rich:effect event="oncomplete" targetId="addedMessage"
                 type="Appear" />
            <rich:effect event="oncomplete" targetId="addedMessage"
                 type="Appear" params="{delay:3.0, duration:1.0}" />
        </a4j:commandLink>

        <a4j:outputPanel id="addedMessage" styleClass="popup_message"
            style="display: none">
            <a4j:outputPanel layout="block" styleClass="popup_content">
                <h:outputText value="Item added!" />
            </a4j:outputPanel>
        </a4j:outputPanel>
    </h:column>
</h:dataTable>

不幸的是,它根本不显示该框。如果我将“出现”效果的event 更改为onclick,它几乎可以按预期工作。单击图标时立即显示,并在 AJAX 操作完成 3 秒后消失。但是我不希望它在单击后立即出现,因为表明该项目已添加到购物篮中是错误的,而实际上该操作甚至还没有开始。当我想指出一些错误或想在框中包含一些项目特定信息时,这一点变得更加重要,这些信息只有在项目添加后才可用。

那么有什么想法可以做到这一点吗?为什么为同一个事件添加两个效果不起作用?

(我已经看过the effect-example from the RichFaces live demo。这些示例的工作原理几乎相同,只是它们添加了第二个效果并明确声明了for 属性。但即使这样对我也不起作用。)

更新:我已经尝试使用 rich:toolTip 来达到这个目的,它实际上似乎非常灵活。但无论我做什么,我都无法将任何内容附加到a4j:commandLink 的“未完成”(我也尝试过“完成”)事件,除了一个效果......似乎有一些错误/未记录的行为关于那个事件。我刚刚发现了这个错误报告:RF-3427

【问题讨论】:

    标签: ajax jsf richfaces effect ajax4jsf


    【解决方案1】:
    【解决方案2】:

    你试过rich:status 吗?我不会发布一段代码。我认为文档会做得很好。

    http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf

    【讨论】:

      【解决方案3】:

      您在参数之外定义 targetId。你想做的是:

      <rich:effect event="oncomplete" type="Appear" params="targetId:'addedMessage',delay:3.0, duration:1.0" />
      

      试试吧,我想它会奏效的。

      【讨论】:

      • 我不知道我是否已经尝试过,但我们会看到。如果它有效,RichFaces 文档需要一些认真的工作......
      • 试过了,但还是不行,不过还是谢谢。我查看了生成的 html/javascript,并且看起来,每个事件只能有一个 rich:effect(最后一个效果会覆盖之前为该事件定义的任何效果)。现在我想知道,现场演示的示例是如何工作的......
      猜你喜欢
      • 2018-08-07
      • 1970-01-01
      • 1970-01-01
      • 2022-10-14
      • 1970-01-01
      • 1970-01-01
      • 2015-11-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多