Comment empêcher la fenêtre du navigateur de se déplacer vers le haut de la page lorsque l'utilisateur clique sur un bouton radio jQueryUI ?

Question

J'ai des boutons radio configurés comme ceci :

<div id="typeRadios">
    <input id="note_notetype_note1" name="note[notetype]" type="radio" value="note1" /><label for="note_notetype_note1">note1</label>
    <input id="note_notetype_note2" name="note[notetype]" type="radio" value="note2" /><label for="note_notetype_note2">note2</label>
</div>

que je transforme en boutons jQueryUI comme ceci :

$("#typeRadios").buttonset();

Voici le HTML qui en résulte :

<input type="radio" value="note1" name="note[notetype]" id="note_notetype_note1" class="ui-helper-hidden-accessible">
<label for="note_notetype_note1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note1</span></label>
<input type="radio" value="note2" name="note[notetype]" id="note_notetype_note2" class="ui-helper-hidden-accessible">
<label for="note_notetype_note2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note2</span></label>

Les boutons fonctionnent, mais chaque fois que je clique sur l'un d'entre eux, la fenêtre d'affichage du navigateur est ramenée en haut de la page, de la même manière que lorsque vous cliquez sur un bouton de la barre d'outils. <a href="#">link</a> lien.

J'utilise jQuery 1.4.2 et jQueryUI 1.8.7. Comment puis-je éviter ce comportement ? Merci de votre lecture.

EDIT : Le <a href="#">link</a> Il manquait une partie.

Answer 1

Le gestionnaire de clics suivant empêcherait cela

function(e){
  e.preventDefault();
  ... your code
}

Answer 2

J'ai eu le même problème

Correction rapide pour les FF seulement (en se référant à votre code) serait

$("div#typeRadios input[type='radio']").hide();

solution pour FF et IE

Le coupable était une règle CSS dans la feuille de style principale :

input[type="radio"]{position:relative;top:3px;}

qui était en conflit avec jQueryUI .ui-helper-hidden-accessible clase

J'ai dû rendre cette règle plus spécifique en la limitant aux "vrais" formulaires qui sont utilisés pour la soumission des données.

form dl.zend_form input[type="radio"]{position:relative;top:3px;}

Answer 3

J'ai rencontré des cas où l'utilisation du lien d'ancrage vide href="#" provoquait de tels sauts d'affichage (surtout s'il était utilisé à l'intérieur d'une iframe dans chrome). Essayez de le remplacer par href="javascript:void(0)"

Answer 4

Ce n'est pas le comportement de l'interface utilisateur jquery, comme on peut le voir à l'adresse suivante http://www.jsfiddle.net/gaby/3Wz3A/

Elle l'est, le plus probable ou un autre code que vous ajoutez à ces boutons.

Que se passe-t-il lorsque vous cliquez sur ces boutons radio ? Vous cachez et chargez le contenu ou autre chose ?

Si vous attachez un autre gestionnaire à ces boutons radio, veuillez montrer ce code, car il pourrait très bien être le coupable.

Answer 5

Comme pour la solution de Christos, pour remplacer la feuille de style, utilisez

top: auto;

Je l'ai trouvé dans un rapport de bug de Wordpress : http://core.trac.wordpress.org/ticket/23684 L'idée est qu'il n'est pas nécessaire de définir "left" et "top" comme de grands négatifs.

Note à l'attention des commentateurs qui discutent du gestionnaire de clic ou du href : jquery-ui définit les gestionnaires pour ses besoins, je préfère donc ne pas les modifier et devoir ensuite tester l'accessibilité, la navigation au clavier, etc. La solution du style override semble inoffensive.

[edit 2014/02/03] Wordpress a corrigé ce problème dans la version 3.8.1 (ou antérieure). Ce correctif est plutôt cool, que le positionnement négatif disparaisse ! Il est remplacé par clip: rect(0 0 0 0); border: 0; ce qui est apparemment la façon de faire de jquery-ui. Voir https://core.trac.wordpress.org/changeset/26602

Cette chose est encore absolument positionnée, donc laisser dans ma fixation ou celle de Christo devrait être OK.