11540 sujets

JavaScript, DOM et API Web HTML5

Forcer un clic avec jquery

Bonjour.

J'ai déjà pas mal programmé avec JS, mais je débute avec jQuery et je but sur un problème qui me paraissait pourtant simple au départ.
Mon objectif, c'est que quand je valide un formulaire, la page scroll automatiquement jusqu'au formulaire en question pour que l'utilisateur puisse le réutiliser sans avoir à descendre lui-même.
Comme j'avais déjà mis un bouton en haut de la page pour scroller vers ce formulaire, je me suis dit que j'allais le réutiliser pour ça : lorsque le formulaire est validé, j'inclus dans le code PHP qui le traite un petit bout de jquery qui simule le clic sur le bouton... et le tour devrait être joué, sauf que ça marche pas.

Voici le code jQuery associé au bouton (et placé dans le <head>) :

$(document).ready(function(){
	$("input[name=telephone]").click(function(){
		$("body").scrollTop(1600);
	});
});


et voici l'instruction par laquelle j'espérait simuler le clic sur le lien en question (placée après <body>) :


echo "<script>$(\"input[name=telephone]\").click();</script>";


Qu'est-ce qui ne va donc pas dans mon code ?
Merci d'avance
Hello,

Déjà, voici ce que tu devrais logiquement appeler dans ton script PHP :
$("body").scrollTop(1600);

C'est ça que tu veux produire, et pas restiuer un appel de fonction click() sans aucune instruction dedans.
Je suppose que tu as simplement été étourdi sur ce coup, car tu as inversé les deux éléments (appel de fonction et action à effectuer) Smiley biggrin

Sinon, tu n'as pas tout simplement la possibilité de mettre une ancre dans l'attribut action de ton élément form ? Sauf erreur et pour autant que le formulaire renvoie à la même page, ce serait bien plus simple Smiley smile
salut,
un peu hors sujet, tu devrais récupérer la valeur de la position "top" de ton formulaire et ne pas la passer directement (1600).
Merci pour vos réponses.
Zelalsan, bonne idée, je vais voir ça.

audrasjb, $("body").scrollTop(1600); c'est que je voulais faire au début, mais comme ça ne fonctionnait pas, j'ai cherché une autre solution. Je viens de retester et ça ne marche pas mieux :

echo "<script>$(\"body\").scrollTop(1600);</script>";


Je précise que l'instruction PHP qui précède, elle, s'exécute parfaitement, donc l'exécution arrive bien jusqu'à cette ligne. Je précise aussi que la console d'erreur n'affiche aucune erreur.

Quant à l'idée d'utiliser une ancre, en fait je ne peux pas m'en servir ici car le formulaire se trouve avec d'autres à l'intérieur d'un bloc dont l'affichage est lui-même déjà lié à une ancre. Donc si je guide mon formulaire vers une autre ancre, ça va refermer le bloc.

Une autre idée ?

Merci d'avance
Au fait, j'ai aussi essayé ça mais ça ne marche pas mieux :

echo "<script>$(document).ready($(\"body\").scrollTop(1600));</script>";
Ok, alors j'ai testé ce bout de code dans une autre page plus "standard" et là ça fonctionne.
J'en conclu que ce qui empêche son bon fonctionnement, c'est justement le fait que le formulaire en question se trouve dans une boite qui a un height de 0 par défaut et qui passe en height: auto grâce à l'ancre visée par la pseudo classe target.
Je suppose qu'au moment où l'instruction est exécutée, le navigateur (Safari) n'a pas encore calculé la hauteur de la page en tenant compte de la hauteur du bloc avec le "height: auto". Donc, hauteur de page très faible, donc un scroll de 1600 revient à rester verticalement au même endroit dans une page qui ne fait peut-être que 500 ou 600 de hauteur.
Que faire ?
Imposer un délai avant l'exécution du l'instruction jQuery pour quelle bloc ait eu le temps de se déployer ?
Est-ce possible ?
Comment ?
Est-ce que ça marcherait ?

Merci pour votre aide.
Une autre idée : est-ce possible en jQuery de scroller vers une ancre à la façon d'un target, mais sans utiliser target ?

Merci d'avance
Zelalsan, j'ai essayé ta suggestion, mais ça ne marche pas vraiment :

$(document).ready(function(){
	var t = $('#telephone').position();
	alert(t.top);
});


Il me donne 201, alors que mon formulaire est placé beaucoup plus bas.
De fait, quand je tente le scrollTop(t.top), il descend à peine.
Zelalsan, j'ai ré-essayé ta suggestion, correctement cette fois-ci, et ça marche très bien :

$(document).ready(function(){
	$("input[name=telephone]").click(function(){
		var t = $('#telephone').position();
		$("body").scrollTop(t.top - 100);
	});
});


Merci !
Sujet clos
Aller à