InnerHTML / ie8 [Résolu]

Signaler
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
-
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
-
Bonsoir,

J'ai un problème avec innerHTML sous ie8, dans mes recherches j'ai pu lire que le problème se posait lors d'injection d'une table, or moi je n'ai pas de table :

// Creer un element et y insere un message d'erreur
function make_error(err, divName) {
// make_element -> creer un div -> OK
make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName);
// pour injecter le message dans le div crée avec ie8 -> pas ok,
//if(getId('err'+divName).innerHTML) {
getId('err'+divName).innerHTML = err;
//} else {
//getId('err'+divName).innerText = err;
//}
}


Comme vous pouvez voir, j'ai essayé de faire un sorte de test qui visiblement ne fonctionne pas :

avec ie8 innerText fonctionne, mais ca ne fonctionne plus sous FF
et inversement innerHTML fonctionne avec FF mais plus sous ie8 :s

avez-vous une solution (dans l'idée du test), hormis celle d'une fonction de test de navigateur ?

Merci bien !

20 réponses

Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
[*] avec ie8 innerText fonctionne, mais ca ne fonctionne plus sous FF

innerText n'existe pas dans Firefox, tu dois plutôt utiliser textContent.
element=document.createElement("div");
if(element.innerText){
element.innerText="Hello World";
}
else if(element.textContent){
element.textContent="Hello World";
}
else{
element.style.content="Hello World";
}


Bonne soirée et bonnes vacances, je pars 2 semaines



JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

tu es surement dans le cas ou IE n'a pas encore finalisé l'ajout de l'élément dans l'arbre DOM.
Il faut croire oui même si çà reste extrêmement curieux, l'élément est correctement crée et existe.

Pourquoi ne pas récupérer l'objet en retour de la fonction make_element directement et de lui affecter son innerHTML.
Oui j'ai envisagé cette possibilité mais la fonction étant déjà pas mal utilisé par ailleurs ça m'ennuyais d'avoir à modifier tous les appels.
Je vais essayer en rajoutant un paramètre à la fonction pour le code html

Après modifs :
make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName, err);



// Creer un element
function make_element(eType, eId, eStyle, eParent, eContent) {
if(!getId(eId)) {
var elem = document.createElement(eType);
elem.setAttribute('id', eId);
elem.setAttribute('style', eStyle);
if(eContent) {
elem.innerHTML = eContent;
}
getId(eParent).appendChild(elem);
}
}


Génial ! çà fonctionne !
Vraiment un grand merci pour ton aide précieuse !

Si je peut profiter un peu :) :
L'idée c'est un formulaire qui valide les champs de saisie au fur et à mesure avec un onblur="verif(this, this.form)" pour chaque champs.
Mes connaissances sont limités dans ce domaine : y aurait il un autre moyen d'executer l'action sur chaque champs sans avoir a mettre mon appel dans chaque input ?
Esperant avoir été clair ^^
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
innerHTML doit exister sous IE8, je ne le possède pas mais j'en reste persuadé...

C'est la façon de l'appeler après ta fonction de création qui ne plait pas à IE
var O_Div = document.createElement('DIV');
document.body.appendChild( O_Div);
O_Div.innerHTML = "XXXXXXXXXXX";
doit marcher...

;O)
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

super merci à vous deux, je ne connaissais pas textContent, je vais tester çà de ce pas.

et bonnes vacances veinard ;)
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

if(getId('err'+divName).innerText) {
getId('err'+divName).innerText = err;
}
else if(getId('err'+divName).textContent) {
getId('err'+divName).textContent = err;
}
else {
getId('err'+divName).innerHTML = err;
}


Avec ie8 ou FF on passe dans la dernière condition, les 2 premières ne sont pas utilisés et l'erreur est la même

Petrole team > c'est vraiment bizarre, mon code est très simple et pourtant avec ie8 j'ai ce message : "erreur d'execution inconnue" lorsque je tente d'utiliser innerHTML sur ce code. Mais, j'ai un autre site avec des appels ajax et là le code est correctement recraché (via un innerHTML) et il fonctionne très bien sous ie8...
bizarre vous avez dit bizarre ?
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

vous l'aurez compris de vous même : getId(monId) = document.getElementById(monId)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
en fait je n'avais lu que le titre...
Lorsque tu fais un test comme le tien
if( getId('err'+divName).innerHTML)
en fait tu testes que la valeur existe et non que la caractèristique existe.
Comme tu viens de créer la DIV, son innerHTML est vide d'ou une réaction normale.

Pour vérifier que la caractèristique existe il te faut faire
if( getId('err'+divName).innerHTML != "undefined")

la première méthode de test est souvent utilisée de façon incorrecte

Mais pourquoi faire ce test ?
;O)
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

oui en effet c'est assez logique... ;)
le test permet de savoir si le navigateur supporte innerHTML ou innerTEXT
parce que je t'assures que dans mon cas ie8 ne veut pas entendre parler de innerHTML
Je toast ta methode
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

function make_error(err, divName) {
make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName);
if(getId('err'+divName).innerHTML != "undefined") {
getId('err'+divName).innerHTML = err;
}
else {
getId('err'+divName).innerText = err;
}
}


ie8 passe dans la première condition et me dit : Erreur d'exécution inconnue pour getId('err'+divName).innerHTML = err;
FF est content (comme toujours :p)
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

var O_Div = document.createElement('DIV');
document.body.appendChild( O_Div);
O_Div.innerHTML = "XXXXXXXXXXX";


Nouvel indice, ce code fonctionne avec ie8 et FF, le problème ne vient donc pas de là.

Mais :
function make_error(err, divName) {
make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName);
if(getId('err'+divName)) {
getId('err'+divName).innerHTML = err;
}
}


Pourquoi j'ai une erreur avec ce code sous ie8 uniquement alors que le test d'existence du div est bien validé ?
le test est validé
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

Dernière info pouvant aider : code permettant la création du div

// Creer un element
function make_element(eType, eId, eStyle, eParent) {
if(!getId(eName)) {
var elem = document.createElement(eType);
elem.setAttribute('id', eId);
elem.setAttribute('style', eStyle);
getId(eParent).appendChild(elem);
}
}
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
tu es surement dans le cas ou IE n'a pas encore finalisé l'ajout de l'élément dans l'arbre DOM.

Pourquoi ne pas récupérer l'objet en retour de la fonction make_element directement et de lui affecter son innerHTML.

Pourquoi ne pas directement initialiser le innerHTML dans la fonction ?

Sinon passe par par la méthode createTextNode, mais je pense qu'un
var O_Div = make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName);
O_Div.innerHTML = err;
doit fonctionner...

;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
les messages se sont croisés
c'est quoi le eName dans la fonction ?
// Creer un element
function make_element(eType, eId, eStyle, eParent) {
  if(!getId(eType)){
    var elem = document.createElement(eType);
    elem.setAttribute('id', eId);
    elem.setAttribute('style', eStyle);
    getId(eParent).appendChild(elem);
    return( elem); // retourne l'objet cree
  }
}

avec la possibilité donc de passer le texte par défaut
// Creer un element
function make_element(eType, eId, eStyle, eParent, txt_) {
  if(!getId(eType)){
    var elem = document.createElement(eType);
    elem.setAttribute('id', eId);
    elem.setAttribute('style', eStyle);
    getId(eParent).appendChild(elem);
    if( txt_)
      elem.innerHTML = txt_; // ajout du texte
    return( elem);           // retourne l'objet cree
  }
}

;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
pardon c'est plutôt
if(!getId(eId)){

;O)
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

lol on a fait la meme chose :)
oui j'ai modifié eName en eId pour plus de clarté en te montrant le code, j'avais oublié de modifié celui que tu as trouvé
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
...Il faut croire oui même si çà reste extrêmement curieux, l'élément est correctement crée et existe...
crée mais pas entièrement finalisé, il est même des cas ou il faut utiliser un setTimeout avec IE

...y aurait il un autre moyen d'executer l'action sur chaque champs sans avoir a mettre mon appel dans chaque input ...
préférable d'ouvrir un nouveau topic pour plus de clarté...
;O)
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Bonjour ;)

Cette fonction :
// Creer un element
function make_element(eType, eId, eStyle, eParent, eContent) {
if(!getId(eId)) {
var elem = document.createElement(eType);
elem.setAttribute('id', eId);
elem.setAttribute('style', eStyle);
if(eContent) {
elem.innerHTML = eContent;
}
getId(eParent).appendChild(elem);
}
}


est plutôt à remplacer par
// Creer un element
function make_element(eType, eId, eStyle, eParent, eContent) {
if(!getId(eId)) {
var elem = document.createElement(eType);
elem.setAttribute('id', eId);
elem.textCSS=eStyle;
if(eContent) {
elem.innerHTML = eContent;
}
getId(eParent).appendChild(elem);
}
}


Cela s'utilise de la même façon et cela donne la même chose à une exception près : C'est compatible avec IE6 ;) (Je sens que je vais recevoir des mails sur la place d'IE6 sur Internet :P )



JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011

Merci du tuyau, plus la liste de navigateur supporté est large mieux c'est !
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Tout à fait ;)


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com