Code JS fonctionnel sous FireFox mais pas sous IE

Le
cornichon
Bonjour,

La table HTML suivante regroupe des informations sur les contacts d'une entreprise ( Nom, prénom, email, etc )
des inputs permettent de rentrer des données et de les ajouter à cette table en cliquant sur le bouton AJOUTER(original isnt'it ?). Petit hic, sous firefox(3.0.15) tout se passe bien, alors qu'avec IE(6.0.2800), la ligne ne s'ajoute pas à ma table, et la barre de statut en bas à gauche affiche erreur sur la page.

<table id="table_cont" name="table_cont">
<tr>
<td>&nbsp;</td>
<td>NOM</td><td>Prénom</td><td>Civilité</td><td>EMAIL</td>
<td>fonction 1</td><td>fonction 2</td><td>Téléphone</td><td>Fax</td><td>Mobile</td><td>statut</td>
</tr>
</table>

Voici le vode JS de la fonction Ajouter()
function Ajouter() {
var form=document.getElementById('grille_cont');
var nom=form.nom.value;
var prenom=form.prenom.value;
var civ=form.civ.value;
var email=form.email.value;
var f1=form.f1.value;
var f2=form.f2.value;
var tel=form.tel.value;
var fax=form.fax.value;
var mob=form.mob.value;
if(nom=="" || email=="")
{alert('indiquer le nom du contact ainsi que son email')
}
else{
var l=form.liste_cont.options.length;
var oldHTML= document.getElementById('table_cont').innerHTML;
var catHTML='<tr name="lc" id="'+l+'"><td onClick="supp('+l+');">xxx</td><td>'+nom+'</td><td>'+prenom+'</td><td>'+civ+'</td><td>'+email+'</td><td>'+f1+'</td><td>'+f2+'</td><td>'+tel+'</td><td>'+fax+'</td><td>'+mob+'</td><td id="st'+l+'">ajout</td></tr>';
var newHTML = oldHTML + catHTML;
document.getElementById('table_cont').innerHTML=newHTML;
var o=new Option(l,l);
form.liste_cont.options[l]=o;

}
form.nom.value="";form.prenom.value="";form.civ.value="";form.email.value="";form.f1.value="";form.f2.value="";form.tel.value="";form.fax.value="";form.mob.value="";

}<FORM name="grille_cont" id="grille_cont" action="c_cont.php" method="post">
Nom :<INPUT type="text" name="nom" size="15" />
Prénom :<INPUT type="text" name="prenom" size="15" />
Civilité :<SELECT name="civ" size="1">
<option selected="selected" value="">civilité du contact</option>
<option value="Me">Me</option>
<option value="Melle">Melle</option>
<option value="Mr">Mr</option>
</SELECT>
Email :<INPUT type="text" name="email" size="15" />
Fonction 1:<select name="f1">
<option value="" selected="selected"></option>
<option value="président">Président</option>
<option value="directeur">Directeur</option>
</select>
Fonction 2:<select name="f2">
<option value="" selected="selected"></option>
<option value="commercial">commercial</option>
<option value="technique">technique</option>
</select>
Téléphone :<input name="tel" type="text" size="15"/>
Fax :<input name="fax" type="text" size="15"/>
Mobile :<input name="mob" type="text" size="10" />


<!--
NE PAS SUPPRIMER
ce select est en visibilité caché(hidden) car il est utile au code javascript mais pas à l'affichage
-->
<SELECT id="liste_cont" style="visibility:hidden" name="liste_cont" size="3"></SELECT>
<!-- fin du select en visibilité cachée -->
<INPUT type="button" value="Ajouter ce contact" onclick="Ajouter();"/>
</FORM>

Une idée du pourquoi de la chose ?
Merci de m'avoir lu et bonne journée à tous
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #20772171
Le 12/15/09 8:59 AM, cornichon a écrit :
Bonjour,

La table HTML suivante regroupe des informations sur les contacts d'une
entreprise ( Nom, prénom, email, etc ... )
des inputs permettent de rentrer des données et de les ajouter à cette table en
cliquant sur le bouton AJOUTER(original isnt'it ?). Petit hic, sous
firefox(3.0.15) tout se passe bien, alors qu'avec IE(6.0.2800), la ligne ne
s'ajoute pas à ma table, et la barre de statut en bas à gauche affiche erreur
sur la page.



Je suis même surpris que ça fonctionne avec Fx (sans alertes de la
console d'erreurs).

<table id="table_cont" name="table_cont">
<tr>
<td>&nbsp;</td>
<td>NOM</td><td>Prénom</td><td>Civilité</td><td>EMAIL</td>
<td>fonction 1</td><td>fonction
2</td><td>Téléphone</td><td>Fax</td><td>Mobile</td><td>statut</td>
</tr>
</table>

Voici le vode JS de la fonction Ajouter()
function Ajouter() {
var form=document.getElementById('grille_cont');



var form = document.forms['grille_cont'];

var nom=form.nom.value;
var prenom=form.prenom.value;
var civ=form.civ.value;
var email=form.email.value;
var f1=form.f1.value;
var f2=form.f2.value;
var tel=form.tel.value;
var fax=form.fax.value;
var mob=form.mob.value;
if(nom=="" || email=="")
{alert('indiquer le nom du contact ainsi que son email')
}
else{
var l=form.liste_cont.options.length;
var oldHTML= document.getElementById('table_cont').innerHTML;
var catHTML='<tr name="lc" id="'+l+'"><td
onClick="supp('+l+');">xxx</td><td>'+nom+'</td><td>'+prenom+'</td><td>'+civ+'</td><td>'+email+'</td><td>'+f1+'</td><td>'+f2+'</td><td>'+tel+'</td><td>'+fax+'</td><td>'+mob+'</td><td
id="st'+l+'">ajout</td></tr>';
var newHTML = oldHTML + catHTML;
document.getElementById('table_cont').innerHTML=newHTML;



essayer :
document.getElementById('table_cont').tbody.innerHTML=newHTML;
ou :
document.getElementById('table_cont').getElementsByTagName('TBODY')[0].innerHTML=newHTML;

--
sm
SAM
Le #20772501
Le 12/15/09 10:19 AM, SAM a écrit :
Le 12/15/09 8:59 AM, cornichon a écrit :



document.getElementById('table_cont').innerHTML=newHTML;



essayer :
document.getElementById('table_cont').tbody.innerHTML=newHTML;



ou:
document.getElementById('table_cont').tbodies[0].innerHTML=newHTML;

--
sm
Laurent vilday
Le #20772641
SAM :
Le 12/15/09 10:19 AM, SAM a écrit :
Le 12/15/09 8:59 AM, cornichon a écrit :



document.getElementById('table_cont').innerHTML=newHTML;



essayer :
document.getElementById('table_cont').tbody.innerHTML=newHTML;



ou:
document.getElementById('table_cont').tbodies[0].innerHTML=newHTML;



ou plutôt avec Tbodies[0] :)

Ceci dit, innerHTML et les tableaux ça n'a jamais fait très bon ménage.

--
laurent
Laurent vilday
Le #20772631
Laurent vilday :
ou plutôt avec Tbodies[0] :)



Pfff en vrai le mieux c'est quand même tBodies[0] :)

stupides, stupides doigts ...

--
laurent
cornichon
Le #20772661
cornichon a écrit le 15/12/2009 à 08h59 :
Bonjour,

La table HTML suivante regroupe des informations sur les contacts d'une
entreprise ( Nom, prénom, email, etc ... )
des inputs permettent de rentrer des données et de les ajouter à
cette table en cliquant sur le bouton AJOUTER(original isnt'it ?). Petit hic,
sous firefox(3.0.15) tout se passe bien, alors qu'avec IE(6.0.2800), la ligne
ne s'ajoute pas à ma table, et la barre de statut en bas à gauche
affiche erreur sur la page.

<table id="table_cont" name="table_cont">
<tr>
<td>&nbsp;</td>
<td>NOM</td><td>Prénom</td><td>Civilité</td><td>EMAIL</td>
<td>fonction 1</td><td>fonction
2</td><td>Téléphone</td><td>Fax</td><td>Mobile</td><td>statut</td>
</tr>
</table>

Voici le vode JS de la fonction Ajouter()
function Ajouter() {
var form=document.getElementById('grille_cont');
var nom=form.nom.value;
var prenom=form.prenom.value;
var civ=form.civ.value;
var email=form.email.value;
var f1=form.f1.value;
var f2=form.f2.value;
var tel=form.tel.value;
var fax=form.fax.value;
var mob=form.mob.value;
if(nom=="" || email=="")
{alert('indiquer le nom du contact ainsi que son email')
}
else{
var l=form.liste_cont.options.length;
var oldHTML= document.getElementById('table_cont').innerHTML;
var catHTML='<tr name="lc" id="'+l+'"><td
onClick="supp('+l+');">xxx</td><td>'+nom+'</td><td>'+prenom+'</td><td>'+civ+'</td><td>'+email+'</td><td>'+f1+'</td><td>'+f2+'</td><td>'+tel+'</td><td>'+fax+'</td><td>'+mob+'</td><td
id="st'+l+'">ajout</td></tr>';
var newHTML = oldHTML + catHTML;
document.getElementById('table_cont').innerHTML=newHTML;
var o=new Option(l,l);
form.liste_cont.options[l]=o;

}
form.nom.value="";form.prenom.value="";form.civ.value="";form.email.value="";form.f1.value="";form.f2.value="";form.tel.value="";form.fax.value="";form.mob.value="";

}<FORM name="grille_cont" id="grille_cont"
action="c_cont.php" method="post">
Nom :<INPUT type="text" name="nom" size="15"
/>
Prénom :<INPUT type="text" name="prenom"
size="15" />
Civilité :<SELECT name="civ" size="1">
<option selected="selected"
value="">civilité du contact</option>
<option value="Me">Me</option>
<option value="Melle">Melle</option>
<option value="Mr">Mr</option>
</SELECT>
Email :<INPUT type="text" name="email"
size="15" />
Fonction 1:<select name="f1">
<option value=""
selected="selected"></option>
<option
value="président">Président</option>
<option value="directeur">Directeur</option>
</select>
Fonction 2:<select name="f2">
<option value=""
selected="selected"></option>
<option value="commercial">commercial</option>
<option value="technique">technique</option>
</select>
Téléphone :<input name="tel" type="text"
size="15"/>
Fax :<input name="fax" type="text"
size="15"/>
Mobile :<input name="mob" type="text"
size="10" />


<!--
NE PAS SUPPRIMER
ce select est en visibilité caché(hidden) car il est utile au
code javascript mais pas à l'affichage
-->
<SELECT id="liste_cont" style="visibility:hidden"
name="liste_cont" size="3"></SELECT>
<!-- fin du select en visibilité cachée -->
<INPUT type="button" value="Ajouter ce contact"
onclick="Ajouter();"/>
</FORM>

Une idée du pourquoi de la chose ?
Merci de m'avoir lu et bonne journée à tous


merci à tous pour votre aide, je vais tester vos solutions
changer .innerHTML en .tbody.innerHTML n'a pas résolu mon problème.
Par contre, j'avance : ayant double-cliqué sur le symbole "erreur sur la page"
en bas à gacuhe dans la barre de statut, la ligne qui pose problème se révèle être
28: var o=new Option(l,l);

Le message d'erreur d'IE est le suivant :
Ligne : 28
Car : 3
Erreur: Erreur d'éxécution inconnue
Code : 0
SAM
Le #20773101
Le 12/15/09 11:28 AM, Laurent vilday a écrit :
SAM :
Le 12/15/09 10:19 AM, SAM a écrit :
Le 12/15/09 8:59 AM, cornichon a écrit :



document.getElementById('table_cont').innerHTML=newHTML;



essayer :
document.getElementById('table_cont').tbody.innerHTML=newHTML;



ou:
document.getElementById('table_cont').tbodies[0].innerHTML=newHTML;



ou plutôt avec Tbodies[0] :)



Ha? bon, peut-être ? ;-) (enfin ... un truc dans l'genre, quoi)

M'enfin avec
GetElementByTagName('TBODY')[0]
on est certain d'assurer.

Ceci dit, innerHTML et les tableaux ça n'a jamais fait très bon ménage.



heu ... je n'en suis pas si sûr
même s'il parait plus élégant de jongler avec les rows et cells
comme ici par exemple :
où ils utilisent le bon tboDiEs||Tbodies||TBodies||tBodies||tbodies


--
sm
SAM
Le #20773091
Le 12/15/09 11:30 AM, Laurent vilday a écrit :
Laurent vilday :
ou plutôt avec Tbodies[0] :)



Pfff en vrai le mieux c'est quand même tBodies[0] :)

stupides, stupides doigts ...




je disais bien ... qque chose dans cette idée là ;-)
SAM
Le #20773211
Le 12/15/09 11:50 AM, cornichon a écrit :
merci à tous pour votre aide, je vais tester vos solutions
changer .innerHTML en .tbody.innerHTML n'a pas résolu mon problème.



non mais

document.getElementById('table_cont').getElementsByTagName('TBODY')[0].innerHTML=newHTML;

aurait dû.

Par contre, j'avance : ayant double-cliqué sur le symbole "erreur sur la page"
en bas à gacuhe dans la barre de statut, la ligne qui pose problème se révèle
être
28: var o=new Option(l,l);

Le message d'erreur d'IE est le suivant :



Les erreurs rapportées par IE sont souvent du pipeau !

Autant l'erreur était avant
( document.getElementById('table_cont').innerHTML=newHTML; )
c'est même certain :
IE ne voulant rien ajouter dans un table mais seulement dans le(s)
tbody(s) du table (ou le tfoot ou le thead)

Car là, comme ça pris en dehors de tout contexte, je ne vois rien
d'incorrect à
var o=new Option(l,l);

Ligne : 28
Car : 3
Erreur: Erreur d'éxécution inconnue
Code : 0


Publicité
Poster une réponse
Anonyme