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調用頁面頂部

回答

相關問題