Wicket 6-使用AjaxCallListener防止jQuery调用滚动到顶部

Question

在我的Wicket（6.27）页面中，我有一个AjaxLink。 在此AjaxLink中，我使用AjaxCallListener来调用一些要显示的javascript，并使用一个旋转器div来填充页面。 Javascript是一个简单的addClass / removeClass调用。

调用此addClass / removeClass时，页面将滚动到顶部。 这是不希望的。 我知道addClass / removeClass是滚动的原因，因为当我删除这些时，一切都很好。

在我的情况下，如何防止页面在链接单击上滚动？

下面的代码段：

html中的链接：

<a wicket:id="do-things-link" class="do-things-link" href="javascript:void(0)">Do The Things</a>

代码中的链接：

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

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

和js代码：

function displayGlobalSpinner() {
    $('#global-page-activity-indicator').addClass('on');
}

function hideGlobalSpinner() {
    $('#global-page-activity-indicator').removeClass('on');
}

全局微调器可在html中的其他内容下找到：

<div id="global-page-activity-indicator" class="am-loading-spinner">

该类的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);
}

Answer 1

您对doSomething(target);到底做了什么？ ？ 可能是您向目标添加了一些组件，它将被重新渲染并替换为标记，然后您将获得“顶部滚动页面”。