Atteindre une ancre au chargement de la page [Résolu]

[mcfly37]

Bonjour,

Alors voici mon problème je travaille sur une application en jsf 1.1 et sur une page je dispose notamment d'une selectOneMenu (une liste déroulante quoi) qui fait un submit de la page sur chaque événement onChange. Mais malheureusement cette liste est située en bas de page et lors du submit je me retrouve automatiquement en haut de page ce qui est plutôt pas très ergonomique... Je me suis donc tourné vers le javascript en utilisant un champ caché prenant la valeur de l'ancre ou je veut aller (car évidement j'ai plusieurs listes dans cette page qui chacunes vont à un endroit différent de la page) et une fonction sur l'événement onLoad de la page qui doit me positionner sur l'ancre voulue.

Sachant que ces listes sont placées dans une dataTable elles même dans une subview qui est dans un form... enfin bref tout cela est bien enterré au fin fond de la page ^^

La liste :

Code :

1
2
3
4
5
6
<h:selectOneMenu id="somTeleTransmission" value="#{specTiers.teletransmission}" onchange="listeMutuelleSpecifique()" rendered="#{partenaireBackBean.currentSpecifiqueTiersCommune.forOrganismePrevadies}">
                <f:converter converterId="TeletransmissionConverter" />
                <t:selectItems value="#{partenaireBackBean.teletransmissionList}" var="teletrans"
                               itemLabel="#{teletrans.libelle}"
                               itemValue="#{teletrans}"/>
            </h:selectOneMenu>

Les champs cachés :

Code :

1
2
    <hinputHidden name="mutuelleSpecifique"/>
    <h:inputHidden id="choixAncre" value="mutuelleSpecifique"/>

Le code javaScript :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
function listeMutuelleSpecifique(){
	document.getElementById("partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:choixAncre").value="mutuelleSpecifique";
	document.forms[0].submit();
 
}
 
function atteindreAncre(){
	var ancre=document.getElementById("partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:choixAncre").value;
	if(ancre=="mutuelleSpecifique"){
		window.location.hash="#mutuelleSpecifique";
        }
}

J'ai deux problèmes la dessus, premièrement je n'arrive pas à conserver la valeur du champ choixAncre lors du submit de la page... j'ai bien essayé d'utiliser un saveState en bindant ce champ sur une valeur de mon backBean jsf mais étant donné que je change sa valeur via javascript je doute de l'efficacité de la méthode... De plus je doit avoir une erreur de syntaxe pour atteindre l'ancre car après avoir essayé en forcant la valeur de l'ancre à ce que je veut (et l'avoir vérifié via des alert) je ne me retrouve quand même pas sur l'ancre au chargement....

Voila donc si quelqu'un à une idée d'ou viennent mes problèmes et surtout de comment les résoudre il gagnera ma reconnaissance (non pas de bière ^^).

Merci a tous d'avance!!

[SpaceFrog]

.hash modifie juste le hash

si tu veux qu'il soit effectif ...

Code :

window.location.href="#ancre"

[mcfly37]

Bonjour et merci de la rapidité de la réponse ;-)

Effectivement je n'avais pas connaissance de window.location.href... Mais malheureusement pas de changement je me retrouve toujours en haut de page... Est-ce mon input qui est mal nommé? Ou le href n'est pas positionné sur le bon événement? Que de questions ^^

en tout cas merci de la réponse

[SpaceFrog]

mets lui un id ...

[Bovino]

Code :

document.getElementById("partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:choixAncre")

Tu es bien sûr que tu as un élément dans la page dont l'id est "partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:choixAncre" ?
A en croire ton code (mais bien entendu, le code HTML généré serait plus utile)

Code :

<h:inputHidden id="choixAncre" value="mutuelleSpecifique"/>

l'id serait plutôt "choixAncre", tout simplement...

[mcfly37]

Bonjour,

Alors pour répondre à bovino oui l'id de mon élément est bien partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:choixAncre, car jsf concatène les id's des éléments imbriqués, c'est bien l'id indiqué dans le html généré... Le problème ne viens pas d'ici car j'arrive sans problèmes a avoir la valeur de choixAncre, le problème est plutôt que choixAncre se réinitialise lors du rechargement de la page même lorsque je le binde sur une valeur de mon backBean jsf...

Et d'ailleurs en regardant dans ce code html généré je m'aperçois que l'inputHidden mutuelleSpecifique (sur laquelle est positionnée mon ancre) n'est pas présente...

En fait après longues et fastidieuses recherche j'ai juste oublié les deux points entre h et inputHidden... Bon par contre ça ne marche toujours pas... Mais j'essaye de remplacer le href par l'id réel de mon input hidden et je vous dit ce que ça donne...

