Discussion :

[saidgrd]

bonjours,
je vous raconte mon histoire , j'ai une page html avec un <div id=indicateur></div> ce div est vide au départ. pour le remplir j'utilise ajax pour générer du code html puis je rajoute l'html que je récupère dans ce div.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function charge_indic(indic,distance3,lin)
{
	document.getElementById("indicateur").innerHTML="<center><p>Chargement</p><img src=\"images/anim_attente.gif\"/></center>";
	document.getElementById("regression").innerHTML="";
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			affiche(xhr.responseText);
 
		}
	};
	date1=new Date().getTime();
	xhr.open("GET", "http://127.0.0.1:8080/traces2/indicateur.jsp?indic="+indic+"&distance3="+distance3+"&lin="+lin+"&ignoreMe=" +date1 , true);
	xhr.send(null);
 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function affiche(reponse)
{
	document.getElementById("indicateur").innerHTML=reponse;
}

bon tous marche bien jusqu'a maintenant et sur les deux navigateurs fireFox et IE7. sauf une chose, la page "indicateur.jsp" me retourne un bouton avec un déclencheur onclick="alert('hello')". lorsque je clique sur ce bouton sous fireFox ça marche très bien mais pas du tous sur IE7 ,
il me dit "erreur sur la page". je pense qu'il ne reconnait pas le html que je rajoute a ma page.
es qu'il ya une solution ?, ou bien je dois changer toute l'architecture de mon système.
merci d'avance.

[SpaceFrog]

créer un element avec innerhtml est risqué ...

http://www.developpez.net/forums/d53...ynamique-form/

[Oscar Hiboux]

Risqué mais tant qu'Internet Explorer dominera sur le marché ça restera une coutume justifiée pour des raisons de performance, hélàs.

Autrement, saidgrd, jette un oeil à l'attribut "defer" de l'élément "script" pour le cas d'IE. Je pense que ça va te mettre sur une piste...

(Je parlerais bien de prototype.js encore une fois mais je vais me faire taper sur les doigts... Allez, je m'y risque : String#evalScripts. )

[saidgrd]

ok, , je vais voir tous ça. merci...

[chafik_si3]

bonjour saidgrd,

j'ai eu le même problème avec Internet Explorer 7, et comme par hasard je me suis tombé sur cette discussion.
Si le problème a été réglé explique nous un peu.

Ton binome.

[Bovino]

Risqué mais tant qu'Internet Explorer dominera sur le marché ça restera une coutume justifiée pour des raisons de performance, hélàs.

Je ne suis pas trop d'accord. IE n'empêche en rien l'insertion d'éléments via les méthodes du DOM qui sont, quel que soit le navigateur, plus performantes que innerHTML.

@saidgrd : Dans ton cas, n'oublie pas que les attributs onévénement sont du JavaScript, donc à priori non pris en compte lors du innerHTML.
Dans ton cas, une solution simple pourrait être d'ajouter le bouton sans le onclick avec innerHTML si tu y tiens, puis d'ajouter le onclick dans le callback de ta requête Ajax :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function affiche(reponse)
{
	document.getElementById("indicateur").innerHTML=reponse;
	document.getElementById("ton_bouton").onclick=function(){alert('Hello');};
}

[SpaceFrog]

Risqué mais tant qu'Internet Explorer dominera sur le marché ça restera une coutume justifiée pour des raisons de performance, hélàs.

coutume justifiée ... Bref ...


Et niveau performance... la preuve en est qua cela ne fonctionne pas rien ne vaudra jamais le DOM pour le meilleur prise en compte crossbrowser des élements créés dynamiquement et ainsi que de tous leurs evènements et propriétés.
Après moi ce que j'en dis, vous codez bein comme vous voulez en laissant la part belle à IE et en l'encourageant à continuer en marge des normes avec du propriétaire ...

[Oscar Hiboux]

@Bovino, SpaceFrog : Au niveau des performances je doute que ça ait beaucoup évolué pour IE6/7. Ça fait un moment que je n'ai pas mesuré ça car j'utilise une couche d'abstraction pour ce genre de choses mais en 2006 je me souviens avoir poussé l'usage du code client abusivement (c'était presque malsain ) dans un projet de R&D. L'utilisation de innerHTML était bien plus concluante (XX%, voire XXX%). Maintenant, si on ne parle que des navigateurs qui n'ont pas de "navigateur" que leur nom, oui, l'usage de innerHTML pour des questions de performances ne présente plus spécialement d'avantage. Par contre, comment faites-vous pour insérer dynamiquement du contenu généré par le serveur sans avoir recours à innerHTML ?

Finalement, je doute que l'on puisse dire que l'une ou l'autre est la meilleure à tout coup. Voyez par exemple certains avis collectés en 2009.


@SpaceFrog : Oui, justifiée, malheureusement, et j'ai bien hâte au jour où Internet Explorer sera en sérieux déclin sur le marché du web. Pour l'instant Microsoft a encore plus de 60% du marché mondial. Risque de l'ignorer qui le souhaite... C'est une considération qui a toute son importance en entreprise : les clients souhaitent tous que leurs applications fonctionnent avec les navigateurs les plus représentés, et c'est normal !

Pour ma part, j'haïs Internet Explorer, vraiment !! Alors en dehors du bureau la considération que j'ai à son égard est très proche de ce que tu dis !

[...]vous codez bein comme vous voulez en laissant la part belle à IE et en l'encourageant à continuer en marge des normes avec du propriétaire ...

[SpaceFrog]

Par contre, comment faites-vous pour insérer dynamiquement du contenu généré par le serveur sans avoir recours à innerHTML ?

Tu n'as visiblement pas été voir le lien donné plus haut ...

[Oscar Hiboux]

Et... si tu développais ?

[SpaceFrog]

le lien donné pointe sur une petite librairie que j'ai fourni il y a un certain temps...
les objets "gérérés" par le serveur sont en fait retournés au client sous forme de string formaté comme un objet de type json (hash)
un simple eval retourne un veritable hash qui est alors passé en paramètre à la fonction de creation d'objets par le DOM.
Je préfère m'assurer de l'efficacité de la création des objets, et être sûr que toutes leurs propriétés soient prises en compte plutot que d'essayer de grappiller quelques millisecondes à la création d'un objet ...

[Oscar Hiboux]

OK, c'est ce que j'avais imaginé. Merci, c'est plus explicite ainsi !

Je comprends bien ton point de vue mais je trouve que l'on perd en commodité en faisant ce genre de choses. Par exemple, dans le cas où on aurait un patron, du côté serveur, générant la vue d'un composant. Il serait utilisé du côté serveur pour générer la page dans son état initial puis ensuite, au besoin, utilisé pour rendre ledit composant suite à un appel XHR. En utilisant innerHTML, Ajax.Updater & co. on n'a pas à se soucier de grand-chose et on concentre ses efforts à un seul endroit pour ce qui touche à la vue du composant. Par contre, avec la technique que tu décris, il faudrait avoir en plus une autre entité générant la description JSON à destination de ta moulinette. On aurait donc 2 zones de maintenances, avec tous les déboires que ça peut occsasionner.

Enfin, rien n'empêche de mêler plusieurs technique tu me diras.

[SpaceFrog]

Malheureusement dans ce cas de figure je ne me permets pas le luxe de la commodité , Pour moi il n'y a pas photo entre un code qui fonctionne intégralement et un code qui risque de poser des soucis de prise en compte des objets créés dynamiquement.
Je t'accorde volontier que le innerHTML est séduisant de facilité, il suffit de générer le html coté serveur et hop. Je préfère de loin avoir à maintenir des deux cotés si nécessaire, mais avoir des objets pleinement opérationnels de façon crossbrowser.
Maintenant si c'est pour le site de l'association de l'amicale des contemplateurs de coccinelles vertes à poids rose, tu peux te permettre de négliger ce genre de détails

[Oscar Hiboux]

C'est d'une toute autre ampleur ce sur quoi je travaille, héhé !

As-tu un exemple de choses qui ne fonctionnent pas avec innerHTML ? (Désolé, je n'ai jamais rencontré de cas alors j'aimerais en apprendre tant qu'à faire. )

[le_chomeur]

entre la pratique et la théorie ...
entre les bidouilles et les méthodes "propres" ...
si le dom a été créer c'est peut-être pour une bonne raison, mais apparement elle reste obscure pour certain :p

[SpaceFrog]

il suffit de parcourir le forum pour trouver nombre d'exemples de innerHTML posant des problèmes d'évènements ou de propriétés non pris en compte...
Je n'ai pas d'exemple précis sous la main, ne le pratiquant plus depuis bon nombre d'années ...

[Oscar Hiboux]

Ah bon... Si je tombe sur un sujet alors j'y jetterai un oeil alors, je suis vraiment curieux de voir quels sont ils - à part ces histoires de table dans IE6, qui demeurent des exceptions vouées à disparaître.
Le concept de pouvoir mettre à jour le DOM à l'aide d'un fragment HTML sous forme d'une chaîne de caractères est une fonctionalité qui apporte tout un confort. Même s'il faudrait peut-être en donner l'accès autrement que par une propriété en lecture/écriture j'espère vraiment qu'on pourra en bénéficier encore longtemps ! (Autrement, bah, il faudra la coder. Un parser HTML en JavaScript ? Le navigateur ne le ferait il pas déjà nativement ? )


P.S. : je viens de regarder l'abstraction que fait prototype.js par la méthode Element#update : il n'y a pas beaucoup de précautions alors j'imagine que le nombre de problèmes doit quand même être très limité.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
// Grosso-modo ça donne ça :
element.innerHTML = content.stripScripts();
content.evalScripts();

Enfin, c'est un discours éternel qui a déjà usé un bon nombre de claviers. Pour ma part je prends le "risque" !

[le_chomeur]

un exemple tout bète ... les éléments ajouté via innerHTML ne sont pas postés ...
tu trouveras moults exemple sur la toile relatif a ce sujet qui ... indique tous de passer par le dom

[Oscar Hiboux]

Ah oui ? Ça m'intrigue, j'essayerai ça ce soir (sauf faute de temps...), sois-en sûr !

Dans un navigateur en particulier, hmm ? ^^

[Auteur]

il suffit de parcourir le forum pour trouver nombre d'exemples de innerHTML posant des problèmes d'évènements ou de propriétés non pris en compte...
Je n'ai pas d'exemple précis sous la main, ne le pratiquant plus depuis bon nombre d'années ...

exemple indigeste avec innerHTML :
http://www.developpez.net/forums/d73...rhtml-firefox/

innerHTML et les tableaux :
http://www.developpez.net/forums/d66...nnerhtml-ie-_/
http://www.developpez.net/forums/d49...l/#post2947182 (regarde le lien que j'ai placé dans mon message #9)


innerHTML et les listes déroulantes :
http://www.developpez.net/forums/d64...nte-dynamique/


etc.