Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Code JS fonctionnel sous FireFox mais pas sous IE

Code JS fonctionnel sous FireFox mais pas sous IE

8 réponses
Avatar
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
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
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
Avatar
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;

--
sm
Avatar
Laurent vilday
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
Avatar
Laurent vilday
Laurent vilday :
ou plutôt avec Tbodies[0] :)



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

stupides, stupides doigts ...

--
laurent
Avatar
cornichon
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
Avatar
SAM
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 :
<http://www.howtocreate.co.uk/tutorials/javascript/domtables>
où ils utilisent le bon tboDiEs||Tbodies||TBodies||tBodies||tbodies


--
sm
Avatar
SAM
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à ;-)
Avatar
SAM
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