AJAX : Rafraichissement CB et images aléatoires : comportement fantaisiste !

**vttman** · 25/02/2017, 10h23

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

**NoSmoking** · 25/02/2017, 15h16

Bonjour,
concernant les points 1 et 2 je dirais qu'il te faut regarder précisément ton choix « random ».

Pour le point 3
exemple d'une réponse obtenue

Code html :

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

1
2
3
4
5
6
7
8
9
<div id='txtHint'><b>No no no !</b><p>*****random_rep*****http://www.messinmaisoui.org/CrapImgTop/2015<br></p><p>0-2015_75_lol_.jpg
<br></p><p>1-2015_98_237_cprd_.jpg
<br></p><p>2-2015_DSC0003.jpg
<br></p><p>3-2015_DSC0010_2.jpg
<br></p><p>4-2015_DSC0633.jpg
<br></p><p>5-2015_DSC0797.jpg
<br></p><p>6-2015_DSC0798.jpg<br></p><p>*****shuf*****5<br></p><img src='http://www.messinmaisoui.org/CrapImgTop/2015/2015_DSC0797.jpg
' alt='2015_DSC0797.jpg
'/>   </div>   </div>

et comme tu injectes cela dans <div id='txtHint'> normal que tu l'ais en double

Code :

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

1
2
3
4
5
xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
        document.getElementById("txtHint").innerHTML=this.responseText;
    }
}

**vttman** · 25/02/2017, 16h17

Merci pour ta réponse NoSmoking

Pour le 3) je viens de virer effectivement la div en trop ... à force de chercher et tester dans tous les sens je fais des âneries ...

Pour le point 1) et 2) voici mes remarques

Version avec div "txHint" corrigé
http://www.messinmaisoui.org/CrapImgTop/testAjax6.html
on voit que le random n'est pas vraiment du random si l'on passe de 2013 à 2014 puis 2013 puis etc.
en bref une image est choisie aléatoirement pour chaque année (ici de 2013 à 2016)
et ensuite c'est la même image qui se représentera ?

Maintenant si j'appelle le php direct ... (contenu dans testAjax6.html)
http://www.messinmaisoui.org/CrapImg...axEndEndZ6.php
Un coup de F5 ou CTRL+F5 et là on voit que pour chaque année présentée aléatoirement, une image différente apparait
ex :

0-2015_75_lol_.jpg
1-2015_98_237_cprd_.jpg
2-2015_DSC0003.jpg
3-2015_DSC0010_2.jpg
4-2015_DSC0633.jpg
5-2015_DSC0797.jpg
6-2015_DSC0798.jpg
*****shuf*****0

quelques F5 plus loin
=>

0-2015_75_lol_.jpg
1-2015_98_237_cprd_.jpg
2-2015_DSC0003.jpg
3-2015_DSC0010_2.jpg
4-2015_DSC0633.jpg
5-2015_DSC0797.jpg
6-2015_DSC0798.jpg
*****shuf*****6

C'est ça que je ne m'explique pas ... maintenant si c'est un problème php, j'irai sur la partie de forum dédié ...

**NoSmoking** · 25/02/2017, 18h00

Problème de cache donc !?! , essaies un truc du style

Code :

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

1
2
var param = 'rep=' + str + '&' + new Date().getTime();
xmlhttp.open('GET', './testuAjaxEndEndZ5.php?' + param, true);

**vttman** · 25/02/2017, 18h05

MAGNIFIQUE !

ça march impec, je ferme le sujet, un grand merci NoSmoking !

**vttman** · 26/02/2017, 09h49

je rouvre le sujet pour le point 1)

1) parfois je clique sur une année et il ne se passe rien : pas de changement d'images ?

Il arrive que quand je change de valeurs dans la liste déroulante, rien ne se passe (on reste sur la sélection précédente), y a t'il un délai / timer
à positionner quelque part pour éviter cela ?
Nom : bugAjax.jpg
Affichages : 80
Taille : 58,2 Ko

Nom : bugAjax.jpg
Affichages : 80
Taille : 58,2 Ko

**NoSmoking** · 26/02/2017, 11h04

Lorsque tu as fais ta sélection le choix reste, sans autre action, sur la sélection. Le problème semble donc être ailleurs, par contre tu peux forcer sa valeur.

**vttman** · 26/02/2017, 12h09

Bonjour NoSmoking,

Je ne comprends pas bien sur le <form> j'ai
un

Code :

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

onchange="showREP(this.value)"

donc si je passe de 2014 à 2013 par exemple je devrais passer dans l'événement "onchange" ?
Mais ce que je comprends pas c'est que le plus souvent cela fonctionne et puis ... parfois ..rien ?

par contre tu peux forcer sa valeur

C'est à dire ?

**NoSmoking** · 26/02/2017, 14h44

Je ne comprends pas bien sur le <form> j'ai ...

tu parles surement du <select>.

Tu peux jouer sur la sélection en positionnant le selectedIndex du <select>.

• Les champs des formulaires dans la FAQ.

**vttman** · 26/02/2017, 18h25

Bon je laisse tomber finalement le onchange et le onclick (pas adapté au liste déroulante d'ailleurs) ...
je génère automatiquement des boutons pour
chaque année, c'est plus joli et ça fonctionne comme je l'entend !

Merci encore et bonne fin de WE

**NoSmoking** · 26/02/2017, 18h49

Il n'y a rien de redoutable, pour la fonction on passe la référence au <select> :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function showREP(obj) {
  // récup. de la valeur
  str = obj.value;
  // remise de la selection sur la 1st 
  obj.selectedIndex = 0;
  // RIEN de changé ci-dessous
  if (str == 'none') {
    document.getElementById('txtHint').innerHTML = '';
    return;
 //.... la suite
}

pour le HTML,
il y a des corrections à faire dans ton code, et tu n'as pas besoin de <form> si tu ne souhaite pas une position de replie en cas de désactivation du javascript.

Code html :

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

1
2
3
4
5
6
7
8
A vous de jouer ...
<select name="cds" onchange="showREP(this)">
  <option value="none">Une autre image ?</option>
  <option value="2013">2013</option>
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  <option value="2016">2016</option>
</select>

AJAX : Rafraichissement CB et images aléatoires : comportement fantaisiste !

AJAX

Discussions similaires

Partager

Partager