[英]Wicket 6 - Prevent jQuery call scrolling page to top using AjaxCallListener
Within my Wicket (6.27) page, I have an AjaxLink. 在我的Wicket(6.27)页面中,我有一个AjaxLink。 Within this AjaxLink I use an AjaxCallListener to call some javascript to display and his a spinner div that fills the page.
在此AjaxLink中,我使用AjaxCallListener来调用一些要显示的javascript,并使用一个旋转器div来填充页面。 The Javascript is a simple addClass/removeClass call.
Javascript是一个简单的addClass / removeClass调用。
When calling this addClass/removeClass the page scrolls to the top. 调用此addClass / removeClass时,页面将滚动到顶部。 This is undesirable.
这是不希望的。 I know that the addClass / removeClass is to blame for the scrolling as when I remove these, everything is fine.
我知道addClass / removeClass是滚动的原因,因为当我删除这些时,一切都很好。
How do I prevent the page from scrolling on link click in my situation? 在我的情况下,如何防止页面在链接单击上滚动?
Code snippets below: 下面的代码段:
The link in html: html中的链接:
<a wicket:id="do-things-link" class="do-things-link" href="javascript:void(0)">Do The Things</a>
The link in the code: 代码中的链接:
final AjaxLink link = new AjaxLink(WICKET_ID_THE_LINK)
{
@Override
protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
super.updateAjaxAttributes(attributes);
attributes.getAjaxCallListeners().add(new GlobalSpinnerListener());
}
@Override
public void onClick(AjaxRequestTarget target)
{
doSomething(target);
}
};
The AjaxCallListener - GlobalSpinnerListener class (where customScriptReference is my js code, shown after): AjaxCallListener-GlobalSpinnerListener类(其中customScriptReference是我的js代码,如下所示):
@Override
public CharSequence getBeforeHandler(Component component) {
return ";displayGlobalSpinner();";
}
@Override
public CharSequence getCompleteHandler(Component component) {
return ";hideGlobalSpinner();"
}
@Override
public void renderHead(Component component, IHeaderResponse response) {
ResourceReference jqueryReference =
Application.get().getJavaScriptLibrarySettings().getJQueryReference();
response.render(JavaScriptHeaderItem.forReference(jqueryReference));
response.render(JavaScriptHeaderItem.forReference(customScriptReference) );
}
And the js code: 和js代码:
function displayGlobalSpinner() {
$('#global-page-activity-indicator').addClass('on');
}
function hideGlobalSpinner() {
$('#global-page-activity-indicator').removeClass('on');
}
The global spinner is found in the html under other content in the body: 全局微调器可在html中的其他内容下找到:
<div id="global-page-activity-indicator" class="am-loading-spinner">
And the css for that class is this: 该类的CSS是这样的:
/* Absolute Center Spinner */
.am-loading-spinner {
display: none;
position: fixed;
z-index: 9999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.am-loading-spinner.on {
display: block;
}
/* Transparent Overlay */
.am-loading-spinner:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
What do you do exactly on doSomething(target);
您对
doSomething(target);
到底做了什么? ? ? It could be you add some component to the target, it will be new rendered and replaced in markup, then you get a "top scrolled page".
可能是您向目标添加了一些组件,它将被重新渲染并替换为标记,然后您将获得“顶部滚动页面”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.