Value dans une liste déroulante

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

J'ai donc repris la config de afficher...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
<?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(PDO::FETCH_ASSOC)) {
      $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());
}
?>

Mais rien n'a changé, j'ai toujorus les images en doubles et les boutons sont toujours présents.

EDIT : Le problème ne viendrait pas des fonctions qui initialisent le carrousel? (présentes dans custom.js)

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

Boulette dans mon code : remplace

Code :

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

1
2
3
$(document).ready(linkTooltips());
par
$(document).ready(function() { linkTooltips(); });

**adam974** · 26/08/2011, 16h02

Envoyé par rawsrc

Boulette dans mon code : remplace

Code :

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

1
2
3
$(document).ready(linkTooltips());
par
$(document).ready(function() { linkTooltips(); });

J'ai rectifié et j'ai maintenant bien le bon nombre d'image qui s'affiche avec les tooltip bien présents mais toujours pas de carrousel.

Cela ne viendrait pas des fonction qui initialise le carrousel à l'ouverture de la page?

**rawsrc** · 26/08/2011, 16h03

Modifies également la clause success de l'appel ajax :

Code :

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

1
2
3
success: function(html) {
   $("#idcarrousel").html(html);linkTooltips();return false;
}

le return false permet de stoper la propagation de l'évènement

**rawsrc** · 26/08/2011, 16h05

Envoyé par adam974

Cela ne viendrait pas des fonction qui initialise le carrousel à l'ouverture de la page?

peut-être vu que je ne connais pas cette lib, jevais voir comment on l'initialise

**adam974** · 26/08/2011, 16h10

Envoyé par rawsrc

peut-être vu que je ne connais pas cette lib, jevais voir comment on l'initialise

Voici le lien ou j'ai pu installer ce carrousel :
http://www.gmarwaha.com/jquery/jcarousellite/

J'ai suis suivi l'installation en y mettant la fonction javascript cité à la 3eme étape de l'installation dans custom.js. J'yi ai également placé toutes les fonctions présentes dans le jCarousel Lite à télécharger.

**rawsrc** · 26/08/2011, 16h11

Allez, on va revenir à ton code du début si je ne m'abuse

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
function linkTooltips() {
   $(function() {
      $(".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"
      });
   });
};

**adam974** · 26/08/2011, 16h19

Alors les tooltip sont bien présents mais les toujours pas de carrousel

**rawsrc** · 26/08/2011, 16h30

Ah je te retiens

dans le dernier code que tu as posté voici ce qu'il y est écrit en ligne 154 :

Code :

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

<div id="idcarrousel">

Pour initialiser ton carrousel, la fonction recherche une classe "anyClass" donc elle peut toujours chercher.
Soit tu rajoutes la classe soit tu remplaces l'initialisation de ton carrousel par

Code :

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

$("#idcarrousel").jCarouselLite({ btnNext: ".next", btnPrev: ".prev" });

Je pense que tu peux reprendre le bloc de javascript du message 138 que j'ai corrigé, cela doit fonctionner sans problèmes.

**adam974** · 26/08/2011, 16h37

Envoyé par rawsrc

Ah je te retiens

dans le dernier code que tu as posté voici ce qu'il y est écrit en ligne 154 :

Code :

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

<div id="idcarrousel">

Pour initialiser ton carrousel, la fonction recherche une classe "anyClass" donc elle peut toujours chercher.
Soit tu rajoutes la classe soit tu remplaces l'initialisation de ton carrousel par

Code :

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

$("#idcarrousel").jCarouselLite({ btnNext: ".next", btnPrev: ".prev" });

Eurêka sa m'a lair de fonctionner à merveille!

Je vais tenter de créer la seconde fonction onchange avec 2 arguments pour finir!

Un grand et très grand remerciement à vous rawsrc! sans oublier jreaux62

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

Envoyé par adam974

Je vais tenter de créer la seconde fonction onchange avec 2 arguments pour finir!

Si tu n'y arrives pas, tu sais maintenant je pense où poster

Envoyé par adam974

Un grand et très grand remerciement à vous rawsrc!

De rien, on n'a quand même pas atteint les 200 messages

J'aurais dû parier la canette avec jreaux62...

Invité · 26/08/2011, 16h45

Ca y est ?
Déjà ?
On n'en est qu'au 150ème message !

J'étais resté en embuscade ! ...

Invité · 26/08/2011, 16h54

Le plus drôle, c'est que l'histoire "idcaroussel" du remonte ... au message #79 !!

**adam974** · 26/08/2011, 16h54

not yet.. :s

J'avais dans ma fonction AffichageCarrouselAjax le code suivant qui n'est plus là :

