Question

我有一个ModalWindow（来自wicket扩展）以下代码（在html文件中）：

<wicket:head>
<script src="static/js/scroll.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () { 
          ffscroll('.scroller2');
    });
</script>
</wicket:head>

<wicket:panel>
<div wicket:id="scroller2" id="scroller2" style="overflow-x: hidden; overflow-y: auto; height: 240px" class="scroller2 YYYY ZZZZ">
  .... 
</div>
</wicket:panel>

和scroll.js

function ffscroll(id) {
        $(id).scroll(function () { 
            alert(id);
        });
    };

如果我使用一个简单的页面，这段代码可以正常工作：每次滚动时我都会收到警报。

但是在ModalWindow中我看到JavaScript代码在显示模态窗口之前执行，所以我想我需要在显示模态窗口后调用 ffscroll（'。scroller2'）; ，但我不知道该怎么做。

奇怪的是，在firebug中，我的脚本显示如下：

function () {
  ffscroll(".scroller2");
  alert("aaadssd");
}

“而不是'。

Answer 1

将JS放入资源文件中，然后将其添加到您正在使用的组件中是一种很好的做法：

对于全局定义文件：

add(JavascriptPackageResource.getHeaderContribution("js/general.js"));

对于包相对：

add(new JavascriptResourceReference(MyPage.class, "MyPage.js"));

由于ModalWindow使用ajax加载，因此将下载所需的JavaScript源文件并在ajax回调上运行。

或者，如果您查看ModalWindow.show(final AjaxRequestTarget target)它使用AjaxRequestTarget向target.appendJavascript()添加JavaScript，您可以覆盖show方法以添加额外的JavaScript：

...
@Override
public void show(final AjaxRequestTarget target) {
    super.show(target);
    target.appendJavascript("ffscroll('.scroller2');");
}

然后，当在客户端浏览器上调用Ajax回调时，这个JavaScript就会运行。

希望有所帮助

元素完全加载时调用JavaScript函数

1 个答案: