Wicket 6 - Empêcher la page de défilement de l'appel jQuery d'utiliser AjaxCallListener

Question

Sur ma page Wicket (6.27), j'ai un AjaxLink. Dans cet AjaxLink j'utilise un AjaxCallListener pour appeler du javascript à afficher et un div de spinner qui remplit la page. Le Javascript est un simple appel addClass/removeClass.

Lorsque vous appelez cette classe addClass/removeClass, la page défile vers le haut. Ceci est indésirable. Je sais que l'addClass/removeClass est à blâmer pour le défilement comme quand je les enlève, tout va bien. Comment puis-je empêcher le défilement de la page sur le lien cliquer dans ma situation?

extraits de code ci-dessous:

Le lien en html:

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

Le lien dans le 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); 
    } 
}; 

La AjaxCallListener - classe GlobalSpinnerListener (où customScriptReference est mon code js, montré après):

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

Et le code js:

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

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

La fileuse mondiale se trouve dans le code HTML sous tout autre contenu dans le corps:

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

Et le css pour cette classe est la suivante:

/* 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

Que faites-vous exactement sur doSomething(target);? Il se peut que vous ajoutiez un composant à la cible, il sera nouveau rendu et remplacé dans le balisage, puis vous obtiendrez une "page avec le plus haut défilement".