Javascript: mêmes options après rechargement

Résolu
neeteex Messages postés 76 Date d'inscription   Statut Membre Dernière intervention   -  
neeteex Messages postés 76 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je souhaite utiliser l'exemple donné tout en bas de cette page : http://www.rcweb.fr/web/javascript.html

Voici le code : 

<div id="mondiv1">mon div 1</div>
<div id="mondiv2" style="visibility:hidden">mon div 2</div>
<input type="button" value="changer de div visible" onclick="changeDiv()">
<script>
function changeDiv()
{
	if(document.getElementById('mondiv2').style.visibility == 'visible')
	{
		montrer('mondiv1');
		cacher('mondiv2');
	}
	else
	{
		cacher('mondiv1');
		montrer('mondiv2');
	}
}
</script>


Comme on peut le voir sur cette page, lorsque l'on recharge la page après avoir "changé de div" pour afficher "div2", on se retrouve automatiquement sur "div1".

Existe-t-il un moyen d'utiliser ce code (ou un autre) pour que l'internaute qui recharge la page se retrouve dans la configuration qu'il avait choisie avant le rechargement ?

Autrement dit, est-ce qu'il est possible de faire en sorte qu'un internaute ayant sélectionné "div1" recharge la page en mode "div1", tandis que l'internaute qui aura sélectionné "div2" retrouvera "div2 après le rechargement?

Merci beaucoup.


En particulier l'exemple final qui me permet de vous demander comment faire pour réaliser un exemple équivalent mais qui garderait l'affichage "div2" ou "div1" au rechargement de la page ? Bref, comment passer en paramètre l'état actuel de la page, afin qu'il n'y ai pas besoin de cliquer à nouveau sur le bouton pour revenir à l'état souhaité après rechargement ?

Merci beaucoup de m'éclairer là dessus.

Hugo Borrell, webmaster amateur.

11 réponses

Réponse 1 / 11
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
Voilà: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>test</title>
<script language="JavaScript"><!--
//avec la methode display= none  /block les div ne prennent pas de place si non visibles
//avec la methode  visible=hidden / visible les div même non affichés occupent leur emplacement

function setCookie(sName, sValue) {
	var today = new Date(), expires = new Date();
	expires.setTime(today.getTime() + (365*24*60*60*1000));
	document.cookie = sName + "=" + sValue + ";expires=" + expires.toGMTString();
}

function getCookie(sName) {
	var cookContent = document.cookie, cookEnd, i, j;
	var sName = sName + "=";

	for (i=0, c=cookContent.length; i<c; i++) {
		j = i + sName.length;
		if (cookContent.substring(i, j) == sName) {
			cookEnd = cookContent.indexOf(";", j);
			if (cookEnd == -1) {
				cookEnd = cookContent.length;
			}
		return decodeURIComponent(cookContent.substring(j, cookEnd));
		}
	}
	return null;
}

function changeDiv(){
	if(document.getElementById('mondiv2').style.display == 'none')	{
		montrer('mondiv2');
		cacher('mondiv1');
	}	else	{
		cacher('mondiv2');
		montrer('mondiv1');
	}
}

function cacher(lobjet){
	document.getElementById(lobjet).style.display = 'none';
	//pas besoin de mettre un autre cookie, la fonction montrer va "ecraser" l'éxistant avec la nouvelle valeur
}

/** rend Visible l'objet passé en paramètre */
function montrer(lobjet){
	document.getElementById(lobjet).style.display = 'block';
	setCookie('div_visible', lobjet); //on memorise dans le cookie quel est le div visible
}
//fonction qui va voir le cookie au rechargement de la page et afficher celui choisi auparavent 
function init_div(nom){
    var div_memo= getCookie('div_visible');
		//alert("Div memo cookie: "+div_memo);
	if(div_memo==null){
	//par defaut au premier chargement on affiche le div1
		montrer('mondiv1');
		cacher('mondiv2');
	}else{
		if(div_memo=='mondiv1'){
			montrer('mondiv1');
			cacher('mondiv2');
		}else if(div_memo=='mondiv2'){
			montrer('mondiv2');
			cacher('mondiv1');
		}		
	}
}

--></script>



</head>
<body onLoad="init_div();">
<div id="mondiv1">mon div 1</div>
<div id="mondiv2">mon div 2</div>

<input value="changer de div visible" onclick="changeDiv()" type="button">


</body>
</html>
1
Réponse 2 / 11
Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   1 011
 
Bonjour,

Renseigne-toi sur les cookies. C'est, je pense, la meilleure solution pour faire ce que tu souhaites. Malheureusement, je ne maîtrise pas leur utilisation en javascript ; il y a des bouts de code qui traînent sur le net qui font ça très bien.

Xavier
0
Réponse 3 / 11
neeteex Messages postés 76 Date d'inscription   Statut Membre Dernière intervention   1
 
Super piste je pense ! Merci beaucoup !

si quelqu'un qui maitrise un peu peut me mettre un bout de code d'exemple...

Sinon je chercherai, mais la jungle des javascript est dense ;)
0
Réponse 4 / 11
lewis34 Messages postés 2557 Date d'inscription   Statut Membre Dernière intervention   352
 
