javascript et IE

Discussion dans 'Web, design' créé par Calvin80, 23 Janvier 2005.

Statut de la discussion:
Fermée.
  1. Offline
    Calvin80 Elite
    Hello all

    voilà g ecrit une fonction javascript qui fonctionne nickel avec un vrai browser (firefox) mais qui foire avec internet explorer.
    voici le script:

    Code:
    	function VerifNbChecked(formulaire, val)
    	{
    		var nb=0;
    		var diff=0;
    		for (var i = 0; i < formulaire.elements.length; i++)
    		{
    			if(formulaire.elements[i].checked)
    				 nb++;
    		}
    		if(nb<val){
    			
    			diff=val-nb;
    			alert('Error: you did not choose enough functions\n Number of still function(s) to choose : '+diff);
    		}
    		else
    			formulaire.submit();
    	}
    
    et voic mon formulaire
    Code:
    	<FORM name="functions" action="index.php?p=vchoosefunctions" method="POST" enctype="multipart/form-data">
     <table width="99%">
    		<tr><td colspan="3" align="center" class="title"> Proposed functions</td></tr>
    		<tr>
    
    			<td> <input type="checkbox" name="selectedcategories[]" value="1" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category1 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="2" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category2 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="3" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category3 </td>
    		</tr>
    		<tr>
    			<td> <input type="checkbox" name="selectedcategories[]" value="4" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category4 </td>
    
    			<td> <input type="checkbox" name="selectedcategories[]" value="5" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category5 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="6" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category6 </td>
    		</tr>
    	<tr>
    
    			<td colspan="3" align="left"><h5>Nb of functions still to choose :<input type="text" name="remaining" style="width:30px; border:0px;"></h5></td>
    		</tr>
    		<tr>
    			<td colspan="3" align="right"><input type="button" value="Validate Functions" onClick="VerifNbChecked(document.functions, '5')"></td>
    		</tr>
    			</table>
    	</FORM>
    
    si qq'un sait me dire pkoi ça foire sous IE ....
    merci![/code]
    Calvin80, 23 Janvier 2005
    #1
  2. Offline
    null ose();
    Salut,

    La pluspart du temps, il donne la ligne de l'erreur ou une description, tu pourrais la coller.

    Cependant, je dis que c'est ça :

    null, 23 Janvier 2005
    #2
  3. Offline
    Calvin80 Elite
    nop nop..
    il ne plante pas, il fait juste n'importe quoi, notamment, je click sur une checkob, il se passe rien, je clique sur une deuxieme, il fonctionne mais ne me sort pas les bon chiffres...


    pff vivement que les surfeurs iternet passent tous sous Firefox ! (et meme pkoi pas sous linux hein ;)
    Calvin80, 24 Janvier 2005
    #3
  4. Offline
    La Poubelle Elite
    "La plupart du temps, le bug se trouve entre la chaise et le clavier"

    J'avais entendu dire que Firefox était plus rigoureux qu'IE, mais quand je vois ton code j'ai des doutes.
    Etant donné que tu ne savez pas te remettre en cause, je te laisserais mariner.
    Pour que cela fonctionne avec un "vrai Browser", il faudrait un "vrai programmeur"

    Rmq: Avec netscape, le résulat est encore plus catastrophique.

    Firefox et Linux sont bien, par contre bon nombre d'utulisateurs Linux ne savent pas le configurer correctement et se prennent pour des kings ... WAAoouh quel "balèze", c'est un Linuxien :D :D :D
    La Poubelle, 24 Janvier 2005
    #4
  5. Offline
    Calvin80 Elite
    ouep , c'est vrai que je me suis emballé Again, mais ce n'est pas la premiere fois que je m'enerve avec IE, notamment la compatibilité des feuilles CSS (valid&es par W3C) entre IE et firefox


    je vais regarder mon code de + pres ce p.m.
    Calvin80, 24 Janvier 2005
    #5
  6. Offline
    Calvin80 Elite
    bon..Again je crois que je vois de quoi tu veux parler..
    je me suis précipiter en copiant collant mon code ici..
    pour eviter de faire un message trop long, j'ai (trop) coupé.

    je mets donc ma page total, pour eviter les confusions et les jugements trop hatifs.

    Code:
      
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    	<title>mon title</title>
    	<link rel="stylesheet" type="text/css" href="./style/general.css">
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script type="text/javascript">
    	function VerifNbChecked(formulaire, val)
    	{
    		var nb=0;
    		var diff=0;
    		for (var i = 0; i < formulaire.elements.length; i++)
    		{
    			if(formulaire.elements[i].checked)
    				 nb++;
    		}
    		if(nb<val){
    			
    			diff=val-nb;
    			alert('Error: you did not choose enough functions\n Number of still function(s) to choose : '+diff);
    		}
    		else
    			formulaire.submit();
    	}
    	function DisplayNbChecked(formulaire, source, cible,maxval)
    	{
    		alert("dsdsdsd");
    		var nbchecked=0;
    		for (var i = 0; i < formulaire.elements.length; i++)
    		{
    			if(formulaire.elements[i].checked)
    				 nbchecked++;
    		}
    		if(nbchecked >maxval){
    			alert("You chose too many functions !!");
    			source.checked=false;
    			source.value="";
    		}
    		else {
    			cible.value=maxval-nbchecked;
    		}
    	}
    	</script>
    </head>
    <body>
    	<div class="pagetitle">atchoum</div>
    	<div class="page">
    	Please choose, in the proposed list, <b>5 functions</b> that describe your job in your company :<br><br>
    	<FORM name="functions" action="index.php?p=vchoosefunctions" method="POST" enctype="multipart/form-data">
     
    	<table width="99%">
    		<tr><td colspan="3" align="center" class="title"> Proposed functions</td></tr>
    		<tr>
    			<td> <input type="checkbox" name="selectedcategories[]" value="1" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category1 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="2" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category2 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="3" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category3 </td>
    		</tr>
    		<tr>
    			<td> <input type="checkbox" name="selectedcategories[]" value="4" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category4 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="5" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category5 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="6" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category6 </td>
    		</tr>
    		<tr>
    			<td> <input type="checkbox" name="selectedcategories[]" value="7" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category7 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="8" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category8 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="9" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category9 </td>
    		</tr>
    		<tr>
    			<td> <input type="checkbox" name="selectedcategories[]" value="10" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category10 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="11" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category11 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="12" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category12 </td>
    		</tr>
    		<tr>
    			<td> <input type="checkbox" name="selectedcategories[]" value="13" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category13 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="14" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category14 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="15" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category15 </td>
    		</tr>
    		<tr>
    			<td> <input type="checkbox" name="selectedcategories[]" value="16" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category16 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="17" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category17 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="18" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category18 </td>
    		</tr>
    		<tr>
    			<td> <input type="checkbox" name="selectedcategories[]" value="19" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category19 </td>
    			<td> <input type="checkbox" name="selectedcategories[]" value="20" onchange="DisplayNbChecked(document.functions, this, document.functions.remaining, '5')">category20 </td>
    			<td></td></tr>
    		<tr>
    			<td colspan="3" align="right"></td>
    		</tr>
    		<tr>
    			<td colspan="3" align="left"><h5>Nb of functions still to choose :<input type="text" name="remaining" style="width:30px; border:0px;"></h5></td>
    		</tr>
    		<tr>
    			<td colspan="3" align="right"><input type="button" value="Validate Functions" onClick="VerifNbChecked(document.functions, '5')"></td>
    		</tr>
    			</table>
    	</FORM>
    	<FORM name="newfunction" action="index.php?p=newfunction" method="POST" enctype="multipart/form-data">
    	<table width="99%">
    		<tr><td colspan="3" align="center" class="title">Add your own function</td></tr>
    		<tr>
    			<TD align="left" style="width:150px;">Function name:</TD>
    			<TD align="left"><input type="text" name="newcategory" maxlength="20"></TD>
    			<TD align="right"><input type="submit" name="addfunction" value="Add Function"></TD>
    		</tr>
    	</table>
    	</FORM>
    	</div>
    </body>
    </html>
    
    Calvin80, 24 Janvier 2005
    #6
  7. Offline
    La Poubelle Elite
    avant de faire un test des checkbox

    verifie que c'est bien une checkbox


    Je ne sais pas faire de test pour l'instant je regarderai ce soir
    La Poubelle, 24 Janvier 2005
    #7
  8. Offline
    Calvin80 Elite
    Le probleme semble résolu.
    la subitilité etait pas si triviale qu'il n'y parait:
    la proprieté "onChange" d'un element <input> reagit en terme de focus.
    Le test est donc réalisé quand l'element perd le focus.
    Donc si on clique une fois -> rien ne se passe (sous IE).
    il faut cliquer une fois ailleurs pour rentrer dans le javascript.
    La solution est d'utiliser la propriété "onClick".

    Donc voila.
    deux petites remarques:
    rq1 - je tiens à m'excuser si j'ai pu "choquer" qques utilisateurs IE, mais le nombre d'exemples que j'ai rencontré où ce brower ne réagit pas de façon naturelle est vraiment hallucinant.
    rq2 - je valide dans 99% des cas mon code par le w3c validator. Je developpe parfois pour le web mais surtout pour des softs depuis 5 ans. Je ne me trouve pas "expert" ni "baleze" ni "king" mais pour ce qui est de la prog et de linux, on va dire que je m'en sors. Peut être que j'aurais du écrire dans un forum sueper spécialisé pour qu'on me réponde "et man, fais gaffe, t'as pas copié la bonne fonction javascript", plutot que "va apprendre à programmer..."
    Calvin80, 24 Janvier 2005
    #8
  9. Offline
    La Poubelle Elite
    Disons qu'il est impératif de se remettre en cause avant d'accuser IE.

    Les interfaces Web travaillent toutes de façons différentes dans certaines subtilités.

    Par exemple, netscape casse les pieds pour "écrire" dans certaines propriétés seulement si on passe par un objet temporaire. Alors que dans les régles w3c, l'objet est en lecture/écriture.

    Il déconne aussi pour modifier (ajouter) dynamiquement le contenu d'une Listbox/combobox ... alors que dans les régles w3c, c'est prévu.
    La Poubelle, 24 Janvier 2005
    #9
Statut de la discussion:
Fermée.