Merci de vous intéresser à mes problèmes en tout cas!!

[mcfly37]

Bon et bien en remplaçant

Code :

1
2
3
4
5
6
function atteindreAncre(){
	var ancre=document.getElementById("partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:choixAncre").value;
	if(ancre=="mutuelleSpecifique"){
		window.location.hash="#mutuelleSpecifique";
        }
}

Par :

Code :

1
2
function atteindreAncre(){	window.location.href="#partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:mutuelleSpecifique";
}

(A noter que j'ai virer le test pour le moment histoire d'être sur de l'origine de mon problème...) Pas de changement je reste toujours désespérément fixé sur le haut de page... La j'avoue que je commence à tomber un peu a court d'idée hein ^^

[SpaceFrog]

on peut voir le html généré ?
(afficher source, copier coller )

[mcfly37]

Alors voici le html généré des inputHidden (je ne met pas la page entière car elle est plutot... conséquente...) :

Code :

<input type="hidden" id="partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:mutuelleSpecifique" name="partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:mutuelleSpecifique" value="pouet" /><input type="hidden" id="partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:choixAncre" name="partenaireEditForm:frmEditGlobal:partenaireEditSpecifiqueForm:blocSpecifiqueCommuneMutuelle:choixAncre" value="mutuelleSpecifique" />

Et j'ai tester en faisant window.location.href = window.location.href + "#monAncre" car sans faire de concaténation je me retrouvait avec un beau plantage... Mais outre le fait de m'afficher l'ancre dans l'url de ma page (ce qui ne plait d'ailleurs pas des masses mais bon si ya pas moyen de faire autrement pour l'instant...) Je n'arrive toujours pas au bon endroit, et j'ai essayé avec l'id contenue dans le html généré, celui que j'ai spécifier dans ma page jsf, avec ou sans # rien n'y fait...

[SpaceFrog]

et avec un id plus .....



court ?

[Bovino]

Euh... une ancre pointant sur un input hidden (ou sur tout élément non affiché de la page), c'est sûr que ça ne risque pas de fonctionner

[Sergejack]

Au/après chargement, vous faites un appel à atteindreAncre() au moins ?

[mcfly37]

Arf malheureusement je ne peut pas avoir d'id plus court car l'id présent dans le html généré est construit par concaténation des id des différents éléments imbriqués et c'est fait automatiquement par jsf (par exemple l'inputText iT présent dans la dataTable dT présente dans la subView sV présente dans le form form aura comme id form:sV:dT:iT_x x étant la ligne de la dataTable...) et je n'ai absolument pas la main dessus...

Par contre merci à Bovino, en effet j'ai remplacé le inputHidden par un outputText et ça marche niquel ;-) Merci beaucoup çà me retire une épine du pied

Bon par contre pour vraiment me permettre de bien dormir ce soir sans m'arracher les cheveux dans mon sommeil sur ce problème, avez vous une idée pour le deuxième problème?

Je le rappel : j'utilise l'inputHidden pour "sauvegarder" l'endroit ou je veut que la page me positionne au rechargement (en gros j'ai deux listes déroulantes qui font un submit de la page et je veut que lors de chaque submit je revienne bien à la liste correspondante). donc pour ce faire j'appelle une fonction qui renseigne choixAncre avec la valeur qui va bien puis je fait le test dans atteindreAncre() pour atteindre l'ancre adéquate suivant la valeur de choixAncre. Seulement lors du submit choixAncre est réinitialisé et donc je ne sais pas vers quelle ancre aller...

En tout cas merci de vos réponse et de la rapidité et la perspicacité de celles-ci

[NoSmoking]

Bonsoir,
une méthode un peu moins standard est de sauvegarder dans le name de la window la position du scroll et de faire scroller la page sur le recharchement après lecture de la valeur

un petit exemple

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
</style>
<script type="text/javascript">
(function(){
  function getScrollPage(){
    var dE = document.documentElement,
        dB = document.body;
  	var posX = ( dE && dE.scrollLeft || dB && dB.scrollLeft || 0);
  	var posY = ( dE && dE.scrollTop  || dB && dB.scrollTop  || 0);
  	return {x : posX, y : posY};
  }
  window.onload = function(){
    if( window.name){
      var pos = window.name.split('=')[1] || 0;
      window.scrollTo( 0, pos);
    }
  }
  window.onunload = function(){
    var pos = getScrollPage();
    window.name = "scrollY=" +pos.y;
  }
})();
</script>
</head>
<body>
<div style="height:1000px;">
</div>
<div style="height:400px;">
  <form action=""  name="formulaire">
    <input type="text" value="the value" name="valeur"><br>
    <input type="submit" value="Envoyer">
  </form>
