Question

在我的Wicket（6.27）页面中，我有一个AjaxLink。在这个AjaxLink中，我使用AjaxCallListener来调用一些javascript来显示它和一个填充页面的spinner 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);上做了什么？它可能是你向目标添加一些组件，它将被新渲染并在标记中替换，然后你得到一个“顶部滚动页面”。

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

1 个答案: