Aide sur un code pour un site

**PoppyGuy** · 07/07/2016, 19h51

Bonjour,

J'essaye de créer un site, je souhaiterais avoir 3 liste déroulantes:
1) Choix de l'année
2) Choix du mois
3) Choix de la pages

Dans mon PC sur F:/, j'ai le dossier du site qui s'appelle "Meteo_Clopiniere".
Dans ce dossier, j'ai créé un dossier "Annee" comprenant les dossiers 2010...2011.2012....etc
Dans le dossier "2010"...2011.... j'ai créé les dossiers janvier...Fevrier...Mars
Dans le dossier "Janvier", il y a les fichiers Temperatures.html...Humidite...vent.....etc

J'essaye depuis plusieurs jours à faire apparaître la page "Pressions.html" mais je n'y arrive pas.
Qu'ai-je pu mal faire

Si vous pouviez m'aider, ça m'arrangerais beaucoup

Voici le lien du cite:
http://st-florent-meteo-clopiniere.akeonet.com/

Et voici le code:
Merci pour votre aide
Cordialement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Listes Guy</title>
<meta content="Guy" name="author">
<script type="text/javascript">
<!--
function onChange()
{
var index_annee = document.getElementById('annee').selectedIndex;
var annee = document.getElementById('annee').options[index_annee].text;
 
var mois = document.getElementById('mois').options[document.getElementById('mois').selectedIndex].text;
 
var pages = document.getElementById('pages').options[document.getElementById('pages').selectedIndex].text;
 
var url = annee + '/' + mois + '/' + pages +'.html';
window.location=url;
}
//-->
</script>
</head>
<body style="color: white; background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<div style="text-align: center;"><big><big>Météo La Clopinière</big></big><br>
</div>
<br>
<div style="text-align: center;"><!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1">
<option value="">Choisir une Année</option>
<option value="2011">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
</select>
<!-- liste déroulantes pour les mois -->
<select id="mois" name="mois" size="1">
<option value="">Choisir un mois</option>
<option value="">Janvier</option>
<option value="">Fevrier</option>
<option value="">Mars</option>
<option value="">Avril</option>
<option value="">Mai</option>
<option value="">Juin</option>
<option value="">Juillet</option>
<option value="">Aout</option>
<option value="">Septembre</option>
<option value="">Octobre</option>
<option value="">Novembre</option>
<option value="">Decembre</option>
</select>
<!-- liste déroulante pour les pages -->
<select id="pages" name="pages" size="1" onchange="onChange();">
<option value="">Choisir une page</option>
<option value="">Temperatures</option>
<option value="">Humidite</option>
<option value="">Pressions</option>
<option value="">Vent</option>
<option value="">Ensoleillement</option>
</select>
</div>
<br>
<div style="text-align: center;"><img
style="width: 800px; height: 200px;" alt="Meules" src="Meules.JPG"><br>
</div>
<br>
<div style="text-align: center;">Températures<br>
</div>
<div style="text-align: center;"><img
style="width: 900px; height: 564px;" alt="GraphiqueT°"
src="Temperatures.jpg"><br>
</div>
<br>
<div style="text-align: center;">Ensoleillement<br>
</div>
<div style="text-align: center;"><img
style="width: 900px; height: 562px;" alt="Graphique Soleil"
src="Ensoleillement.jpg">
</div>
</body>
</html>

**Auteur** · 07/07/2016, 22h56

Bonsoir,

ce sont toutes les pages que l'on ne peut pas charger. Et l'erreur est explicite :

The requested URL / was not found on this server.

il y a un problème de chemin.

Il y a aussi un petit problème de conception des listes puisque je peux sélectionner une page de la forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

/Choisir une Année/Choisir un mois/Couleur_du_ciel.html

Donc ultérieurement il faudra vérifier les éléments choisis pour éviter ce genre d'url

Invité · 08/07/2016, 10h49

Bonjour,

plusieurs choses à (re)dire sur le code.

1/ Généralement, on récupère la value de l'option, pas le texte.

1a/ Donc, il faut remplir les value des options (car ces value peuvent être DIFFERENTES* du texte) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select id="annee" name="annee" size="1">
	<option value="">Choisir une Année</option>
	<option value="2011">2011</option>
	<option value="2010">2010</option>
	<option value="2009">2009</option>
...
</select>
 
<select id="mois" name="mois" size="1">
	<option value="">Choisir un mois</option>
	<option value="Janvier">Janvier</option>
	<option value="Fevrier">Fevrier</option>
	<option value="Mars">Mars</option>
