Fonction toggle ne marche pas sur l'index

Un problème des plus étranges ...

Sujet résolu

23 janvier 2009 à 17:05:01

Bonjour à tous,
il m'arrive un phénomène que je trouve inexplicable.

J'ai eu l'idée de mettre en place deux blocs sur ma page d'index que l'on peut faire apparaître ou disparaître grâce à un petit lien qui utilise une propriété JS bien connue : toggle.
J'utilise MooTools, et tout marche bien en local, mais pas après avoir envoyé le fichier en ligne.
D'autre part, j'ai fait de nombreux tests pour voir d'où pouvait venir le bug, et j'ai notamment testé le code en créant un dossier à la racine.

J'ai ainsi recopié entièrement mon code de l'index.php, et j'ai créé un deuxième index dans ce dossier, avec les fichiers demo.js (qui contient le code JS de la fonction toggle) et mootools.js. (j'ai aussi un fichier fonctions.php qui regroupe toutes mes grandes fonctions, notamment une fonction HEAD() où j'inclue entre <head> et </head> les fichiers mootools et demo). Et voilà, passé en ligne, tout marche parfaitement depuis ce dossier.

Quel est donc le problème ? Pourquoi cela marche-t-il en ligne dans un dossier et pas à la racine ?

Si vous avez besoin de bouts de code, je peux vous donner ça, même si je ne vois pas trop quoi vous donner, vu que tout marche !

Merci d'avance.

Nesk

23 janvier 2009 à 19:23:37

Ben montre donc ta page en ligne qui ne fonctionne pas.

Au passage, ceci m'a fait sourire :

Citation : Valck

J'ai eu l'idée de mettre en place deux blocs sur ma page d'index que l'on peut faire apparaître ou disparaître grâce à un petit lien qui utilise une propriété JS bien connue : toggle.

C'est pas du tout une propriété JS connue hein... ça appartient à Mootools x)
Et puis Mootools, jQuery et autres cay le mal §

v444

23 janvier 2009 à 19:48:47

Malheureusement, je ne peux pas montrer la page en ligne, puisque c'est un site sécurisé et donc ayant un accès restreint à certaines personnes.
Comme je l'ai déjà dit, je ne vois pas vraiment l'intérêt de montrer la page vu qu'il n'y a rien d'autre à voir qu'une fonction qui ne marche pas.
De même que pour le code, il marche très bien sur l'index dans un dossier, mais pas sur l'index de la racine, alors que le code est strictement le même.

Je mets juste en place sur ma page index.php ceci :

<a id='v_toggle' href='#'>Afficher</a>
<div id='vertical_slide'>Le texte qui sera affiché via l'effet toggle</div>

Ensuite j'ai mon fichier demo.js :

window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	var status2 = {
		'true': 'Afficher les news',
		'false': 'Cacher les news'
	};
	
	var status3 = {
		'true': 'Afficher les commentaires',
		'false': 'Cacher les commentaires'
	};
	
	//-vertical

	var myVerticalSlide = new Fx.Slide('vertical_slide');
	
	if (!myVerticalSlide.toggle())
	{
		$('vertical_slide').set('style.display', 'none');
	}
	
	$('v_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
		$('v_toggle').set('html', status2[myVerticalSlide.open]);
	});
	
	var mySecondVertSlide = new Fx.Slide('vertical_slide_2');
	
	if (!mySecondVertSlide.toggle())
	{
		$('vertical_slide_2').set('style.display', 'none');
	}
	
	$('v_toggle_2').addEvent('click', function(e){
		e.stop();
		mySecondVertSlide.toggle();
		$('v_toggle_2').set('html', status3[mySecondVertSlide.open]);
	});
});

et bien sûr l'insertion de la librairie et du fichier demo dans fonctions.php (qui est requis au début de index.php) :

<script type="text/javascript" src="JS/mootools.js"></script>
		<script type="text/javascript" src="JS/demo.js"></script>

Voilà, je vous donne tout ce que je peux vous donner, je pense qu'il n'y a pas grand chose à ajouter !
L'effet désiré est visible ici

v444

24 janvier 2009 à 12:48:37

Voilà après quelques tests sur mon fichier demo.js, à l'aide de quelques alert(), j'ai réussi à isoler la source du problème.

En fait, c'est quand le script en vient à déclarer les deux variables myVerticalSlide et mySecondVertSlide que rien ne fonctionne plus.
En essayant de mettre des alert() avant et après la déclaration de ces variables, il s'avère que la boite de dialogue apparaît quand le alert() est posé avant la déclaration, mais rien ne s'affiche quand on fait le alert() après la déclaration.

Voici ce que ça donne :

var myVerticalSlide = new Fx.Slide("vertical_slide"); // Déclaration de la variable qui contient un nouvel effet (Fx.Slide) 
                                                     // s'appliquant aux id 'vertical_slide'
alert('Works'); // Quand je mets le alert() ici, rien ne s'affiche,
               // Mais en le plaçant avant la déclaration, ça marche bien

Alors, j'ai pensé que la déclaration ne se faisait pas à cause de cette fonction Fx.Slide que l'on retrouve dans la librairie Mootools.

Voilà, je ne sais pas quoi faire d'autre, et je ne comprends toujours pas pourquoi ceci ne marche pas sur l'index basé à la racine du site, alors que ça marche parfaitement sur un autre index basé dans un dossier.

Merci à vous de m'éclairer.

Nesk

24 janvier 2009 à 15:25:03

Malheureusement je peux pas t'aider, là le problème vient de Mootools et j'y connais rien. ^^'

v444

24 janvier 2009 à 20:12:19

Merci quand même de t'être penché sur la question.
Je poste un message si j'arrive à résoudre mon problème.

EDIT : Voilà problème résolu. Le fait est que j'avais plusieurs chemin d'insertion pour des fichiers .js (notamment pour l'effet lightbox), et il m'a suffit de les supprimer pour que tout fonctionne parfaitement. Je ne comprends pas trop pourquoi, mais c'est comme ça.