Wicket 6 - 使用AjaxCallListener阻止jQuery调用页面顶部

在我的Wicket（6.27）页面中，我有一个AjaxLink。在这个AjaxLink中，我使用一个AjaxCallListener来调用一些javascript来显示它，并使用他的一个spinner div来填充页面。 Javascript是一个简单的addClass/removeClass调用。Wicket 6 - 使用AjaxCallListener阻止jQuery调用页面顶部

当调用这个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); 
}

来源

2017-08-25 Chris Spiking

我真的不明白为什么这个JS代码会滚动页面的原因。这是你在JS函数中做的所有事情吗？ –

这就是他们所做的一切，如图所示。我已经添加了更多关于如何在html中声明微调框的信息以及它的相关css类（如果这与它有关） –

为什么不使用Wicket的AjaxIndicatorAppender/IAjaxIndicatorAware方法？（另见：https://github.com/apache/wicket/blob/master/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/AjaxIndicatorAppender.java） – RobAu

你在做什么doSomething(target);？它可能是你添加一些组件到目标，它会被新的渲染和替换标记，然后你得到一个“顶部滚动页面”。

来源

2017-09-17 09:55:04 Mot4

不幸的是，我认为可能是这样。我们使用的是ShieldUI图表，并且在代码中的某些位置“重新初始化”它们，因为图表组件不能被替换或删除/添加，因为它们的js脚本都很有趣。这可能是我痛苦的真正原因。 –

Wicket 6 - 使用AjaxCallListener阻止jQuery调用页面顶部

回答

相关问题