Je précise que ces deux problèmes js, je les ai contournés, mais bon,
j'aimerais comprendre.
1ier pb :
J'ai un "constructeur" GrowlNotification(...) qui insère du html dans la
page, en simplifiant :
document.body.innerHTML+='<div id="growlnotifications" style="right:
-312px;bottom:20px;">blahblahblah</div>';
je nomme cet élément :
this.growlnotifications=document.getElementById('growlnotifications');
ensuite j'ai voulu ajouter une méthode #setText(text); par :
this.setText=function(text){
this.growlnotifications.innerHTML=text;
}
ça n'a jamais marché, j'avais toujours "blahblahblah" comme texte.
j'ai contourné par :
this.setText=function(text){
document.getElementById('growlnotifications').innerHTML=text;
}
je ne vois pas pourquoi la 1ière solution n'a pas marché...
2ième problème :
j'ai voulu attaché un event listener à cette div :
document.getElementById('growlnotifications').addEventListener('click',
function(){alert('event');});
les clicks sur l'élément non jamais rien déclenché.
mais ça a marché avec setAttribute :
document.getElementById('growlnotifications')setAttribute('onclick',
"javascript:org_ytho_growlnotifications_hide(this)");
en ajoutant la fonction dans le constructeur par :
window["org_ytho_growlnotifications_hide"]=function(o){o.parentNode.style.right="-312px";return
false;}
Pour les deux problèmes, ça ne vient pas du code fourni.
Un exemple minimal fonctionne parfaitement (firefox et chromium) :
bon.
j'ai changé mon code en utilisant le dom plutôt que innerHTML. c'est nettement plus verbeux : 59 lignes avec innerHTML 91 avec dom
...
du coup je ne comprends pas pourquoi ça n'avait pas marché, d'autant que j'ai un autre constructeur ModalDialogBox qui marche par innerHTML...
peut-être une coquille quelque part ?
(je suis assez étourdi)
je regarderai ton test et revérifierai mon code original avec innerHTML.
Dernièrement j'ai eu une surprise, avec Safari, je construisais un <select> avec une dizaine d'options comme ça :
machin.innerHTML+='<select ...>'; (seulement la balise d'ouverture) for(...){ machin.innerHTML+='<option n>valeur n</option>'; } machin.innerHTML+='</select>'; (seulement la balise de fermeture)
eh ben dans l'inspecteur j'avais : <select ...></select> (avec fermeture) les options...
si bien que le truc ne marchait pas, j'ai changé le code bien sûr. là le parseur était TROP rapide )))
Y.D.
Le 21/10/2013 08:49, Une Bévue a écrit :
Dernièrement j'ai eu une surprise, avec Safari, je construisais un <select> avec une dizaine d'options comme ça :
machin.innerHTML+='<select ...>'; (seulement la balise d'ouverture) [...]
si bien que le truc ne marchait pas, j'ai changé le code bien sûr. là le parseur était TROP rapide )))
Non il faisait ce qu'il doit faire, parser le document après chaque insertion. Pour insérer un select et toutes ses options d'un coup il faut construire une chaîne contenant l'ensemble et faire un seul innerHTML à la fin.
Une autre possibilité aurait été d'insérer le 'select' avec innerHTML puis d'insérer dans cet élément les 'option' :
Dernièrement j'ai eu une surprise, avec Safari, je construisais un <select> avec
une dizaine d'options comme ça :
machin.innerHTML+='<select ...>'; (seulement la balise d'ouverture) [...]
si bien que le truc ne marchait pas, j'ai changé le code bien sûr.
là le parseur était TROP rapide )))
Non il faisait ce qu'il doit faire, parser le document après chaque insertion.
Pour insérer un select et toutes ses options d'un coup il faut construire une
chaîne contenant l'ensemble et faire un seul innerHTML à la fin.
Une autre possibilité aurait été d'insérer le 'select' avec innerHTML puis
d'insérer dans cet élément les 'option' :
Dernièrement j'ai eu une surprise, avec Safari, je construisais un <select> avec une dizaine d'options comme ça :
machin.innerHTML+='<select ...>'; (seulement la balise d'ouverture) [...]
si bien que le truc ne marchait pas, j'ai changé le code bien sûr. là le parseur était TROP rapide )))
Non il faisait ce qu'il doit faire, parser le document après chaque insertion. Pour insérer un select et toutes ses options d'un coup il faut construire une chaîne contenant l'ensemble et faire un seul innerHTML à la fin.
Une autre possibilité aurait été d'insérer le 'select' avec innerHTML puis d'insérer dans cet élément les 'option' :
Non il faisait ce qu'il doit faire, parser le document après chaque insertion. Pour insérer un select et toutes ses options d'un coup il faut construire une chaîne contenant l'ensemble et faire un seul innerHTML à la fin.
oui, c'est ce que j'ai fini par faire...
Une autre possibilité aurait été d'insérer le 'select' avec innerHTML puis d'insérer dans cet élément les 'option' :
Non il faisait ce qu'il doit faire, parser le document après chaque
insertion. Pour insérer un select et toutes ses options d'un coup il
faut construire une chaîne contenant l'ensemble et faire un seul
innerHTML à la fin.
oui, c'est ce que j'ai fini par faire...
Une autre possibilité aurait été d'insérer le 'select' avec innerHTML
puis d'insérer dans cet élément les 'option' :
Non il faisait ce qu'il doit faire, parser le document après chaque insertion. Pour insérer un select et toutes ses options d'un coup il faut construire une chaîne contenant l'ensemble et faire un seul innerHTML à la fin.
oui, c'est ce que j'ai fini par faire...
Une autre possibilité aurait été d'insérer le 'select' avec innerHTML puis d'insérer dans cet élément les 'option' :
Mais je préfère nettement la méthode "à l'ancienne"
var s = document.GetElementById('monSelectAmoi'),
o = '';
for(n=0;n<10;n++)
{
o = new Option('valeur '+n, n);
s[n] = o;
}
Plus d'info (en US) :
<http://blog.kevinchisholm.com/javascript/option-constructor/>
Pour le "DOM" (et HTML.5) voir :
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fdatalist>
à rapprocher du "HTMLOptionElement object" vu ici :
<https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement?redirectlocale=en-US&redirectslug=DOM%2FHTMLOptionElement>
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Je précise que ces deux problèmes js, je les ai contournés, mais bon, j'aimerais comprendre.
1ier pb :
J'ai un "constructeur" GrowlNotification(...) qui insère du html dans la page, en simplifiant : document.body.innerHTML+='style="right: -312px;bottom:20px;">blahblahblah
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Je précise que ces deux problèmes js, je les ai
contournés, mais bon,
j'aimerais comprendre.
1ier pb :
J'ai un "constructeur" GrowlNotification(...) qui insère du
html dans la
page, en simplifiant :
document.body.innerHTML+='
style="right:
-312px;bottom:20px;">blahblahblah
';
je nomme cet élément :
this.growlnotifications=document.getElementById('growlnotifications');
ensuite j'ai voulu ajouter une méthode #setText(text); par :
this.setText=function(text){
this.growlnotifications.innerHTML=text;
}
ça n'a jamais marché, j'avais toujours "blahblahblah"
comme texte.
j'ai contourné par :
this.setText=function(text){
document.getElementById('growlnotifications').innerHTML=text;
}
je ne vois pas pourquoi la 1ière solution n'a pas marché...
2ième problème :
j'ai voulu attaché un event listener à cette div :
document.getElementById('growlnotifications').addEventListener('click',
function(){alert('event');});
les clicks sur l'élément non jamais rien
déclenché.
mais ça a marché avec setAttribute :
document.getElementById('growlnotifications')setAttribute('onclick',
"javascript:org_ytho_growlnotifications_hide(this)");
en ajoutant la fonction dans le constructeur par :
window["org_ytho_growlnotifications_hide"]=function(o){o.parentNode.style.right="-312px";return
false;}
au cas où vous auriez des écaircissements...
Bonjour,
Bien que je n'ai pas bien compris ce vous vouliez faire, j'ai vu que vous utilisiez la propriété JS innerHTML.
J'ai eu récemment quelque souci avec celle-ci sous IE9 alors que tout fonctionnait parfaitement sous FF et Chrome.
En réalité je me suis aperçu que, quand la longueur de l'élément à injecter était 0, le champ défini par 'id' n'était pas mis à jour.
En d'autres termes si X est vide : document.getElementById('msg1').innerHTML = X; n'aura aucun effet et le champ identifié ici par 'msg1' restera inchangé !
LOGIQUE ou ILLOGIQUE je ne sais pas ?...
En effet IE aurait pu choisir l'option inverse, c'est à dire vider le champ plutôt que de conserver son contenu initial...
Je ne sais pas si cela peut vous aider, mais il s'agit bien d'1 subtilité de innerHTML.
Cordialement
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Je précise que ces deux problèmes js, je les ai contournés, mais bon, j'aimerais comprendre.
1ier pb :
J'ai un "constructeur" GrowlNotification(...) qui insère du html dans la page, en simplifiant : document.body.innerHTML+='style="right: -312px;bottom:20px;">blahblahblah
iakou
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Je précise que ces deux problèmes js, je les ai contournés, mais bon, j'aimerais comprendre.
1ier pb :
J'ai un "constructeur" GrowlNotification(...) qui insère du html dans la page, en simplifiant : document.body.innerHTML+='style="right: -312px;bottom:20px;">blahblahblah
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Je précise que ces deux problèmes js, je les ai
contournés, mais bon,
j'aimerais comprendre.
1ier pb :
J'ai un "constructeur" GrowlNotification(...) qui insère du
html dans la
page, en simplifiant :
document.body.innerHTML+='
style="right:
-312px;bottom:20px;">blahblahblah
';
je nomme cet élément :
this.growlnotifications=document.getElementById('growlnotifications');
ensuite j'ai voulu ajouter une méthode #setText(text); par :
this.setText=function(text){
this.growlnotifications.innerHTML=text;
}
ça n'a jamais marché, j'avais toujours "blahblahblah"
comme texte.
j'ai contourné par :
this.setText=function(text){
document.getElementById('growlnotifications').innerHTML=text;
}
je ne vois pas pourquoi la 1ière solution n'a pas marché...
2ième problème :
j'ai voulu attaché un event listener à cette div :
document.getElementById('growlnotifications').addEventListener('click',
function(){alert('event');});
les clicks sur l'élément non jamais rien
déclenché.
mais ça a marché avec setAttribute :
document.getElementById('growlnotifications')setAttribute('onclick',
"javascript:org_ytho_growlnotifications_hide(this)");
en ajoutant la fonction dans le constructeur par :
window["org_ytho_growlnotifications_hide"]=function(o){o.parentNode.style.right="-312px";return
false;}
au cas où vous auriez des écaircissements...
Bonjour,
Bien que je n'ai pas bien compris ce vous vouliez faire, j'ai vu que vous utilisiez la propriété JS innerHTML.
J'ai eu récemment quelque souci avec celle-ci sous IE9 alors que tout fonctionnait parfaitement sous FF et Chrome.
En réalité je me suis aperçu que, quand la longueur de l'élément à injecter était 0, le champ défini par 'id' n'était pas mis à jour.
En d'autres termes si X est vide : document.getElementById('msg1').innerHTML = X; n'aura aucun effet et le champ identifié ici par 'msg1' restera inchangé !
LOGIQUE ou ILLOGIQUE je ne sais pas ?...
En effet IE aurait pu choisir l'option inverse, c'est à dire vider le champ plutôt que de conserver son contenu initial...
Je ne sais pas si cela peut vous aider, mais il s'agit bien d'1 subtilité de innerHTML.
Cordialement
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Je précise que ces deux problèmes js, je les ai contournés, mais bon, j'aimerais comprendre.
1ier pb :
J'ai un "constructeur" GrowlNotification(...) qui insère du html dans la page, en simplifiant : document.body.innerHTML+='style="right: -312px;bottom:20px;">blahblahblah
SAM
Le 25/10/13 18:23, iakou a écrit :
J'ai eu récemment quelque souci avec celle-ci sous IE9 je me suis aperçu que, quand la longueur de l'élément à injecter était 0, le champ défini par 'id' n'était pas mis à jour.
??? réellement ?? avec : document.getElementById('msg1').innerHTML = ''; IE (lequel ?) ne vide pas le div en question ?
Je ne sais pas si cela peut vous aider, mais il s'agit bien d'1 subtilité de innerHTML.
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 25/10/13 18:23, iakou a écrit :
J'ai eu récemment quelque souci avec celle-ci sous IE9
je me suis aperçu que, quand la longueur de l'élément à injecter
était 0, le champ défini par 'id' n'était pas mis à jour.
??? réellement ??
avec :
document.getElementById('msg1').innerHTML = '';
IE (lequel ?) ne vide pas le div en question ?
Je ne sais pas si cela peut vous aider, mais il s'agit bien d'1 subtilité de
innerHTML.
Heu ... si c'est vrai, c'est bien embêtant :-(
(il y a d'autres subtilités curieuses avec innerHTML :
<http://stephane.moriaux.pagesperso-orange.fr/truc/innerHTML_danger> )
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
J'ai eu récemment quelque souci avec celle-ci sous IE9 je me suis aperçu que, quand la longueur de l'élément à injecter était 0, le champ défini par 'id' n'était pas mis à jour.
??? réellement ?? avec : document.getElementById('msg1').innerHTML = ''; IE (lequel ?) ne vide pas le div en question ?
Je ne sais pas si cela peut vous aider, mais il s'agit bien d'1 subtilité de innerHTML.