...

* exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	<option value="Aout">Août</option>

1b/ dans le JavaScript, simplement :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
	var annee = document.getElementById('annee').value;
 
	var mois = document.getElementById('mois').value;
 
	var pages = document.getElementById('pages').value;

2/ Comme on a laissé la value vide (value="") pour l'option "par défaut", on peut vérifier si l'année, le mois... ont bien tous été renseignés :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if( annee != '' && mois != '' && pages != '' )
{
  var url = annee + '/' + mois + '/' + pages +'.html';
  window.location=url;
} else {
   alert('Remplissez toutes les options');
}

Ce qui donne :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function onChange()
{
	var annee = document.getElementById('annee').value;
 
	var mois = document.getElementById('mois').value;
 
	var pages = document.getElementById('pages').value;
 
	if( annee != '' && mois != '' && pages != '' )
	{
		var url = annee + '/' + mois + '/' + pages +'.html';
		alert(url); // TEST
		window.location=url;
	} else { // TEST
		alert('Remplissez toutes les options'); // TEST
	}
}

3/ De plus, le onchange peut être appliqué aux 3 select :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="annee" name="annee" size="1" onchange="onChange();">
...
<select id="mois" name="mois" size="1" onchange="onChange();">
...
<select id="pages" name="pages" size="1" onchange="onChange();">
...

4/ ATTENTION à la casse (majuscule/minuscules) dans les noms des DOSSIERS et FICHIERS.
ex. : "Janvier" et "janvier" sont différents...

5/

Envoyé par PoppyGuy

...Dans mon PC sur F:/, j'ai le dossier du site qui s'appelle "Meteo_Clopiniere"...

Donc :
5a/ il manque "Meteo_Clopiniere/" dans l'URL !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		var url = 'Meteo_Clopiniere/'+annee + '/' + mois + '/' + pages +'.html';