Code :

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

				$('body').css('background-image','url(fond/' + idselect+ '.jpg)');

Mon fond d'écran ne change plus donc lorsque je change de ville. J'ai essayé de rajouter l'instruction mais n'y fait...

EDIT : J'ai trouvé

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
  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();
 
				 }
			  });
			  $('body').css('background-image','url(fond/' + idselect + '.jpg)');
		   };

**rawsrc** · 26/08/2011, 17h01

Envoyé par adam974

J'avais dans ma fonction AffichageCarrouselAjax le code suivant qui n'est plus là

Est-ce-que tu sais le nombre de versions qu'il y a eu de ce bout de code ? Je parie que non, moi non plus d'ailleurs donc j'en ai pris une et j'ai fait avec.
Postes la version avec le bout de code qui manque.

**rawsrc** · 26/08/2011, 17h04

ton formatage doit intervenir en cas de success, donc le bon code c'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
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();
         $('body').css('background-image','url(fond/' + idselect + '.jpg)');
         return false; // arrêt de la propagation de l'évènement dans le DOM
      }
   });
};

**adam974** · 26/08/2011, 17h21

Est ce que je peux réutiliser la même fonction que pour le carrousel dans le onchange et lui rajouter un paramétres?

**rawsrc** · 26/08/2011, 19h57

Je vais te filer un conseil : relis les bases du PHP ainsi que les bonnes pratiques du développement en général parce que tu en as grand besoin.

Je me suis permis de reprendre intégralement ton code source dans un but didactique afin de te montrer une manière de coder qui préserve la lisbilité et la concision. Dépieutes ce code à loisir et inspires-toi en pour tes prochaines sources, parce qu'au rythme où tu codes tu vas te noyer (sûrement) voire noyer des types qui vont vouloir t'aider. Vu que tu es (grand) débutant, ne t'économise surtout pas sur la lecture de tutoriaux et de divers documents techniques. Tout ce qui te manque est forcément écrit quelque part, suffit juste de fouiller un peu, de garder des notes et de les relire jusqu'à leur complète assimilation. En résumé : cela ne rentrera pas tout seul.

Je t'ai résolu dans la foulée ta sélection avec la catégorie.

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
<?php
 
   function random_str($nbr) {
      $base = str_split('abcdefghijklmnpqrstuvwxyz0123456789');
      return implode(NULL, array_rand(array_flip($base), $nbr));
   }
 
   $server = 'localhost';
   $dbName = 'projet_isep';
   $user   = 'root';
   $pwd    = '';
 
   try {
      $pdo = new PDO("mysql:host=$server;dbname=$dbName", $user, $pwd, array(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION));
 
      # LISTE DES VILLES
      $sql    = 'SELECT * FROM villes;';
      $stmt   = $pdo->prepare($sql);
      $villes = ($stmt->execute()) ? $stmt->fetchAll(PDO::FETCH_ASSOC) : array();
 
      # LISTE DES DEALS POUR LE CARROUSEL
      $sql   = 'SELECT * FROM deals;';
      $stmt  = $pdo->prepare($sql);
      $deals = ($stmt->execute()) ? $stmt->fetchAll(PDO::FETCH_ASSOC) : array();
 
      # LISTE DES CATEGORIES
      $sql    = 'SELECT * FROM categ;';
      $stmt   = $pdo->prepare($sql);
      $categs = ($stmt->execute()) ? $stmt->fetchAll(PDO::FETCH_ASSOC) : array();
 
      if(isset($_POST['nom'])) {
         $sql  = 'INSERT INTO coupons(nombeneficiaire, prenombeneficiare, iddeal, dateexpiration, datecreation, codecoupon, idpresta) '
                 . 'VALUES(:nombeneficiaire, :prenombeneficiare, :iddeal, :dateexpiration, NOW(), :codecoupon, :idpresta);';
         $stmt = $pdo->prepare($sql);
         $stmt->bindParam(':nombeneficiaire', $_POST['nom'], PDO::PARAM_STR);
         $stmt->bindParam(':prenombeneficiare', $_POST['prenom'],PDO::PARAM_STR);
         $stmt->bindParam(':iddeal', $_POST['idcoupon'], PDO::PARAM_INT);
         $stmt->bindParam(':dateexpiration', $_POST['findeal'], PDO::PARAM_STR);
         $stmt->bindParam(':codecoupon', random_str(6), PDO::PARAM_STR);
         $stmt->bindParam(':idpresta', $_POST['presta'], PDO::PARAM_INT);
         $stmt->execute();
 
         $idCoupon = $_POST['idcoupon'];
         if (ctype_digit("$idCoupon")) {
            $sql  = 'UPDATE deals SET nbacheteur= :nbacheteur WHERE id = :idCoupon;';
            $stmt = $pdo->prepare($sql);
            $stmt->bindParam(':nbacheteur', $idCoupon + 1, PDO::PARAM_INT);
            $stmt->bindParam(':idCoupon', $idCoupon, PDO::PARAM_INT);
            $stmt->execute();
         }
      }
   }
   catch (Exception $e) {
       die('Erreur : ' . $e->getMessage());
   }
