带有脚本块的 XPage 部分刷新

Question

我试图通过添加一些客户端功能使我的数据视图看起来和感觉更好一些。在这种情况下，我制作了一个脚本，让用户将鼠标悬停在一行上并显示它的详细信息。结构看起来像这样：

脚本块包含一些基本的jquery:

function x$(idTag){
    idTag = idTag.replace(/:/gi, "\:");
    return("#"+idTag);
}

var dataView = x$('#{id:dataView1}');

var detail;
$(dataView + ' > table > tbody > tr').mouseenter(function (e) {
    detail = $(this).attr('id').replace(':_row', '_detail');
    detail = x$(detail);

    $(detail).show();
});

$(dataView + ' > table > tbody > tr').mouseleave(function () {
    $(detail).hide();
});

一切正常，直到我单击行 expand/collapse 中的一个按钮，此时脚本代码停止工作。我的猜测是它与部分刷新有关，当我在数据视图中展开或折叠一个级别时会发生这种情况，并且它不会重新加载脚本块或重新加载错误。如果我关闭部分刷新，它会在之后继续工作，但是当然，仅仅为了展开或折叠一行而刷新整个页面太慢而且不实际可用

有什么想法吗？

Answer 1

jQuery 代码仅运行在它可以在页面上看到的项目上 - 您需要更改选择标准，以便它运行作为委派事件。在这种情况下，无论何时将鼠标事件移到数据视图上，它都会检测触发事件的选择器，如果匹配，则相应地运行。这样，无论它们是 "on the page" 在 partialRefresh 之前还是之后，它都会在所有行上运行。

http://api.jquery.com/on/

试试这个

$(dataView).on ('mouseenter', 'table > tbody > tr', function (e) {
    detail = $(this).attr('id').replace(':_row', '_detail');
    detail = x$(detail);

    $(detail).show();
});

$(dataView).on('mouseleave', 'table > tbody > tr', function () {
    $(detail).hide();
});

代码没有测试，因为我没有你的环境:)

Answer 2

多亏了另一个来源，我得到了一个快速的黑客帮助。

将 dataView 和 scriptBlock 都放在面板中，然后将 dataView 的 refreshID 设置为面板的 ID。

带有脚本块的 XPage 部分刷新

XPage partial refresh with a script block

javascript

jquery

xpages

xpages-extlib