5b/ C'est bien que ce soit sur ton PC.
C'est mieux si c'est sur le SERVEUR du site ! (car, à priori, ce n'est pas ton PC qui sert de serveur).
-> il faut donc télécharger TOUT le dossier "Meteo_Clopiniere" sur le serveur (distant).

**PoppyGuy** · 13/07/2016, 21h21

Bonsoir,
Excuse du retard, j'essaye de voir ça que je peux faire.
Cordialement

PS:
Je viens de faire un essai, ça ne fonctionne pas, mais j'ai du certainement pas fais ce qu'il fallait ??

Voici plus de détails :

Mes fichiers sur Filezilla :
Nom : Filezilla.JPG
Affichages : 135
Taille : 87,9 Ko

Nom : Filezilla.JPG
Affichages : 135
Taille : 87,9 Ko

(dans les répertoires Janvier, il y a Pressions.html et Pressions.jpg

Voici le code de la page index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Index</title>
<meta content="Guy" name="author">
<script type="text/javascript">
<!--
function onChange()
{
 
var annee = document.getElementById('annee').value;
 
var mois = document.getElementById('mois').value
 
var pages = document.getElementById('pages').value
 
if( annee != '' && mois != '' && pages != '' )
{
var url = 'Meteo_Clopiniere/'+ annee + '/' + mois + '/' + pages +'.html';
alert(url); // TEST
window.location=url;
} else { // TEST
alert('Remplissez toutes les options'); // TEST
}
}
<select id="annee" name="annee" size="1" onchange="onChange();">
...
<select id="mois" name="mois" size="1" onchange="onChange();">
...
<select id="pages" name="pages" size="1" onchange="onChange();">
...
//-->
</script>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<div style="text-align: center;"><big style="color: white;"><big>Météo
La Clopinière</big></big><br>
</div>
<br>
<div style="text-align: center;"><!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1">
<option value="">Choisir une Année</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>
<!-- liste déroulantes pour les mois -->
<select id="mois" name="mois" size="1">
<option value="">Choisir un mois</option>
<option value="Janvier">Janvier</option>
<option value="Fevrier">Fevrier</option>
<option value="Mars">Mars</option>
</select>
<!-- liste déroulante pour les pages -->
<select id="pages" name="pages" size="1">
<option value="">Choisir une page</option>
<option value="">Ciel</option>
<option value="Graphiques">Graphiques</option>
<option value="Pressions">Pressions</option>
<option value="Vent">Vent</option>
<option value="Recaps">Recaps</option>
</select>
</div>
<br>
<div style="text-align: center;"><img
style="width: 800px; height: 200px;" alt="Meules" src="Meules.JPG">
</div>
<br>
<div style="text-align: center;"><span style="color: white;">Températures</span>
</div>
<div style="text-align: center; background-color: rgb(99, 5, 39);"><img
style="width: 900px; height: 564px;" alt="GraphiqueT°"
src="Temperatures.jpg"><br>
</div>
<br>
<div style="text-align: center;"><span style="color: white;">Ensoleillement</span><br>
</div>
<div style="text-align: center;"><img
style="width: 900px; height: 562px;" alt="Graphique Soleil"
src="Ensoleillement.jpg">
</div>
</body>
</html>

Voici le code de la page Pressions.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Pressions</title>
</head>
<body style="background-color: rgb(99, 5, 39); color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;">&nbsp;
<img style="width: 644px; height: 1528px;" alt="hpa" src="Pressions.jpg"><br>
</div>
<br>
</body>
</html>

Et l'adresse du site :
http://st-florent-meteo-clopiniere.akeonet.com/

Invité · 14/07/2016, 00h54

Bonjour,

L'URL correcte (= à obtenir !) est : http:// st-florent-meteo-clopiniere.akeonet.com/2011/Janvier/Pressions.html

**PoppyGuy** · 14/07/2016, 08h51

Bonjour,
J'ai mis ça, mais ce ne doit pas encore être bon ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{
var url = 'Meteo_Clopiniere/'+ annee + '/' + mois + '/' + pages +'.html';
alert(url); htp:// st-florent-meteo-clopiniere.akeonet.com
window.location=url;
} else { htp:// st-florent-meteo-clopiniere.akeonet.com
alert('Remplissez toutes les options'); htp:// st-florent-meteo-clopiniere.akeonet.com
}

Invité · 14/07/2016, 08h59

Bonjour,

à priori, il suffit de :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{
  var url = '/'+ annee + '/' + mois + '/' + pages +'.html';
  alert(url); 
  window.location=url;
}

N.B. il n'existe pas de dossier "Meteo_Clopiniere" sur le serveur (appelé "Site Distant" dans Filefilla)

OU essaie avec :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

  var url = './'+ annee + '/' + mois + '/' + pages +'.html';

'./' indique le dossier en cours (ici, la "racine" du site)

Invité · 14/07/2016, 09h20

Bon.
Je viens de regarder ta page en ligne...
Il ne faut pas "recopier" sans comprendre non plus...

Le script COMPLET est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function affichePage()
{
  // récupération des données : annee / mois / pages
  var annee = document.getElementById('annee').value;
  var mois = document.getElementById('mois').value
  var pages = document.getElementById('pages').value
 
  if( annee != '' && mois != '' && pages != '' )
  {
     var url = '/'+ annee + '/' + mois + '/' + pages +'.html';
     document.location.href = url; // on affiche la page
  }
}
</script>

Et le HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div style="text-align: center;">
<!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1" onchange="affichePage();">
	<option value="">Choisir une Année</option>
	<option value="2011">2011</option>
	<option value="2010">2010</option>
	<option value="2009">2009</option>
	<option value="2008">2008</option>
</select>
<!-- liste déroulantes pour les mois -->
<select id="mois" name="mois" size="1" onchange="affichePage();">
	<option value="">Choisir un mois</option>
	<option value="Janvier">Janvier</option>
	<option value="Fevrier">Fevrier</option>
	<option value="Mars">Mars</option>
</select>
<!-- liste déroulante pour les pages -->
<select id="pages" name="pages" size="1" onchange="affichePage();">
	<option value="">Choisir une page</option>
	<option value="">Ciel</option>
	<option value="Graphiques">Graphiques</option>
	<option value="Pressions">Pressions</option>
	<option value="Vent">Vent</option>
	<option value="Recaps">Recaps</option>
</select>
</div>

Là, tu peux faire un copier-coller

**PoppyGuy** · 19/07/2016, 09h03

Bonjour,
Je suis parti quelques jours, je rentre demain, je regarde ça et je te tiens au courant.
En attendant, je te remercie
Cordialement

Bonjour,
J'ai fais mes essais, ça fonctionne.

Il ne faut pas "recopier" sans comprendre non plus...

Je suis d'accords, mais comme je ne connais rien, il me fallait un modèle pour comprendre et pour pouvoir modifier par la suite et comparer.
Merci de ton aide
Cordialement

Aide sur un code pour un site

JavaScript

Discussions similaires

Partager

Partager