11548 sujets

JavaScript, DOM et API Web HTML5

Problème avec Internet Explorer 9 et Jquery

Bonjour,
Je fais appel à votre expertise car j'ai un souci depuis quelques jours avec une fonctionnalité implémentée en Jquery, html /css qui fonctionne très bien sous firefox , mais qui ne fonctionne pas correctement sous internet explorer 9.
En effet, l'objetif de cette fonction est de sélectionner un formulaire à partir d'un choix réalisé à partir d'un select-option. (Le tout étant sur la même page html). Cela se passe bien sous firefox, en revanche sous IE, je n'arriva pas à afficher le premier formulaire (en l'occurence celui des services : #service)
Je vous met le code incriminé :


<ul>
	<li>
		<label for="choix">Choisir un type d'offre</label>
 			 <select id="choix" name="choix" <?php echo $dReponse['choix'];?>>
 			    <option value=""></option> 			    
        	  	<option value="service", <?php if ($dReponse['choix'] == 'service') {echo 'selected="selected"'; } else {'selected=""'; }?>>Offre de service</option>
          	  	<option value="objet", <?php if ($dReponse['choix'] == 'objet') {echo 'selected="selected"'; } else {'selected=""'; }?>>Offre d'objet</option>
  			</select>
	</li>  		
</ul>

<ul id="offre">  		
<li id="service">>
 
<form method="post" action="" id="creatservice" enctype="multipart/form-data">

....

</ul>
</form> <!-- .form_post -->	
 
 </li>
 
 <li id="objet">
 <p class="Clstitle2">Entrer les informations sur l'objet proposé</p>
 <form method="post" action="index.php?action=creatoffre" id="creatoffre" enctype="multipart/form-data">
    <ul>
...

  		
 	</ul>
 </form> <!-- .form_post --> 	
 </li>
 </ul> 	




jQuery(document).ready(function() {
	
	$("#choix").change(function () {
		$v =  $("#choix option:selected").val();
	 	if($v == '') {
	 		$("#offre").hide();	 		
	 		$("#btnframe").hide();
	 		}	 
        if($v == 'service') {        	
        	$("#objet").hide();
        	$("#offre").show();
        	$("#service").show();        	
        	$("#btnframe").show();
        	$("#choixSelect").html("<span> <input type='hidden' name='choixServ' id='choixServ' value='' /> </span>");
        	$("#choixServ").val("service");      	
           	 }
         if ($v == 'objet') {
        	$("#offre").show();
        	$("#service").hide();
        	$("#objet").show();         	          	
         	$("#btnframe").show();
            }
        });
   });


Merci de votre support

PS : j'ai essayé des conseils sur les forums avec .click à la place de change ou d'utiliser bind, de tester le browser IE : mais ça ne marche pas
À vérifier:
- Est-ce que tu as des erreurs JavaScript dans IE9?
- Quelle est la valeur de $v lorsque tu fais tes tests?

Normalement, si tu utilises les Developer Tools d'IE9 (ou IE8), tu peux utiliser la console JavaScript pour voir les erreurs JS éventuelles, et console.log(maVariable) pour afficher la valeur de cette variable dans la console. (Ne pas oublier de supprimer les appels à console.log() de ton code JS lorsque tu n'en as plus besoin, ça crée des bugs dans les navigateurs qui n'ont pas d'objet console.)
Bonjour et merci de ta réponse rapide Smiley smile

J'avais entendu parlé des "developpeurs tools de Microsoft". Je vais les installer plus tard pour voir si cela peux aider à débloquer la situation. (mais je reste septique ...) Avez-vous un article sur ces outils ?

Pour firefox,j'utilise firebug et les valeurs de v sont correctes et les tests sont concluants : chaque sélection charge le bon formulaire (#service ou #objet). C'est qu'en testant avec IE9 que le choix (#service) ne fonctionne pas.
J'ai un script AJAX dans le header de la page qui va mettre en cache une variable PHP ,justement pour le formulaire concerné : est-ce que ne viendrait pas le ça. Je vais désactivé ce script pour voir s'il y a une cause à effet ...

A plus tard.
metal971 a écrit :
J'avais entendu parlé des "developpeurs tools de Microsoft". Je vais les installer plus tard pour voir si cela peux aider à débloquer la situation. (mais je reste septique ...) Avez-vous un article sur ces outils ?

Ils sont inclus par défaut dans IE8 et IE9. Pour un article sur le sujet, je sais pas trop, voir du côté de Google. Smiley smile
Mon problème est résolu.
j'ai rajouté un deuxième script avec un test pour le browser.


 $("#choix").bind(($.browser.msie ? "click" : "change"), function () {

....

}


A bientôt
Il me semble pourtant que jQuery permet de s'abstraire des différences d'implémentation de l'évènement onchange sur les SELECT. Ça serait pas mal d'aller au fond du problème, et pourquoi pas de commencer à apprendre à débuguer un script JS parce que pour l'instant ça n'a pas l'air très maitrisé...
Sujet clos
Aller à