Value dans une liste déroulante

**adam974** · 25/08/2011, 14h24

Donc si j'ai bien compris la méthode serait d'utiliser .delegate() lorsque que l'on choisit une ville dans le menu déroulant, pour qu'une fois l'ajax terminé je puisse récrire mes balise div id=idcarrousel ?

Invité · 25/08/2011, 14h40

Non, tu as mal compris.

En fait, ton carrousel est géré par jquery, qui "envoie" donc des instructions au carrousel (configuration et mise en page, passer à l'image suivante, fade, ...).
Ce sont (je crois) ces évènement qui sont "perdu" lors du changement de carrousel via Ajax.

J'avoue que je ne comprends pas tout non plus...

**adam974** · 25/08/2011, 16h52

Je viens de reussir à faire fonctionner mon carrousel avec la méthode ajax, cependant il reste encore un petit bémol.

J'ai donc repris la fonction AffichageCarrouselAjax en y ajoutant une des fonctions qui est utilisé pour initialisé mon carrousel et voila que sa marche.
Mais si j'enleve ou mets en commentaire l'alert suivante : alert('idville : '+idselect); et bien sa ne marche plus et je ne comprends pas pourquoi....
Ou bien existerait-il une solution pour mettre un alert invisible?

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
96
97
98
99
100
101
102
<script type="text/javascript">
 
 
 
			/* INITIALISATON AJAX (OBLIGATOIRE) */
			function getXhr(){
				var xhr = null; 
				if(window.XMLHttpRequest) { 		/* Firefox et autres */
					xhr = new XMLHttpRequest(); 
				} else if(window.ActiveXObject) { 	/* Internet Explorer */
					try {
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
				} else { 	/* XMLHttpRequest non supporté par le navigateur */
					   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
					   xhr = false; 
				} 
				return xhr;
			};
 
				function AffichageCarrouselAjax(idselect) {
				// alert('ok 1'); 
 
					// recuperation id de la ville selectionnee
					var xhr = getXhr();
					var htmltexte = '';
				// alert('idville : '+idville);
 
 
				xhr.onreadystatechange = function()
				{
				//alert('ok 2'); 
					// si on a tout reçu et que le serveur est ok
					if(xhr.readyState==4 && xhr.status==200){
					// alert('ok 2'); 
 
						document.getElementById('idcarrousel').innerHTML = xhr.responseText;
 
						htmltexte = xhr.responseText;
						// CARROUSEL : On remplit le DIV contenant le carrousel
 
						document.getElementById('idcarrousel').innerHTML = htmltexte;
						afterAjax();
 
 
					}
 
				}
				// fichier a executer et envoi des parametres par POST
 
				xhr.open("POST","_inclus/afficher-carrousel-ville-ajax.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// on poste les parametres au fichier php
				xhr.send("idville="+idselect);
 
				$('body').css('background-image','url(fond/' + idselect + '.jpg)');
				alert('idville : '+idselect);
 
 
 
 
 
				$(function() {
					$("#idcarrousel").jCarouselLite({
						btnNext: ".next",
						btnPrev: ".prev"
					});
					$("a.tooltiplink").simpletooltip();
						$("a.clic").simpletooltip({click: true});
						$("a.delay").simpletooltip({hideDelay: 0.5});
						$("#demo_1").simpletooltip({ margin: 10 });
						$("#demo_2").simpletooltip({ showEffect: "fadeIn", hideEffect: "fadeOut" });
						$("#demo_3").simpletooltip({ showEffect: "slideDown", hideEffect: "slideUp" });
						$("#demo_4").simpletooltip({ showEffect: "show", hideEffect: "hide" });
						$("#demo_5").simpletooltip({ click: true });
						$("#demo_6").simpletooltip({ hideDelay: 0.5 });
						$("#demo_7").simpletooltip({ click: true, hideOnLeave: false });
						$("#demo_8").simpletooltip({
							callback: function(tooltip){
								window.alert('Callback : affichage de la tooltip #'+tooltip.id);
							}
						});
						$("#demo_9").simpletooltip({
							customTooltip: function(target){
								return '<p style="width:200px;height:50px;margin:0;padding:10px;background:#fff;border:1px solid #000;">Texte de l\'élément survolé :<br /> "'+ $(target).text() +'" </p>';
							},
							showEffect: "fadeIn",
							hideEffect: "fadeOut"
						});
				});
 
 
 
 
 
 
			};
 
 
		</script>

Invité · 25/08/2011, 17h08

A vrai dire, les "alert" ne servent qu'en phase de test ...
Ils sont supposés être supprimés ensuite...
Par contre, le fait que ca ne marche plus veut san doute dire qu'il y a une erreur sur la ligne.

Code :

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

1
2
3
4
5
				function AffichageCarrouselAjax(idselect) {
					// recuperation id de la ville selectionnee
					var idselect; // <----- AJOUTE CA
					var xhr = getXhr();
					var htmltexte = '';

**adam974** · 25/08/2011, 17h09

L'erreur doit se trouver dans la fonction AffichageCarrouselAjax car je peux mettre l'alert un peu n'importe où dans la fonction l'ajax continue à bien fonctionner.

Envoyé par jreaux62

A vrai dire, les "alert" ne servent qu'en phase de test ...
Ils sont supposés être supprimés ensuite...
Par contre, le fait que ca ne marche plus veut san doute dire qu'il y a une erreur sur la ligne.

Code :

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

1
2
3
4
5
				function AffichageCarrouselAjax(idselect) {
					// recuperation id de la ville selectionnee
					var idselect; // <----- AJOUTE CA
					var xhr = getXhr();
					var htmltexte = '';

J'ai ajouté le var idselect; mais cela n'a rien changé

**rawsrc** · 25/08/2011, 18h59

Bon je vois que tu galères sévère, mais je ne pense pas m'avancer trop en disant que la lecture de la doc des différents éléments que tu utilises ne t'intéresses pas trop.

Bon allez c'est parti :
Pour commencer tu peux retirer entièrement ton bloc sur le getXhr(), il ne sert à strictement à rien : tu utilises jQuery qui se charge nativement de tout ça pour toi alors profites en.

Du coup, ta fonction AffichageCarrouselAjax() peut se résumer à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 <script type="text/javascript">
   function AffichageCarrouselAjax(idselect) {
      $.ajax({
         type: "POST",
         url: "_inclus/afficher-carrousel-ville-ajax.php",
         data: "idville="+idselect,
         cache: false,
         success: function(html) {
            $("#idcarrousel").html(html);
         }
      });
   };
</script>

Ensuite il ne te reste plus qu'à remplacer

Code :

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

1
2
3
<select name="Items" id="Items" onchange="AffichageCarrouselAjax(this.options[this.selectedIndex].value);">
par
<select name="Items" id="Items" onchange="AffichageCarrouselAjax($('option:selected', this).val());">

Et normalement le tour est joué

Invité · 25/08/2011, 19h09

Envoyé par rawsrc

...Et normalement le tour est joué

C'est tout de suite mieux quand c'est un pro du jquery qui s'y colle !

Bon... je vais pouvoir démonter mon "usine à gaz" ...

**adam974** · 25/08/2011, 19h15

Tout d'abord merci, je viens de tester le code et cela n'a pas fonctionné.

Au lancement tout est OK sur ma page mais lorsque je change de ville le carrousel disparait et je n'ai aucune image.

La console affiche les alertes suivantes :

Erreur*: aucun élément trouvé
Fichier Source*: http://localhost/Projet_isep/_inclus...ville-ajax.php
Ligne*: 1

Erreur*: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://code.jquery.com/jquery-1.6.2.min.js Line: 18"]

Je ne pense pas m’être trompé avec votre code :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Projet ISEP</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	   <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
 
	   <style type="text/css" media="screen">
		.tooltip{width:200px;margin:0;padding:5px;font-size:11px;color:#666;background:#fff;border:5px solid #ccc;}
		.tooltip p{margin:0;text-align:justify;}
		</style>
 
	   <script type="text/javascript">
 
	   function AffichageCarrouselAjax(idselect) {
			  $.ajax({
				 type: "POST",
				 url: "_inclus/afficher-carrousel-ville-ajax.php",
				 data: "idville="+idselect,
				 cache: false,
				 success: function(html) {
					$("#idcarrousel").html(html);
				 }
			  });
		   };	 
		</script>
 
	    	<!-- Script initialisation jquery -->
	   <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	   <script type="text/javascript" src="lib/jquery.selectbox-0.5.js"></script>
	   <script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.js"></script>
	   <script src="lib/custom.js" type="text/javascript"></script>
	   <script type="text/javascript" src="lib/jquery.simpletooltip-min.js"></script>
 
	<script type="text/javascript">
		// function f(content){
			// alert(content.html());		
			// }
 
		// $(function(){  
				// $("select:eq(0)").imgDropDown({title:"Paris"});	
		// });
 
	</script>
 
 
 
 
   </head>
 
   <body background="fond/1.jpg">
 
	<div id="en_tete">
	   <!-- Ici on mettra la bannière -->
	</div>
 
	<div id="menu">
	   <!-- Ici on mettra le menu -->
	</div>
 
	<div id="corps">
	   <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
 
	</div>
 
	<div id="pied_de_page">
	   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
	</div>
 
 
 
	<div class="option">
	<form method="post" action="projet_isep.php" id="form_items" name="form_items">
		<select name="Items" id="Items" onchange="AffichageCarrouselAjax($('option:selected', this));">
 
				<?php
				try
				{
					// On se connecte à MySQL
					$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
					$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
					// On récupère tout le contenu de la table jeux_video
					$reponse = $bdd->query('SELECT * FROM villes');
 
					// On affiche chaque entrée une à une
					while ($donnees = $reponse->fetch())
					{
				?>
 
				<option value="<?php echo $donnees['id']; ?>"><?php echo $donnees['nom']; ?></option>
 
				<?php
					}
						$reponse->closeCursor(); // Termine le traitement de la requête
					}
						catch(Exception $e)
					{
						// En cas d'erreur précédemment, on affiche un message et on arrête tout
						die('Erreur : '.$e->getMessage());
					}
				?>
		</select>
	</form>	
 
	</div>
 
 
 
	<div id="conteneur">
		<button class="prev"><<</button>
		<button class="next">>></button>
    </div>
 
 
 
	<div id="idcarrousel">
		<ul>
			<?php
				try
				{
					// On se connecte à MySQL
					$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
					$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
					// On récupère tout le contenu de la table jeux_video
					$reponse = $bdd->query('SELECT * FROM deals');
 
					// On affiche chaque entrée une à une
					while ($donnees = $reponse->fetch())
					{
				?>
 
				<li><a href="<?php echo '#'.$donnees['id']?>" class="tooltiplink"><img src="images/<?php echo $donnees['image']; ?>.jpg" alt="" width="100" height="100" /></a></li>
 
				<?php
					}
 
						$reponse->closeCursor(); // Termine le traitement de la requête
 
					}
						catch(Exception $e)
					{
						// En cas d'erreur précédemment, on affiche un message et on arrête tout
						die('Erreur : '.$e->getMessage());
					}
				?>
 
		</ul>
	</div>	
 
 
 
	<div id="categ">
		<form method="post" action="projet_isep.php">
		   <p>
			   Catégories :<br /><br />
			   <?php
				try
				{
					// On se connecte à MySQL
					$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
					$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
					// On récupère tout le contenu de la table jeux_video
					$reponse = $bdd->query('SELECT * FROM categ');
 
					// On affiche chaque entrée une à une
					while ($donnees = $reponse->fetch())
					{
				?>
 
					<input value="<?php echo $donnees['id']; ?>" name="categ" type="radio" /> <label for="frites"><?php echo $donnees['type']; ?></label><br />
 
 
				<?php
					}
 
						$reponse->closeCursor(); // Termine le traitement de la requête
 
					}
						catch(Exception $e)
					{
						// En cas d'erreur précédemment, on affiche un message et on arrête tout
						die('Erreur : '.$e->getMessage());
					}
				?>
			</p>
		</form>
	</div>
 
 
 
 
	<?php
 
		try
		{
			// On se connecte à MySQL
			$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
			$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
			// On récupère tout le contenu de la table jeux_video
			$reponse = $bdd->query('SELECT * FROM deals');
 
			// On affiche chaque entrée une à une
			while ($donnees = $reponse->fetch())
			{
	?>
			<div id="<?php echo $donnees['id']; ?>" class="tooltip">
 
			<h2><?php echo $donnees['titre']; ?></h2><br />
			<p><?php echo 'Description : ' .$donnees['detaildeal']; ?></p><br />
			<p><?php echo 'Adresse : ' .$donnees['adressedeal']; ?></p><br />
			<p><?php echo 'Expire le : ' .$donnees['findeal']; ?></p><br />
			<p><?php echo 'Acheteurs : ' .$donnees['nbacheteur']; ?></p><br />
			<p><?php echo 'Veuillez envoyer un SMS au 80918 avec la syntaxe suivante : Prénom Nom ' .$donnees['id']; ?></p><br />
 
			</div>
 
	<?php
			}
 
				$reponse->closeCursor(); // Termine le traitement de la requête
 
			}
				catch(Exception $e)
			{
				// En cas d'erreur précédemment, on affiche un message et on arrête tout
				die('Erreur : '.$e->getMessage());
			}
	?>
 
 
 
 
 
 
   </body>
</html>

**rawsrc** · 25/08/2011, 19h29

Bah si y a boulette, on est dans du langage de script donc l'ordre dans lequel les éléments sont déclarés est primordial.
Remontes avant toute utilisation ce bloc :

Code :

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

1
2
3
4
5
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.selectbox-0.5.js"></script>
<script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript" src="lib/custom.js"></script>
<script type="text/javascript" src="lib/jquery.simpletooltip-min.js"></script>

Et ensuite colles tes fonction spécifiques

Et dernièrement tu n'as pas vu que j'avais corrigé mon post précédent :

Code :

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

1
2
3
<select name="Items" id="Items" onchange="AffichageCarrouselAjax(this.options[this.selectedIndex].value);">
par
<select name="Items" id="Items" onchange="AffichageCarrouselAjax($('option:selected', this).val());">

**adam974** · 25/08/2011, 19h45

désolé je ne l'avai pas remarqué. J'ai donc rectifié le onchange et voila l'ordre de mes script :

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
	<!-- Script initialisation jquery -->
	   <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	   <script type="text/javascript" src="lib/jquery.selectbox-0.5.js"></script>
	   <script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.js"></script>
	   <script src="lib/custom.js" type="text/javascript"></script>
	   <script type="text/javascript" src="lib/jquery.simpletooltip-min.js"></script>
 
	   <script type="text/javascript">
 
 
		function AffichageCarrouselAjax(idselect) {
				 alert('TEST idville='+idselect);		
 
			  $.ajax({
				 type: "POST",
				 url: "_inclus/afficher-carrousel-ville-ajax.php",
				 data: "idville="+idselect,
				 cache: false,
				 success: function(html) {
					$("#idcarrousel").html(html);
				 }
			  });
		   };	 
 
		</script>

L'alerte marche très bien elle m'affiche bien l'id de la ville sélectionnée mais en revanche le carrousel disparait une fois que je change de ville...

EDIT : je viens de tester avec le code suivant et aucune alerte ne s'est affichée :

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
function AffichageCarrouselAjax(idselect) {
				 alert('TEST idville='+idselect);		
 
			  $.ajax({
			   alert('TEST2222 idville='+idselect);
				 type: "POST",
				 url: "_inclus/afficher-carrousel-ville-ajax.php",
				 data: "idville="+idselect,
				 cache: false,
				 success: function(html) {
					$("#idcarrousel").html(html);
				 }
			  });
 
 
		   };

**rawsrc** · 25/08/2011, 20h09

Je t'en prie n'essaies pas n'importe quoi juste pour le plaisir d'essayer

Par contre, on va compléter notre appel ajax pour voir s'il reçoit une erreur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
   type: "POST",
   url: "_inclus/afficher-carrousel-ville-ajax.php",
   data: "idville="+idselect,
   dataType:"html",
   cache: false,
   success: function(html) {
      $("#idcarrousel").html(html);
   },
   error: function(xhr, textStatus, errorThrown) {
      alert('status:' + textStatus + ' --- error: ' + errorThrown);
   }
});

Je vais regarder le rendu du script appelé : afficher-carrousel-ville-ajax.php
Fais un essai et poste l'erreur stp.

**adam974** · 25/08/2011, 20h15

D'accord, je n'ai maintenant plus aucune erreur mes images s'affichent bien lorsque je change de ville mais le carrousel disparait toujours.

Voici le script afficher-carrousel-ville-ajax.php :

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
<?php
header('Content-Type: text/xml');
$idville = $_POST['idville']; //on récupère idville
if(is_numeric($idville)) { // on protège la bdd
?>
 
 
 
		<ul>
<?php
 
	try
	{
		// connexion a la bdd
		$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
		$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
		// requete : infos pour cette ville
		//$requete = "SELECT * FROM deals WHERE zoneiddeal = '".$idville."';";
		//$reponse = $bdd->query('$requete')
		$reponse = $bdd->query('SELECT * FROM deals WHERE zoneiddeal = '.$idville.';');
		// On affiche chaque entrée une à une
 
		while ($donnees = $reponse->fetch()) 
		{
 
?>		
 
			<li><a href="<?php echo '#'.$donnees['id']?>" class="tooltiplink"><img src="images/<?php echo $donnees['image']; ?>.jpg" alt="" width="100" height="100" /></a></li>
 
<?php
		} // fin while
		$reponse->closeCursor(); // Termine le traitement de la requête
	} // fin try
	catch(Exception $e)
	{
		// En cas d'erreur précédemment, on affiche un message et on arrête tout
		die('Erreur : '.$e->getMessage());
	} // fin catch
?>
		</ul>
 
 
 
 
 
<?php
} // fin if is_numeric
?>

**rawsrc** · 25/08/2011, 20h19

Outre les problèmes d'appels (résolus), il faut revoir complètement le code du fichier appelé (afficher-carrousel-ville-ajax.php) (vu le nombre de versions, je n'ai pas celle qui tu as posté, donc mets un bémol à ma remarque) mais là maintenant je n'ai pas le temps et il va falloir aussi voir je pense l'implémentation du .delegate()
Bref, y reste du boulot pour demain. Comme te l'as conseillé précédemment le collegue jreaux62 : bière, suppositoire et gros dodo

Invité · 25/08/2011, 20h22

Envoyé par rawsrc

bière, suppositoire et gros dodo

Précision : ne pas utiliser la canette de bière comme suppositoire ... On dors moins bien... ou à l'hôpital

(je ris moi-même à mes propres c***ries ! )

**adam974** · 25/08/2011, 20h23

Merci une nouvelle fois à vous.

Je vais tout de même essayer d'avancer de mon côté voir si je peux arriver à qqch.

Bonne soirée à vous

EDIT :

Envoyé par rawsrc

Outre les problèmes d'appels (résolus), il faut revoir complètement le code du fichier appelé (afficher-carrousel-ville-ajax.php) (vu le nombre de versions, je n'ai pas celle qui tu as posté, donc mets un bémol à ma remarque) mais là maintenant je n'ai pas le temps et il va falloir aussi voir je pense l'implémentation du .delegate()
Bref, y reste du boulot pour demain. Comme te l'as conseillé précédemment le collegue jreaux62 : bière, suppositoire et gros dodo

Je pense que c'est maintenant l'implémentation du .delegate() qu'il me manque seulement comme me l'avait fait comprendre pour récupérer mes événements perdus.

Invité · 25/08/2011, 20h26

Allez ! courage !
On vise les 200 messages pour demain !

**adam974** · 25/08/2011, 20h27

Envoyé par jreaux62

Allez ! courage !
On vise les 200 messages pour demain !

Je ne l’espère vraiment pas quand même

edit : sachant que pour la suite je voudrai afficher les images de la catégories qui sera choisie dans les radio boutons. Je me demande donc s'il me sera possible de créer dans le même principe avec ajax et une fonction onChange, de récupérer l'id de la ville choisie dans la liste déroulante ainsi que l'id de la catégorie sélectionnée.

Une fonction donc onchange avec 2 arguments, l'un récupérée de la liste déroulante et l'autre de la catégories choisie.

Merci

Je pose la question pour savoir si c'est avant tout faisable où si je devrais chercher une autre solution.

EDIT :
je suis toujours dans le cas suivant :

Ma page au lancement

Et après avoir changé de ville :

Je n'ai pas vraiment réussi à définir le delegate() pour récupérer mes événements perdus, quelles sont les argument que je dois passer dans le delegate et ou dois je le placer svp?(dans la fonction affichagecarrouselajax?)

**rawsrc** · 26/08/2011, 14h47

Allez c'est reparti !

J'ai repris et corrigé ta fonction afficher-carrousel-ville-ajax.php :
is_numeric() n'est pas suffisant : un id qui serait égal à 123.45 est numérique mais n'est pas pour autant un id valide.

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
<?php
header('Content-Type: text/html');
$idville = $_POST['idville'];
if( ! ctype_digit("$idville")) {
   return;
}
 
try {
   $pdo = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', array(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION));
   $reponse = $pdo->query('SELECT * FROM deals WHERE zoneiddeal=' . $idville . ';');
   while ($donnees = $reponse->fetch()) {
      $rendu[] = <<<SC
<li>
   <a href="#{$donnees['id']} class="tooltiplink"><img src="images/{$donnees['image']}.jpg" alt="" width="100" height="100" /></a>
</li>
SC;
   }
 
   echo '<ul>' . implode("\n", $rendu) . '</ul>';
}
catch (Exception $e) {
   die('Erreur : ' . $e->getMessage());
}
?>

Ensuite le javascript :
"text/javascript" est noté deprecated et doit être remplacé par "application/javascript"

Pour conserver la gestion des évènements rattachés aux tags modifiables par des appels ajax, 2 méthodes sont possibles : jQuery.delegate() ou rattacher après chaque mise à jour la gestion des évènements.

jQuery.delegate()
Pour comprendre l'approche, il faut raisonner par analogie : c'est exactement la même chose que de déléguer sa responsabilité de surveillant à quelqu'un d'autre et par la même occasion lui permettre de prendre les décisions qui s'imposent en fonction de ce qu'il voit.
Ramené à notre problématique, c'est de dire à un tag englobant le groupe amené à changer, qu'il doit écouter les évènements de ce groupe et réagir en fonction.
Ici, le groupe peut changer autant que nécessaire mais le tag englobant devra toujours exister afin d'assurer en permanance la surveillance jusqu'à ce qu'il soit supprimé ou déchargé de ce rôle (jQuery.undelegate())
Ce principe utilise uniquement les propriétés liées à la propagation des évènements dans l'arborescence DOM. Par exemple, un évènement (clic, survol...) arrive sur un élément au sein du groupe, le navigateur propage cet évènement à travers l'arborescence, quand il atteindra le tag surveillant, ce dernier va comparer ce qui lui parvient avec une liste de filtres et d'actions que l'on aura définie au préalable selon nos besoins et réagira en conséquence. Soit un des filtres correspond à l'élément source de l'évènement et dans ce cas la fonction rattachée sera exécutée, soit rien ne correspond et la propagation continuera aux autres noeuds du DOM.
Pour utiliser cette approche, il faut connaître à l'avance quels types d'évènement on devra écouter. Dans notre cas, il faut décortiquer la lib simpletooltip() pour lister les évènements qu'elle écoute et se greffer dessus. Franchement, pas trop envie. Pour finir, voici le noeud auquel j'aurai délégué la surveillance de ce tout ce qui se passe en dessous :

Code :

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

<div id="idcarrousel" class="anyClass">

Rattacher les tooltips à chaque modification
C'est le plus simple, ce que j'ai choisi.
Voici tout le block script sans la partie Google Analytics :

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
<!-- Script initialisation jquery -->
<script type="application/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js" charset="utf-8"></script>
<script type="application/javascript" src="lib/jquery.selectbox-0.5.js"></script>
<script type="application/javascript" src="lib/jquery.qtip-1.0.0-rc3.js"></script>
<script type="application/javascript" src="lib/custom.js"></script>
<script type="application/javascript" src="lib/jquery.simpletooltip-min.js"></script>
 
<script type="application/javascript">
   function linkTooltips() {
      $(".anyClass").jCarouselLite({ btnNext: ".next", btnPrev: ".prev" });
      $("a.tooltiplink").simpletooltip();
      $("a.clic").simpletooltip({ click: true });
      $("a.delay").simpletooltip({ hideDelay: 0.5 });
      $("#demo_1").simpletooltip({ margin: 10 });
      $("#demo_2").simpletooltip({ showEffect: "fadeIn", hideEffect: "fadeOut" });
      $("#demo_3").simpletooltip({ showEffect: "slideDown", hideEffect: "slideUp" }) ;
      $("#demo_4").simpletooltip({ showEffect: "show", hideEffect: "hide" });
      $("#demo_5").simpletooltip({ click: true });
      $("#demo_6").simpletooltip({ hideDelay: 0.5 });
      $("#demo_7").simpletooltip({ click: true, hideOnLeave: false });
      $("#demo_8").simpletooltip({ 
         callback: function(tooltip) {
            window.alert('Callback : affichage de la tooltip #'+tooltip.id);
         }
      });
      $("#demo_9").simpletooltip({ 
         customTooltip: function(target) {
            return '<p style="width:200px;height:50px;margin:0;padding:10px;' 
                     + 'background:#fff;border:1px solid #000;">Texte de l\'élément survolé :<br /> "' 
                     + $(target).text() +'" </p>';
         },
         showEffect: "fadeIn",
         hideEffect: "fadeOut"
      });
   };
 
   $(document).ready(function() { linkTooltips(); });
 
   function AffichageCarrouselAjax(idselect) {
      $.ajax({
         type: "POST",
         url: "_inclus/afficher-carrousel-ville-ajax.php",
         data: "idville="+idselect,
         dataType: "html",
         cache: false,
         success: function(html) {
            $("#idcarrousel").html(html);linkTooltips();return false;
         }
      });
   };
</script>

J'espère ne pas avoir été trop brouillon dans mes explications et j'espère ne pas avoir fait de boulette dans le code vu que je ne l'ai pas testé moi-même, ça sort du four.

Une fonction donc onchange avec 2 arguments, l'un récupérée de la liste déroulante et l'autre de la catégories choisie.

Evidemment, c'est faisable, essaye de t'inspirer de ce que j'ai fait

**adam974** · 26/08/2011, 15h31

Avant tout, un énorme merci! L'ensemble de l'explication et claire à mon gout et loin d'être brouillon.

Je viens de tester le code avec votre méthode choisie pour la gestion des événements et le carroussel ne réapparait pas, un autre bémol également mes images s'affichent en doubles pour chacune d'elle.

voic mon code source :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Projet ISEP</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	   <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
 
	   <style type="text/css" media="screen">
		.tooltip{width:200px;margin:0;padding:5px;font-size:11px;color:#666;background:#fff;border:5px solid #ccc;}
		.tooltip p{margin:0;text-align:justify;}
		</style>
 
				 <!-- Script initialisation jquery -->
		<script type="application/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js" charset="utf-8"></script>
		<script type="application/javascript" src="lib/jquery.selectbox-0.5.js"></script>
		<script type="application/javascript" src="lib/jquery.qtip-1.0.0-rc3.js"></script>
		<script type="application/javascript" src="lib/custom.js"></script>
		<script type="application/javascript" src="lib/jquery.simpletooltip-min.js"></script>
 
		<script type="application/javascript">
		   function linkTooltips() {
			  $(".anyClass").jCarouselLite({ btnNext: ".next", btnPrev: ".prev" });
			  $("a.tooltiplink").simpletooltip();
			  $("a.clic").simpletooltip({ click: true });
			  $("a.delay").simpletooltip({ hideDelay: 0.5 });
			  $("#demo_1").simpletooltip({ margin: 10 });
			  $("#demo_2").simpletooltip({ showEffect: "fadeIn", hideEffect: "fadeOut" });
			  $("#demo_3").simpletooltip({ showEffect: "slideDown", hideEffect: "slideUp" }) ;
			  $("#demo_4").simpletooltip({ showEffect: "show", hideEffect: "hide" });
			  $("#demo_5").simpletooltip({ click: true });
			  $("#demo_6").simpletooltip({ hideDelay: 0.5 });
			  $("#demo_7").simpletooltip({ click: true, hideOnLeave: false });
			  $("#demo_8").simpletooltip({ 
				 callback: function(tooltip) {
					window.alert('Callback : affichage de la tooltip #'+tooltip.id);
				 }
			  });
			  $("#demo_9").simpletooltip({ 
				 customTooltip: function(target) {
					return '<p style="width:200px;height:50px;margin:0;padding:10px;' 
							 + 'background:#fff;border:1px solid #000;">Texte de l\'élément survolé :<br /> "' 
							 + $(target).text() +'" </p>';
				 },
				 showEffect: "fadeIn",
				 hideEffect: "fadeOut"
			  });
		   };
 
		   $(document).ready(linkTooltips());
 
		   function AffichageCarrouselAjax(idselect) {
			  $.ajax({
				 type: "POST",
				 url: "_inclus/afficher-carrousel-ville-ajax.php",
				 data: "idville="+idselect,
				 dataType: "html",
				 cache: false,
				 success: function(html) {
					$("#idcarrousel").html(html);linkTooltips();
				 }
			  });
		   };
		</script>
 
    <script type="text/javascript">
		// function f(content){
			// alert(content.html());		
			// }
 
		// $(function(){  
				// $("select:eq(0)").imgDropDown({title:"Paris"});	
		// });
 
	</script>
 
 
 
 
 
 
 
 
 
 
   </head>
 
   <body background="fond/1.jpg">
 
	<div id="en_tete">
	   <!-- Ici on mettra la bannière -->
	</div>
 
	<div id="menu">
	   <!-- Ici on mettra le menu -->
	</div>
 
	<div id="corps">
	   <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
 
	</div>
 
	<div id="pied_de_page">
	   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
	</div>
 
 
 
	<div class="option">
	<form method="post" action="index.php" id="form_items" name="form_items">
		<select name="Items" id="Items" onchange="AffichageCarrouselAjax($('option:selected', this).val());">
 
				<?php
				try
				{
					// On se connecte à MySQL
					$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
					$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
					// On récupère tout le contenu de la table jeux_video
					$reponse = $bdd->query('SELECT * FROM villes');
 
					// On affiche chaque entrée une à une
					while ($donnees = $reponse->fetch())
					{
				?>
 
				<option value="<?php echo $donnees['id']; ?>"><?php echo $donnees['nom']; ?></option>
 
				<?php
					}
						$reponse->closeCursor(); // Termine le traitement de la requête
					}
						catch(Exception $e)
					{
						// En cas d'erreur précédemment, on affiche un message et on arrête tout
						die('Erreur : '.$e->getMessage());
					}
				?>
		</select>
	</form>	
 
	</div>
 
 
 
	<div id="conteneur">
		<button class="prev"><<</button>
		<button class="next">>></button>
    </div>
 
 
 
	<div id="idcarrousel">
		<ul>
			<?php
				try
				{
					// On se connecte à MySQL
					$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
					$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
					// On récupère tout le contenu de la table jeux_video
					$reponse = $bdd->query('SELECT * FROM deals');
 
					// On affiche chaque entrée une à une
					while ($donnees = $reponse->fetch())
					{
				?>
 
				<li><a href="<?php echo '#'.$donnees['id']?>" class="tooltiplink"><img src="images/<?php echo $donnees['image']; ?>.jpg" alt="" width="100" height="100" /></a></li>
 
				<?php
					}
 
						$reponse->closeCursor(); // Termine le traitement de la requête
 
					}
						catch(Exception $e)
					{
						// En cas d'erreur précédemment, on affiche un message et on arrête tout
						die('Erreur : '.$e->getMessage());
					}
				?>
 
		</ul>
	</div>	
 
 
 
	<div id="categ">
		<form method="post" action="index.php">
		   <p>
			   Catégories :<br /><br />
			   <?php
				try
				{
					// On se connecte à MySQL
					$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
					$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
					// On récupère tout le contenu de la table jeux_video
					$reponse = $bdd->query('SELECT * FROM categ');
 
					// On affiche chaque entrée une à une
					while ($donnees = $reponse->fetch())
					{
				?>
 
					<input value="<?php echo $donnees['id']; ?>" name="categ" type="radio" /> <label for="frites"><?php echo $donnees['type']; ?></label><br />
 
 
				<?php
					}
 
						$reponse->closeCursor(); // Termine le traitement de la requête
 
					}
						catch(Exception $e)
					{
						// En cas d'erreur précédemment, on affiche un message et on arrête tout
						die('Erreur : '.$e->getMessage());
					}
				?>
			</p>
		</form>
	</div>
 
 
 
 
	<?php
 
		try
		{
			// On se connecte à MySQL
			$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
			$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
			// On récupère tout le contenu de la table jeux_video
			$reponse = $bdd->query('SELECT * FROM deals');
 
			// On affiche chaque entrée une à une
			while ($donnees = $reponse->fetch())
			{
	?>
			<div id="<?php echo $donnees['id']; ?>" class="tooltip">
 
			<h1><?php echo $donnees['titre']; ?></h1><br />
			<p><?php echo 'Description : ' .$donnees['detaildeal']; ?></p><br />
			<p><?php echo 'Adresse : ' .$donnees['adressedeal']; ?></p><br />
			<p><?php echo 'Expire le : ' .$donnees['findeal']; ?></p><br />
			<p><?php echo 'Acheteurs : ' .$donnees['nbacheteur']; ?></p><br />
			<form method="post" action="index.php">
			   <p>
				   <label><strong>Prénom</strong></label> : <input type="text" name="prenom"  /><br /><br />
				   <label><strong>Nom</strong></label>    : <input type="text" name="nom" /><br />
				   <input type="hidden" name="idcoupon" value="<?php echo $donnees['id']; ?>" /><br />
				   <input type="hidden" name="findeal" value="<?php echo $donnees['findeal']; ?>" /><br />
				   <input type="hidden" name="nbr" value="<?php echo $donnees['nbacheteur']; ?>" /><br />
				   <input type="hidden" name="presta" value="<?php echo $donnees['idcateg']; ?>" /><br />
				   <input type="submit" /> 
			   </p>
			</form>
 
 
 
 
			</div>
 
	<?php
			}
 
				$reponse->closeCursor(); // Termine le traitement de la requête
 
			}
				catch(Exception $e)
			{
				// En cas d'erreur précédemment, on affiche un message et on arrête tout
				die('Erreur : '.$e->getMessage());
			}
	?>
 
 
	<?php if(isset($_POST['nom'])) { 
 
						try
			{
				// On se connecte à MySQL
				$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
				$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
				function random_str($nbr)
				{
					$str = "";
					$chaine = "abcdefghijklmnpqrstuvwxyz0123456789";
					srand((double)microtime()*1000);
 
					for($i=0; $i<$nbr; $i++) {
						$str .= $chaine[rand()%strlen($chaine)];
					}
 
					return $str;
				}
 
				// Exemple d'un appel avec 6 caractères
				$str = random_str(6);
 
 
				$req = $bdd->prepare('INSERT INTO coupons(nombeneficiaire, prenombeneficiare, iddeal,dateexpiration, datecreation, codecoupon, idpresta) VALUES(:nombeneficiaire, :prenombeneficiare, :iddeal, :dateexpiration, NOW(), :codecoupon, :idpresta)');
				$req->execute(array(
					'nombeneficiaire' =>  $_POST['nom'],
					'prenombeneficiare' => $_POST['prenom'],
					'iddeal' => $_POST['idcoupon'],
					'dateexpiration' => $_POST['findeal'],
					'idpresta' => $_POST['presta'],
 
					'codecoupon' => $str
 
					));
 
					$req->closeCursor(); // Termine le traitement de la requête
 
 
				$newid = $_POST['idcoupon']; //on récupère idville
				if(is_numeric($newid)) { // on protège la bdd
 
 
				$req = $bdd->prepare('UPDATE deals SET nbacheteur= :nbacheteur WHERE id = '.$newid.'');
				$req->execute(array(
					'nbacheteur' =>  ($_POST['idcoupon'] + 1)
					));
 
					$req->closeCursor(); // Termine le traitement de la requête
					}
 
 
				}
					catch(Exception $e)
				{
					// En cas d'erreur précédemment, on affiche un message et on arrête tout
					die('Erreur : '.$e->getMessage());
				}
	} ?>
 
 
 
 
 
 
 
 
 
 
   </body>
</html>

Et mon afficher-carrousel-ville-ajax.php :

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
<?php
header('Content-Type: text/html');
$idville = $_POST['idville'];
if( ! ctype_digit("$idville")) {
   return;
}
 
try {
   $pdo = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', array(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION));
   $reponse = $pdo->query('SELECT * FROM deals WHERE zoneiddeal=' . $idville . ';');
   while ($donnees = $reponse->fetch()) {
      $rendu[] = <<<SC
<li>
   <a href="#{$donnees['id']} class="tooltiplink"><img src="images/{$donnees['image']}.jpg" alt="" width="100" height="100" /></a>
</li>
SC;
   }
 
   echo '<ul>' . implode("\n", $rendu) . '</ul>';
}
catch (Exception $e) {
   die('Erreur : ' . $e->getMessage());
}
?>
 
 
 
		<ul>
<?php
 
	try
	{
		// connexion a la bdd
		$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
		$bdd = new PDO('mysql:host=localhost;dbname=projet_isep', 'root', '', $pdo_options);
 
		// requete : infos pour cette ville
		//$requete = "SELECT * FROM deals WHERE zoneiddeal = '".$idville."';";
		//$reponse = $bdd->query('$requete')
		$reponse = $bdd->query('SELECT * FROM deals WHERE zoneiddeal = '.$idville.';');
		// On affiche chaque entrée une à une
 
		while ($donnees = $reponse->fetch()) 
		{
 
?>		
 
			<li><a href="<?php echo '#'.$donnees['id']?>" class="tooltiplink"><img src="images/<?php echo $donnees['image']; ?>.jpg" alt="" width="100" height="100" /></a></li>
 
<?php
		} // fin while
		$reponse->closeCursor(); // Termine le traitement de la requête
	} // fin try
	catch(Exception $e)
	{
		// En cas d'erreur précédemment, on affiche un message et on arrête tout
		die('Erreur : '.$e->getMessage());
	} // fin catch
?>
		</ul>
 
 
 
 
 
<?php
 // fin if is_numeric
?>

**rawsrc** · 26/08/2011, 15h45

essaye de préciser la manière dont tu lis les données :

Code :

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

 while ($donnees = $reponse->fetch(PDO::FETCH_ASSOC)) {

parce que par défaut cela vaut PDO::FETCH_BOTH.
Normalement les doublons auront disparu

Value dans une liste déroulante

Langage PHP

Discussions similaires

Partager

Partager