?>
 
 
<!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(function(){
            linkTooltips();
         });
 
         function AffichageCarrouselAjax() {
           var idVille = $('#Items option:selected').val();
           var idCateg = $('#categ input:checked').val();
           $.ajax({
             type: "POST",
             url: "_inclus/afficher-carrousel-ville-ajax.php",
             data: "idville="+idVille+"&idcateg="+idCateg,
             dataType: "html",
             cache: false,
             success: function(html) {
               $("#idcarrousel").html(html);linkTooltips();
               $('body').css('background-image','url(fond/' + idselect + '.jpg)');
               return false; // arrêt de la propagation de l'évènement dans le DOM
             }
           });
         };
      </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();">
            <?php foreach($villes as $ville): ?>
               <option value="<?php echo $ville['id']; ?>"><?php echo $ville['nom']; ?></option>
            <?php endforeach; ?>            
            </select>
         </form>   
      </div>
 
      <div id="conteneur">
         <button class="prev"><<</button>
         <button class="next">>></button>
      </div>
 
      <div id="idcarrousel" class="anyClass">
         <ul>
         <?php foreach($deals as $deal): ?>
            <li>
               <a href=#"<?php echo $deal['id']; ?>" class="tooltiplink">
                  <img src="images/<?php echo $deal['image']; ?>.jpg" alt="" width="100" height="100" />
               </a>
            </li>
         <?php endforeach; ?>
         </ul>
      </div>   
 
      <div id="categ">
         <form method="post" action="index.php">
            <p>Catégories :<br /><br />
            <?php foreach($categs as $categ): ?>
               <input value="<?php echo $categ['id']; ?>" name="categ" type="radio" />
               <label for="frites"><?php echo $categ['type']; ?></label><br />
            <?php endforeach; ?>
            </p>
         </form>
      </div>
 
      <?php foreach($deals as $deal): ?>
      <div id="<?php echo $deal['id']; ?>" class="tooltip">
         <h1><?php echo $deal['titre']; ?></h1><br />
         <p>Description : <?php echo $deal['detaildeal']; ?></p><br />
         <p>Adresse : <?php echo $deal['adressedeal']; ?></p><br />
         <p>Expire le : <?php echo $deal['findeal']; ?></p><br />
         <p>Acheteurs : <?php echo $deal['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 $deal['id']; ?>" /><br />
               <input type="hidden" name="findeal" value="<?php echo $deal['findeal']; ?>" /><br />
               <input type="hidden" name="nbr" value="<?php echo $deal['nbacheteur']; ?>" /><br />
               <input type="hidden" name="presta" value="<?php echo $deal['idcateg']; ?>" /><br />
               <input type="submit" />
            </p>
         </form>
      </div>
      <?php endforeach; ?>
   </body>
</html>

Comme toujours cela sort du four sans tests donc je croise les doigts

**adam974** · 26/08/2011, 20h14

merci, je travaillais actuellement sur la 2eme fonction onChange en reprenant la précedente mas où j'étais à la recherche d'un moyen de faire entrer 2 arguments à travars AffichageCarrouselAjax...

Je viens de tester le code et je n'ai aucune info de ma bdd qui s'affiche.
A savoir que j'ai bien la liste déroulante mais vide, je n'ai pas de radio bouton et le carrousel vide également.

**rawsrc** · 26/08/2011, 20h39

J'ai 2 minutes : c'est normal que ça foire j'ai oublié d'exécuter les statements :ane:
A remplacer par :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
# LISTE DES VILLES
      $sql    = 'SELECT * FROM villes;';
      $villes = $pdo->prepare($sql)->execute()->fetchAll(PDO::FETCH_ASSOC);
 
      # LISTE DES DEALS POUR LE CARROUSEL
      $sql   = 'SELECT * FROM deals;';
      $deals = $pdo->prepare($sql)->execute()->fetchAll(PDO::FETCH_ASSOC);
 
      # LISTE DES CATEGORIES
      $sql    = 'SELECT * FROM categ;';
      $categs = $pdo->prepare($sql)->execute()->fetchAll(PDO::FETCH_ASSOC);

Je corrige aussi dans la source, allez bon we

Value dans une liste déroulante

Langage PHP

Discussions similaires

Partager

Partager