Wicket 面板需要刷新页面才能使 javascript 脚本正常工作

Question

我正在创建一个带有多个选项卡的网页。为了实现这一点，我使用了 wicket AjaxTabbedPanel 和几个 AbstractTab。在每个选项卡中，我都有包含数据的表格，并且我使用 JavaScript 脚本来使表格可排序。

public TabbedPage() {
    List<ITab> tabs = new ArrayList<ITab>();
    tabs.add(new AbstractTab(new Model<String>("first tab")) {
        public Panel getPanel(String panelId) {
            return new TablePanel(panelId);
        }
    });

    tabs.add(new AbstractTab(new Model<String>("second tab")) {
        public Panel getPanel(String panelId) {
            return new TablePanel(panelId);
        }
    });

    add(new AjaxTabbedPanel("tabs", tabs));
}

当我加载页面时，默认选择的选项卡中的表格是可排序的。但是，一旦我单击任何链接跳转到其他选项卡（包括已选择的选项卡），任何选项卡中的任何表格都不允许我对它们进行排序（包括之前正在使用的表格 -默认选项卡中的表）。如果我刷新页面，我可以对表格（刷新时选择的选项卡）进行排序，但是一旦我单击任何链接来切换选项卡，表格就会再次停止具有可排序功能。对于为什么会发生这种情况有什么想法吗？

编辑： 我刚刚发现，如果我用 TabbedPanel 替换 AjaxTabbedPanel ，我就不会遇到这个问题。虽然我仍然不确定这是为什么。谁能启发我吗？

    add(new TabbedPanel("tabs", tabs));

Answer 1

通过 JavaScript 对表进行排序很可能是使用特定 DOM-Id 调用的函数，并且似乎是在“onLoad”执行的。然后它访问当前显示的表并完成工作。
通过 Ajax 更改面板的内容不会触发“onLoad”，因此该函数不会再次执行。 TabbedPanel 重新加载页面并因此执行您的脚本。
由于动态生成的 DOM-Id，使用 AjaxTabbedPanel 选择以前的可排序表不起作用。

您的解决方案是将 AjaxCallDecorator 添加到 AjaxTabbedPanel 的链接中，或者包含脚本或至少包含对选项卡式面板的函数调用。

至少这是在没有看到任何来源的情况下想到的......

编辑：
您可能想查看 The Wicket Wiki。有关于点击AjaxLink后如何调用js的描述。这正是应该解决您的问题的方法。

摘要：只需添加

link.add(new AttributeAppender("onclick", new Model("myTableSortingScript();"), ";"));

到AjaxTabbedPanel生成的链接中即可。

Answer 2

在 Wicket 6.0 中，您可以在组件的基础上运行 JavaScript：只需为您的组件重写 renderHead(IHeaderResponse response)：

@Override
public void renderHead(IHeaderResponse response) {
    super.renderHead(response);

    response.render(new OnLoadHeaderItem("initalizeMe(\"" + getMarkupId() + "\");"));
}

每次 AjaxTabbedPanel 加载组件时都会执行initializeMe(mycomponentId)。这也适用于标准 TabbedPanel。

Answer 3

没有真正的想法，因为我不确定代码在做什么，但我的 面板管理器也遇到了类似的问题。基本上，如果您使用内容中的“innerhtml”脚本将 HTML 动态加载到面板（div 或其他元素）中，则不会执行。

为了解决这个问题，我扫描加载的内容中的“脚本”标签，并使用 DOM 方法附加它们 - 这确实会运行脚本并使其可用。我的“加载”方法是：

    // Load Content
Panel.load = function(Content) {

        // "null" the old (to clear it)
    Panel.innerHTML = null;

        // Load the content
    Panel.innerHTML = Content;

        // Load Scripts
    var AllScripts = Panel.getElementsByTagName("script");
    var AllScriptsCnt = AllScripts.length;
    for (var Cnt = 0; Cnt < AllScriptsCnt; Cnt++){
        var CurScript = document.createElement('script');
        CurScript.type = "text/javascript";
        CurScript.text = AllScripts[Cnt].text;
        Panel.appendChild(CurScript);
    };

};

同样，不确定这是否是问题所在，但根据我的经验，这听起来非常符合目标。