11498 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai une page qui doit afficher les de mise à jours de caméras. Pour ce faire, j'utilise une menu de sélection. Donc quand je clique sur "ok" avec avoir choisi mon produit, ça affiche un tableau contenant les infos. Jusque là ça va. Mais j'aimerais bien pouvoir me passer du bouton "ok" et que l'affichage du tableau se fasse simplement à la sélection du produit. Avec un onChange?
J'ignore comment m'y prendre.

<form action="maj.php" method="post">
              <select name="camera" onchange="getCamera(this.value)">
                <option selected>Choisir une caméra</option><?php
					
					$requete = mysql_query("SELECT DISTINCT camera FROM software WHERE camera NOT IN ('IR-5B','IR-10T','G4','G4B','Bloodline','C4') ORDER BY camera");
						while($row = mysql_fetch_assoc($requete)) {
							echo '<option value="'.$row['camera'].'">'.$row['camera'].'</option>';
						}
					?>
              </select><br>
			<input name="ok" type="submit" value="OK">
      </form>

<?php
	if (!empty($_POST['ok'])){
	?>
	<div class="update">
            <?php
		$req = mysql_query("SELECT * FROM software WHERE camera='".$_POST['camera']."' AND statue='actif'");
			if(mysql_num_rows($req) > 0) {
	?>
        <table>
      		<thead>
              <tr>
            	<th colspan="3" class="gradient-gray"><?php echo $_POST['camera'];?>
                 </th>
              </tr>
            </thead>
			<tbody>
              <tr>
                <td width="15%" rowspan="5" align="left" valign="middle"><img src="/Images/photosProduits/<?php echo $_POST['camera'];?>/<?php echo $_POST['camera'];?>.png" alt="" width="95" /></td>
            <?php
				while($s = mysql_fetch_assoc($req)) { ?>
  	        <td width="15%" height="25" align="left" valign="top"><p>Fichier:</p></td>
  	        <td align="left" valign="top"><p><a href="/software/<?php echo $s['fichier'];?>"><u><?php echo $s['fichier'];?></u></a></p></td>
          </tr>
  	      <tr>
  	        <td height="25" align="left" valign="top"><p>Version:</p></td>
  	        <td align="left" valign="top"><p><?php echo $s['version'];?></p></td>
          </tr>
  	      <tr>
  	        <td height="25" align="left" valign="top"><p>Date:</p></td>
  	        <td align="left" valign="top"><p><?php echo $s['dateFr'];?></p></td>
          </tr>
  	      <tr>
  	        <td height="40" align="left" valign="top"><p>Amélioration:</p></td>
  	        <td align="left" valign="top">
			<?php
				$am = explode("\n", $s['descriptionFr']);
				echo('<ul class="upDate">');
				foreach($am as $a) {
					echo('<li>'.stripslashes($a).'</li>');
				}
				?>
                </ul></td>
          </tr>
              <tr>
                <td height="30" colspan="2" align="left" valign="top">
                	<p><a onclick="return procedure(this.href);" href="/software/procedures/prodecure_<?php echo $_POST['camera'];?>_fr.html">Procédure d'installation</a> de la mise à jour</p></td>
              </tr>
			<?php
				}
			}
				$q = mysql_query("SELECT * FROM software WHERE camera='".$_POST['camera']."' AND statue='old' ORDER BY version DESC");
				if(mysql_num_rows($q) > 0) {
	?>
    		<tr>
            	<td colspan="3" class="joindre">
                	<div>
                        <p><a class="bouton"><span class="ico_archives" aria-hidden="true"></span>Historique des mises à jour</a></p>
                        <div class="info gradient-gray">
                        	<a class="close"><img src="../../interface/images/close.png" width="15" height="15" alt="fermer" /></a>
                       	  <h3>Historique des mises à jour de la <?php echo $_POST['camera'];?></h3>
                            <ul class="version">
                        <?php
                            while($v = mysql_fetch_assoc($q)) { ?>
                            	<li>Version <?php echo $v['version'];?>
                        		<?php
                            		$am = explode("\n", $v['descriptionFr']);
                            		echo('<ul>');
                            		foreach($am as $a) {
                                		echo('<li>'.stripslashes($a).'</li>');
									}
									?>
                            		</ul>
                            	</li>
                            <?php
                            }
                        ?>
                            </ul>
                        </div>
                    </div>
            	</td>
            </tr>
          <?php
				}
          ?>
			</tbody>
        </table>

Modifié par juliesunset (05 Aug 2013 - 21:57)
Hello,

C'est effectivement possible avec onchange, mais ce n'est pas une bonne idée.

Dans certains navigateurs, notamment IE, le onchange est déclenché lorsqu'on modifie la sélection avec les flèches du clavier. Dans ce mode, on ne peut donc qu'activer l'élément précédent ou suivant celui actuellement sélectionné, et si on veut sélectionner un élément qui se trouve tout à la fin de la liste, on doit d'abord activer successivement tous ceux qui sont entre. C'est un problème d'accessibilité.

IL existe une solution pour éviter ce problème, mais très très peu d'utilisateurs la connaissent: il faut d'abord ouvrir la liste avec Alt+Bas et on peut la refermer avec Alt+Haut (marche en tout cas sous windows et la plupart des bureaux linux, je ne sais pas ce qu'il en est sous mac). Mais il ne faut pas compter sur ce que les utilisateurs connaissent cette astuce, c'est un truc de power user.

Tu as le droit d'utiliser onchange mais seulement si tu ne recharges pas la page et si tu ne modifies pas le focus. Ainsi, si ton tableau est mis à jour grâce à AJAX au lieu de recharger toute la page, ce serait éventuellement envisageable (attention à faire du bon AJAX pour ne pas détruire l'accessibilité autrement).

Une solution alternative si tu ne fais pas d'AJAX et si tu tiens quand même à onchange, c'est ne pas recharger la page immédiatement mais attendre quelques secondes après le dernier déclenchement de onchange. Si un onchange est déclenché avant la fin du timer, il faut l'annuler et en démarrer un nouveau.
Le problème de cette solution est qu'elle peut donner une certaine sensation de lenteur pour les utilisateurs classiques qui sélectionnent à la souris ou ceux dont le navigateur ne déclenche pas onchange à chaque appui sur une touche fléchée (firefox par exemple). Si tu ne veux pas attendre moins de 1.5 ou 2 secondes, oublie cette idée, ça ne servira à rien.
Merci pour ta réponse QuentinC, j'ignorais tout ces détails!

Ma solution sera donc... de garder mon bouton! javascript, ajax et moi ne sommes pas amis faut croire! Smiley langue
A l'heure où tout le monde passe à l'AJAX sans mesurer les besoins spécifiques et les conséquences pour l'accessibilité, je te félicites: en gardant le bouton, tu as choisi la meilleure option qui soit.