</div>
</body>
</html>

a tester sur les différents navigateurs quand même.

[mcfly37]

Bonjour bonjour!!

Merci pour ta réponse noSmoking, par contre je suis un peu (beaucoup) débutant en javaScript donc la je comprend pas tout ^^

Si j'ai bien compris la fonction getScrollPage va retourner la position du scroll que j'enregistrerais dans le nom de la variable window c'est ça? Par contre je ne vois pas trop comment fonctionne les deux var posX et posY... pourquoi faire dE && dE.scrollLeft ou dB... c'est document.documentElement n'est pas forcément renseigné? Et aussi pourquoi récupérer le scrollLeft et le scrollTop? A priori je n'aurais besoin que du scrollTop non?

Pour le onLoad aussi je ne comprend pas comment pos est alimenté... que fait cette ligne :

Code :

var pos = window.name.split('=')[1] || 0;

?

Pour le onUnLoad je pense avoir saisi le fonctionnement

Et oui je suis un débutant complet en javaScript je travaille habituellement plutôt en java (js c'est moche et ça tu des bébé chats :troll: )

En tout cas merci de votre aide, je me coucherais certainement moins bête ce soir ^^

[NoSmoking]

Si j'ai bien compris la fonction getScrollPage va retourner la position du scroll que j'enregistrerais dans le nom de la variable window c'est ça?

presque, la valeur sera enregistrée dans la propriété name de l'objet window, question de vocabulaire surtout si tu débutes

Par contre je ne vois pas trop comment fonctionne les deux var posX et posY... pourquoi faire dE && dE.scrollLeft ou dB... c'est document.documentElement n'est pas forcément renseigné? Et aussi pourquoi récupérer le scrollLeft et le scrollTop? A priori je n'aurais besoin que du scrollTop non?

exact, c'est simplement que j'ai mis ici une fonction générale, et si tu es sûr de ton coup tu peux effectivement récupérer simplement

Code :

var posY = document.documentElement.scrollTop;

Pour le onLoad aussi je ne comprend pas comment pos est alimenté... que fait cette ligne :

Code :

var pos = window.name.split('=')[1] || 0;

- à la première ouverture de la page window.name n'étant pas renseigné rien ne se passe
- au rechargement on renseigne avec window.name = "scrollY=" +pos.y;, sous la forme clé = valeur.
- au deuxiéme passage la lecture de window.name nous donne donc "scrollY=100", par exemple, il nous faut alors récupérer simplement la valeur.
Pour ce faire on utilise la méthode split de l'objet String qui renvoie sous forme d'Array le résultat après découpage de la chaine selon le caractère passé en paramètre, ici =.
Il suffit de récupérer le contenu du tableau qui se trouve en position 2, soit l'index 1, le premier index des tableau étant 0.
exemple :

Code :

1
2
3
4
var chaine = "scrollY=100";
var resulat = chaine.split('='); // application de la methode
alert( resultat[0]); // contient scrollY
alert( resultat[1]); // contient 100

Nota : les cookies pourrait faire l'affaire également, mais c'est moins FUN!

[mcfly37]

Merci pour ces clarifications ;-)

Donc j'ai appliqué ce code, pas de problèmes cela fonctionne le scroll est bien conservé lors du rechargement de la page. Par contre la valeur de mon selectOneMenu n'est elle pas modifiée (alors que j'ai bien fait un submit du formulaire)... c'est un problème qu'il me semble avoir déjà rencontré mais impossible de me souvenir de comment je l'ai résolue... Je cherche de mon côté dans ma mémoire de poisson rouge mais si jamais quelqu'un à déjà eu ce problème.

En tout cas merci, j'ai bien avancé grâce à vous, en plus en apprenant des choses!!

[mcfly37]

Me revoilà!!

Bon et bien le problème est résolu, désolé noSmoking mais je n'ai pas utilisé ta méthode (et rien a voir avec le fait que je soit un fumeur ) bien qu'elle me plaisait mais le problème ci dessus a fait que...

Donc je suis reparti sur ma méthode précédente mais au lieu de passer par du javaScript pour changer la valeur de choix ancre, j'ai utilisé la propriété valueChangeListener du selectOneMenu qui permet d'appeler une méthode du backBean lors d'un changement sur le selectOneMenu.

Et une autre petite modification, l’utilisation de document.getElementById(monId).InnerHTML au lieu de document.getElementById(monId).value qui me retournait undefined pour une raison que j'ignore... Peut être le fait que le outputText était lié à une valeur du backBean...

En tout cas tout marche a merveille!!!

Je vous remercie tous de votre aide collègues développeurs, et a bientôt pour d'autres problèmes!!! (Qui sait c'est peut être moi qui vous aiderait )