innerHTML / ie8Résolu

Question

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 !

jdmcreator · Accepted Answer

[*] 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

PetoleTeam · Answer

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)

cs_moumouf · Answer

super merci à vous deux, je ne connaissais pas textContent, je vais tester çà de ce pas.

et bonnes vacances veinard ;)

cs_moumouf · Answer

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 ?

cs_moumouf · Answer

vous l'aurez compris de vous même : getId(monId) = document.getElementById(monId)

PetoleTeam · Answer

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)

cs_moumouf · Answer

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

cs_moumouf · Answer

cs_moumouf · Answer

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é

cs_moumouf · Answer

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);
}
}

PetoleTeam · Answer

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)

PetoleTeam · Answer

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)

PetoleTeam · Answer

pardon c'est plutôt
if(!getId(eId)){
;O)

cs_moumouf · Answer

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 ^^

cs_moumouf · Answer

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é

PetoleTeam · Answer

...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)

cs_moumouf · Answer

Sujet dispo ici :)

http://www.javascriptfr.com/forum/sujet-UTILISER-ONBLUR-SANS-APPEL_1456207.aspx

jdmcreator · Answer

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

cs_moumouf · Answer

Merci du tuyau, plus la liste de navigateur supporté est large mieux c'est !

jdmcreator · Answer

Tout à fait ;)


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com

InnerHTML / ie8

20 réponses

Votre réponse

Discussions similaires