Bonjour à tous,
Je tente de dynamiser un peu mon site de VTT perso en utilisant AJAX pour toucher un des articles de mon CMS et ne pas donc recharger toute ma page d'accueil

Voici un lien de test avec des infos de debugage : http://www.messinmaisoui.org/CrapImgTop/testAjax.html

Explication sur php :
Choix d'une année dans la combo box (html) puis lecture d'un fichier (toujours le même nom listimg.txt)
contenant le nom des images du repertoire, choix aléatoire d'une image et retour du contenu pour remplir la <div id="txtHint> ... </div>

ex de fichier listimg.txt pour année 2016
2016_101.jpg
2016_162_327.jpg
...
217bis5_DUB.JPG
Le php appelé :
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
87
88
89
90
91
92
93
94
95
 
<?php
 
echo "<div id='txtHint'><b>No no no !</b>";
 
$chem_img = array("2013", "2014", "2015", "2016", "Cyclo", "VTT","SoWhat");
$choice_rep = mt_rand(0, count($chem_img)-1);
$init_rep = $chem_img[$choice_rep]; 
 
if(isset($_GET["rep"])) {
  $rep=$_GET["rep"]; 
}else{
$rep = $init_rep;	
}
if($_GET["rep"] === "") {
$rep = $init_rep;	
}
 
$rep_absol = "http://www.messinmaisoui.org/CrapImgTop/";
 
//Nom de l'image contenant tous les noms de ces dossiers ... en png 24
$tit_images = $rep_absol."CrapSom2.png"; 
// Un dossier sélectionné
$random_rep = $rep_absol.$rep; 
echo '<p>'.'*****random_rep*****'.$random_rep.'<br></p>';
 
$handle = fopen($random_rep.'/listimg.txt', 'r');
/*Si on a réussi à ouvrir le fichier*/
$nom_img = array();
$i=0;
if ($handle)
{
	/*Tant que l'on est pas à la fin du fichier*/
	while (!feof($handle))  
	{
	/*On lit la ligne courante*/
	    $file = fgets($handle);
		$nom_img[$i] = $file;
		echo '<p>'.$i.'-'.$nom_img[$i].'<br></p>'; 
        $i++;
	}
	/*On ferme le fichier*/
	fclose($handle);
} else {
	echo '<p>ouverture impossible</p>'; 
 
}
$shuf = mt_rand(0, $i - 1);
echo '<p>'.'*****shuf*****'.$shuf.'<br></p>';
 
$size = getimagesize($random_rep."/".$nom_img[$shuf]);
 
//Largeur maximale de l'image pour la création des miniatures
$largeur_maxi = 400;
//Si la largeur dépasse la limite autorisée...
if ($size[0] > $largeur_maxi)
{
//...la nouvelle largeur est égale à la limite à ne pas dépasser
$width = $largeur_maxi;
//La largeur d'origine divisée par la largeur limitée (on obtient un chiffre qui sert à faire la même proportion pour la hauteur)
$theight = ($size[0]/$largeur_maxi);
//La hauteur originale est divisée par le chiffre obtenu précédemment afin que l'image conserve les mêmes proportions que l'originale 
$height = ($size[1]/$theight);
}
else
{
//Sinon on garde la taille originale
$width = $size[0]; $height = $size[1];
}
 
$backpos ="background-position: -0px -343px;";
$maclass ="slide-SoWhat";
switch ($rep) {
    case "2013":        $backpos ="background-position: -0px -0px; height:60px;";
		$maclass ="slide-fun slide-2013";break;
    case "2014":        $backpos ="background-position: -0px -60px; height:53px;";
    	$maclass ="slide-fun slide-2014";break;
    case "2015":        $backpos ="background-position: -0px -117px; height:57px;";
    	$maclass ="slide-fun slide-2015";break;
    case "2016":        $backpos ="background-position: -0px -175px; height:52px;";
    	$maclass ="slide-fun slide-2016";break;
    case "Cyclo":        $backpos ="background-position: -0px -230px; height:60px;";
    	$maclass ="slide-fun slide-Cyclo";break;
    case "VTT":        $backpos ="background-position: -0px -291px; height:50px;";
    	$maclass ="slide-fun slide-VTT";break;
    case "SoWhat":        $backpos ="background-position: -0px -343px; height:60px;";
    	$maclass ="slide-fun slide-SoWhat";break;
}
 
//echo "<div class ='".$maclass."'><div  style ='background-size: cover;background-image:url(".$tit_images.");".$backpos."'></div>";
echo "<img src='".$random_rep."/".$nom_img[$shuf]."' alt='".$nom_img[$shuf]."'/>";
echo "   </div>";
echo "   </div>";
 
?>
Voici mes interrogations :
1) parfois je clique sur une année et il ne se passe rien : pas de changement d'images ?
2) Quand une image aléatoire est trouvée pour une année X, si je passe à une autre année Y et que je reviens à X, c'est la même image que je retrouve !?
3) Dans le html regénéré, j'ai 2 id "txtHint" qui apparaissent ... ça c'est un problème de programmation mais je ne vois pas comment ça se produit


Merci pour vos réponses
Laurent