pourquoi tu veut garder la div cliquée au rechargement ?
le javascript s'execute coté poste client, donc pas besoin de rechargement..?

si vraiment tu peut faire un truc comme ça il te faudra passer par l'ajax et tu passe le style de ta div en parametre.

si tu maitrise pas l'ajax , une autre solution pourrait etre l'utilisation des champs cachés et du php ,dans lequel tu insere le style choisi , visible ou hidden et tu recupere la valeur en en post.

ce ne sont que des idées, mais l'ajax me semble le mieux
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
neeteex Messages postés 76 Date d'inscription   Statut Membre Dernière intervention   1
 
EDIT : le commentaire avait sauté.
Je disais que l'intérêt était de garder le même aspect pour chacune des pages du site contenant la même partie.
Et aussi que le code ci-dessous qui marche pas devait approcher quelque chose de possible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>test</title>
<script language="JavaScript"><!--

function setCookie(sName, sValue) {
var today = new Date(), expires = new Date();
expires.setTime(today.getTime() + (365*24*60*60*1000));
document.cookie = sName + "=" + sValue + ";expires=" + expires.toGMTString();
}
function getCookie(sName) {
var cookContent = document.cookie, cookEnd, i, j;
var sName = sName + "=";

for (i=0, c=cookContent.length; i<c; i++) {
j = i + sName.length;
if (cookContent.substring(i, j) == sName) {
cookEnd = cookContent.indexOf(";", j);
if (cookEnd == -1) {
cookEnd = cookContent.length;
}
return decodeURIComponent(cookContent.substring(j, cookEnd));
}
}
return null;
}




function changeDiv()
{
if(document.getElementById('mondiv2').style.visibility == 'visible')
{
montrer('mondiv1');
cacher('mondiv2');
}
else
{
cacher('mondiv1');
montrer('mondiv2');
}
}
function cacher(lobjet)
{
document.getElementById(lobjet).style.visibility = 'hidden';
setCookie(lobjet, 'hidden');

}

/** rend Visible l'objet passé en paramètre */
function montrer(lobjet)
{
document.getElementById(lobjet).style.visibility = 'visible';
setCookie(lobjet, 'visible');

}


--></script>



</head>
<body>
<div id="mondiv1" style="visibility:" getCookie(mondiv1) >mon div 1</div>
<div id="mondiv2" style="visibility:" getCookie(mondiv1) >mon div 2</div>

<input value="changer de div visible" onclick="changeDiv()" type="button">


</body>
</html>
0
Réponse 6 / 11
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
<div id="mondiv1" style="visibility:" getCookie(mondiv1) >mon div 1</div>

ta fonction ne sera pas lancee ainsi

il faudrait que tu poses un seul cookie avec pour nom 'div_visble' et comme valeur div1 ou div2

ensuite tu mets <body onLoad="init_div();">

et tu cree une fonction JS init_div() qui va lire le cookie et lancer la fonction montre du div concerné
0
Réponse 7 / 11
neeteex Messages postés 76 Date d'inscription   Statut Membre Dernière intervention   1
 
"tu cree une fonction JS init_div() qui va lire le cookie et lancer la fonction montre du div concerné"

heu, là je bloque un peu : je trouve pas le moyen de faire un simple "echo" en js !

bon je manque de bases en js, je pensais pas que ce serait si compliqué :/
0
Réponse 8 / 11
lewis34 Messages postés 2557 Date d'inscription   Statut Membre Dernière intervention   352
 
un exemple de fonction pour lire un cookie 
 function JS init_div(nom)
    {
        deb = document.cookie.indexOf(nom + "=")
        if (deb >= 0)
         {
            deb += nom.length + 1
            fin = document.cookie.indexOf(";",deb)
            if (fin < 0) fin = document.cookie.length
            return unescape(document.cookie.substring(deb,fin))
            }
//si c'est vide
        return ""
        }


et pour enn faire un 

function setCook(nom,valeur)
 {
//valeur correspond a la valeur de ta div
        document.cookie = nom + "=" + escape(valeur)
}


non en JS ya pas d'echo, tu peut soit placer des alert -->alert(ta_variable_a_tester);

soit ecrire dans un div exemple: dans ta page tu a un div test
<div id="test></div>

dans ton JS document.getElementById("test").innerHTML=ta_varaiable_a_tester;

cete solution est super pratique quand tu est dans des boucles, car contrairement aux alert, ça ne bloque pas le programme

et ensuite tu a document.write

en esperant t'avoir aidé

bonne journée à toi Alain ;-)
0
Réponse 9 / 11
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
Merci B J à toi aussi Michel
0
Réponse 10 / 11
neeteex Messages postés 76 Date d'inscription   Statut Membre Dernière intervention   1
 
Merci mais... Rien à faire, je n'arrive pas à faire un affichage optionnel. Vous connaissez un tutoriel javascript VRAIMENT pas à pas ? Dans le principe ça ressemble au PHP, mais dans la pratique ces histoires de méthodes me perdent complètement.
0
Réponse 11 / 11
neeteex Messages postés 76 Date d'inscription   Statut Membre Dernière intervention   1
 
Super, merci Alain, avec ça je devrais m'en sortir !
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse