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

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

修改我刚刚发现，如果我将AjaxTabbedPanel替换为TabbedPanel，我就没有这个问题了。虽然我还不确定为什么会这样。谁能开导我？

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

Answer 1

通过JavaScript对表进行排序很可能是使用特定DOM-Id调用的函数，并且似乎是执行'onLoad'。然后它访问当前显示的表并完成它的工作。通过Ajax更改Panel的内容不会触发'onLoad'，因此不会再次执行该功能。 TabbedPanel重新加载页面，因此执行了您的脚本。由于动态生成的DOM-Ids，使用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响应）：

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

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

每次AjaxTabbedPanel加载组件时，都会执行

initializeMe（ mycomponentId ）。这也适用于标准的TabbedPanel。

Answer 3

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

为了解决这个问题，我扫描加载的“脚本”标签内容并使用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);
    };

};

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

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

3 个答案: