[AJAX] Ajax passe sous IE, "undefined" sous Firefox

Version imprimable

29/07/2010, 16h14
franklin626

[AJAX] Ajax passe sous IE, "undefined" sous Firefox

bonjour,

je m'excuse d'avance pour la question vague et dépourvue de contexte. Je viens d'arriver en stage et on m'a confié la tâche ingrate de porter une application énorme J2EE ne fonctionnant que sous IE vers tous (rien que ça) les autres browsers...

J'ai une erreur très commune concernant AJAX que je retrouve dans plusieurs pages. Cela fait 2 jours que je me tape la tête contre le mur, je ne sais plus où chercher l'erreur.

Mes zones Ajax affichent leur contenu sous IE, et sous Firefox je vois juste une ou plusieurs fois le texte "undefined"....

Pouvez-vous me donner la liste la plus exhaustive possible des sources de problèmes potentielles ?

Je vous remercie, au vu de la dimension de l'application, je suis à court d'idées pour identifier le problème...
29/07/2010, 16h24
E.Bzz

Bonjour,
sûr que si on pouvait voir la partie du code qui génère ces "undefined", ça aiderait :mouarf:.

Le cas le plus courant concerne une instruction JS faisant référence à une variable ou un objet (ou une de ses propriété) inexistant : soit un objet non présent dans la page, soit une référence à une propriété non gérée pour l'objet ciblé.

A+
29/07/2010, 16h24
llaffont

Déjà installe FireBug si ce n'est pas déjà fait.

Et vérifie sous l'onglet "script" de FireBug, en mettant de points d'arrêt, la raison de ton "undefined".
29/07/2010, 17h00
franklin626

Ok, ça doit être mon problème.

j'ai effectivement quelques variables à null sous Firebug, celles-ci ne sont pas null sous Internet Explorer.

Je récupère avec la méthode getElementById, qui renvoit "null" pour certaines valeurs sous Firefox. J'ai donc cherché à bien renseigner le couple "name" ET "id" partout où j'ai pu, mais cela n'a rien résolu.

J'ai alors tenté de substituer getElementById par getElementsByName, juste pour tester.

Sous IE, getElementsByName me renvoie une liste non vide, et à nouveau, Firefox renvoie une liste vide...

Je ne comprends pas comment IE passe avec les 2 méthodes et Firefox avec aucune. Comment expliquer cela ?

(je fournirais bien du code mais l'appli en compte des dizaines de milliers de lignes et il m'est impossible d'en isoler un morceau cohérent à poster ici. Sans parler du fait que ça a été codé avec les pieds, mais je m'arrêterai là pour la mauvaise langue)
29/07/2010, 17h16
E.Bzz

Citation:

Envoyé par franklin626

Je ne comprends pas comment IE passe avec les 2 méthodes et Firefox avec aucune. Comment expliquer cela ?

Il y a une raison assez simple qui explique pas mal de problèmes de ce type :
IE confond name et id.

Aussi, sous IE, si on définit le name d'un objet mais pas son id, getElementById() fonctionnera quand même (mais pas sous FF).

Par contre, si on donne à un élément un id correspondant au name d'un autre élément, IE plante (car il "considère" que l'id est dupliqué). Les autres nav, non.

Dans le même ordre d'id (:mrgreen:), si on donne à une variable un nom correspondant à l'id d'un élément de la page, IE plante aussi :aie:
Cette fois-ci, c'est à cause d'une syntaxe historiquement autorisée sous IE : faire référence à un objet directement via son id :
Pour un objet dont l'id est "toto",

Code:

toto.value

est l'équivalent de

Code:

document.getElementById("toto").value

On voit bien ici la confusion qu'engendrerait pour le nav (enfin ... pour IE) l'utilisation d'une variable "toto" ...

Bref, les raisons de dysfonctionnement ne manquent pas :mrgreen:

A+
29/07/2010, 17h21
franklin626

je vois. Bon j'ai dupliqué tout ce que je pouvais, et je n'ai pas de plantage sous IE.

N'y aurait-il pas d'autre explication que celles liées à name/id ? Cela voudrait juste dire que j'ai zappé un name ou id du coup, mais je ne vois pas où j'aurais pu.

Et cela ne choque personne que même getElementsByName ne passe pas du tout sous Firefox ?
29/07/2010, 17h43
E.Bzz

Citation:

Envoyé par franklin626

Et cela ne choque personne que même getElementsByName ne passe pas du tout sous Firefox ?

Ben le problème est que le fonctionnement est différent : getElementsByName() renvoie un tableau d'éléments (le name n'ayant pas de contrainte d'unicité).
Pour reprendre mon exemple précédent, pour attaquer le même objet via son name, ça serait

Code:

document.getElementsByName("toto")[0].value

A+
29/07/2010, 17h47
llaffont

Un autre problème de IE et la navigation Ajax.

C'est dans les tableaux la balise <TBODY> est ajouté par FF ce qui par moment déroute les ascendants et descendants DOM.

FF corrige beaucoup de problème script par lui même :ccool:.
C'est pour cela qu'il est plus facile de développer dessus et de déboguer ensuite IE (Enfin pour ma part)
29/07/2010, 18h05
E.Bzz

Citation:

Envoyé par llaffont

FF corrige beaucoup de problème script par lui même :ccool:.

Hélas, c'est à cause de telles "souplesses" permises sous IE par le passé que l'on se retrouve avec tous ces problème aujourd'hui (cf. name/id).

Le rôle du nav ne devrait pas être de masquer les erreurs du développeur mais plutôt de les identifier clairement afin de les corriger ;)

Mais ce que tu dis sur FF m'étonne, car son avantage et justement de ne pas laisser passer grand chose (en dehors des non-déclarations de variables).

A+
30/07/2010, 11h00
franklin626

Mouaip....
Toujours à la recherche du problème. J'ai bien compris certaines choses que vous m'avez expliquées, mais je ne comprends toujours pas pourquoi je peux récupérer mes objets clés :

1) par id ET par name sous IE
2) aucun des deux sous Firefox !

1 suppose que soit name ou id sont positionnés, donc au moins une solution devrait tourner pour Firefox non ?

--

Sinon, question subsidiaire. Je ne suis pas un pro d'Ajax, après modification d'une zone de la page, comment puis-je accéder au résultat HTML ? J'aimerais accéder au code que j'obtiens avec succès sous IE. Quand je consulte le code source de la page après requête, je ne vois pas l'HTML correspondant ! Bizarre ? Ou est-ce planqué dans un cache ailleurs ?

--

Firebug c'est sympa, mais ça devient tout de suite pas terrible quand on débogue des fichiers de 2000 lignes sans commentaires.

Et le pire c'est que dans l'appli, les pages sont tantôt générées via jsp, tantôt velocity, tantôt de violents out.println().

La misère, je hais mon stage.
30/07/2010, 11h02
llaffont
Citation:

Envoyé par E.Bzz

Mais ce que tu dis sur FF m'étonne, car son avantage et justement de ne pas laisser passer grand chose (en dehors des non-déclarations de variables).

Avec les bons outils il identifie et te remonte les problèmes de structure. Mais je t'assure qu'il se prend quelques liberté sur la restructuration du code.

Tu test avec ce code :
Code:

1 2 3 4 5 6 7 8 9 <html><body> <table> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> </table> </body></html>
Sous FF si tu fais "code source de la page" il va t'afficher le code source (le fichier d'origine et non la manière dont il l'interprète).

Alors que si tu passes par FireBug onglet HTML tu auras la version interprété c'est à dire ceci :
Code:

1 2 3 4 5 6 7 8 9 10 <html><head></head><body> <table> <tbody><tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> </tbody></table> </body></html>
Il a ajouté de lui même les balise "Head" et "Tbody" donc dans un code Ajax d'une navigation DOM "rigide" on est perdu sous FF et l'on génère des "undefined"
30/07/2010, 11h17
E.Bzz

Citation:

Envoyé par franklin626

après modification d'une zone de la page, comment puis-je accéder au résultat HTML ?

Il suffit d'entrer dans la barre d'adresse du nav l'url (avec les bons paramètres) appelée par Ajax.
Tu auras cette fois dans le "code source de la page" la réponse d'Ajax.

Le code source de la page représente le code initialement chargé dans le nav.
Les modifications postérieures (via JavaScript, donc Ajax) ne modifient donc pas le "code source".

EDIT : @llafont : tu marques un point ;)
La différence c'est que pour FF, on a déjà (quasiment) fait le tour ...

A+
30/07/2010, 11h22
llaffont

Citation:

Envoyé par franklin626

Mouaip....
Toujours à la recherche du problème. J'ai bien compris certaines choses que vous m'avez expliquées, mais je ne comprends toujours pas pourquoi je peux récupérer mes objets clés :

1) par id ET par name sous IE
2) aucun des deux sous Firefox !

1 suppose que soit name ou id sont positionnés, donc au moins une solution devrait tourner pour Firefox non ?

Montre nous un bout de tes codes si tu trouve un petit morceaux parlant de lui même se sera mieux.

Citation:

Sinon, question subsidiaire. Je ne suis pas un pro d'Ajax, après modification d'une zone de la page, comment puis-je accéder au résultat HTML ? J'aimerais accéder au code que j'obtiens avec succès sous IE. Quand je consulte le code source de la page après requête, je ne vois pas l'HTML correspondant ! Bizarre ? Ou est-ce planqué dans un cache ailleurs ?

Dsl ! je remet une couche avec mon FireBug .
Mais l'onglet CONSOLE te montre toutes les transactions POST, GET qui se passe et un clique droit "ouvrir dans un nouvel onglet "sur l'url présente devrait te montrer résultats.

Sinon tu as la méthode de E.Bzz

Citation:

Envoyé par E.Bzz

Il suffit d'entrer dans la barre d'adresse du nav l'url (avec les bons paramètres) appelée par Ajax.
Tu auras cette fois dans le "code source de la page" réponse d'Ajax.

Citation:

Firebug c'est sympa, mais ça devient tout de suite pas terrible quand on débogue des fichiers de 2000 lignes sans commentaires.
Et le pire c'est que dans l'appli, les pages sont tantôt générées via jsp, tantôt velocity, tantôt de violents out.println().
La misère, je hais mon stage.

Quand tu pratiques ça devient facile. Enfin tant qu'il ne font pas de MàJ qui change quelques disposition de menu. :)
02/08/2010, 11h49
franklin626

Bonjour à tous,

merci pour vos premiers éléments de réponse. J'ai au moins appris à me servir des outils et je commence à comprendre les technos.

Mes problèmes liés à Ajax durent toujours cependant. Lorsque je consulte les résultats des requêtes POST via Ajax dans Firebug, je trouve bien le contenu XML que j'attends !

Pour tester, je copie-colle dans un document HTML quelconque et je vérifie que l'info passe bien. Cependant, sur les pages de l'appli, toujours ces "undefined" qui traînent dans l'HTML à tors et à travers...

Est-ce que cela apporte de l'info pour la résolution du problème ? :cry:
02/08/2010, 12h34
llaffont

les undefined correspondent à des extraits de ton retour XML ?

Si oui ! Peux tu nous montrer ton code qui analyse ton retour et ta sortie XML ?

Car si tel est bien le cas ton problème vient plutôt du coté navigation DOM dans ton retour XML.

Petite question utilises tu une library pour tes requêtes AJAX ? Style Jquery, prototype, ...

Voici le code AJAX renvoyé par la méthode. C'est typiquement une ligne s'ajoutant à un tableau lorqu'on clique "extend" ou "edit" la ligne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<?xml version="1.0" encoding="UTF-8"?>
<taconite-root xml:space="preserve">
  <taconite-replace contextNodeID="62056" parseInBrowser="true">
    <tr class="grid" id="62056">
      <td class="conf">
        <input type="checkbox" name="chk" value="62056" id="chk" />
      </td>
      <td class="clickable center" onClick="grid.doCollapse(this);return false;">
        -
      </td>
      <td class="text cell">
        2010-01-21
      </td>
      <td class="text cell">
        add novatech
      </td>
      <td class="cell numeric">
        30,000
      </td>
      <td class="cell numeric">
        10,000
      </td>
      <td class="cell numeric">
        10,000
      </td>
      <td class="cell numeric">
        0,000
      </td>
      <td class="cell numeric">
        0,000
      </td>
      <td class="cell numeric">
        10,000
      </td>
      <td class="cell numeric">
        0,000
      </td>
      <td class="text cell">
      </td>
      <td class="text cell">
      </td>
      <td class="cell numeric">
        0,00
      </td>
      <td class="text cell">
      </td>
    </tr>
    <tr class="grid subgrid" id="sub_0_62056">
      <input type="hidden" name="subrow_62056" value="0" id="subrow_62056" />
      <input type="hidden" name="ts_0_62056" value="2010-03-08 09:25:47.873" id="ts_0_62056" />
      <input type="hidden" name="Pk_0_62056" value="62056" id="Pk_0_62056" />
      <td>
      </td>
      <td colspan="3" class="text" style="padding: 1px 4px 1px 4px;">
        <div class="clipped_condensed" title="EWL: 07 07 10 NORSAS: 7152 Puraspec (other filter cakes and spent absorbents,)">
          07 07 10 Puraspec (other filter cakes and spent absorbents,)
        </div>
      </td>
      <td class="cell numeric" id="WasteToShore_0_62056">
        <div>
          30,000
        </div>
      </td>
      <td class="cell numeric" id="Reuse_0_62056">
        <div>
          10,000
        </div>
      </td>
      <td class="cell numeric" id="Recycling_0_62056">
        <div>
          10,000
        </div>
      </td>
      <td class="cell numeric" id="EnergyRec_0_62056">
        <div>
          0,000
        </div>
      </td>
      <td class="cell numeric" id="LandFill_0_62056">
        <div>
          0,000
        </div>
      </td>
      <td class="cell numeric" id="Incineration_0_62056">
        <div>
          10,000
        </div>
      </td>
      <td class="cell numeric" id="Other_0_62056">
        <div>
          0,000
        </div>
      </td>
      <td class="text cell">
      </td>
      <td class="text cell">
      </td>
      <td class="cell numeric">
        <div>
          0,00
        </div>
      </td>
      <td class="text cell">
      </td>
      <input type="hidden" name="sub_62056" value="sub_0_62056" id="sub_62056" />
    </tr>
  </taconite-replace>
</taconite-root>

Concernant ta question, j'aurais du mal à répondre, mais oui il y a certainement des librairies mises en oeuvre, y compris des librairies persos. Je ne sais pas répondre à tout car je débarque sur une appli dont le développement à démarré en 2004.

Je peux éventuellement renseigner davantage de code, mais j'ai pas envie d'innonder le post. Mais peut-être si vous pouvez me donner des directions, je peux isoler des passages de code. :roll:

02/08/2010, 14h08
franklin626

Je me suis un peu plus penché sur cet utilitaire "taconite".

Est-ce que les ".innerHTML" peuvent causer problème pour des browsers autres que IE ? :P
02/08/2010, 14h10
franklin626

Dans ce cas, il me semble que JQuery pourrait substituer voire résoudre le problème ? Je ne comprends juste pas trop JQuery, et comment insérer dans la même cible.

Voici la fonction du parser Javascript dans laquelle je tente de substituer les innerHTML, mais je pense que j'y prends mal, je n'arrive pas à référencer la variables div pour remplir son contenu HTML.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function handleElement(xmlNode) {
    	var div = document.createElement('div');
 
    	if(xmlNode.nodeName == 'tr') {
    		$("#div").html("<table><tbody>"+xmlNode.xml+"</tbody></table>");
 			//div.innerHTML = '<table><tbody>'+xmlNode.xml+'</tbody></table>';
			return div.firstChild.firstChild.firstChild;
		} 
    	if(xmlNode.nodeName == 'td') {
    		$("#div").html("<table><tbody><tr>"+xmlNode.xml+"</tr></tbody></table>");
 			//div.innerHTML = '<table><tbody><tr>'+xmlNode.xml+'</tr></tbody></table>';
			return div.firstChild.firstChild.firstChild.firstChild;
		} 
    	if(xmlNode.nodeName == 'th') {
    		$("#div").html("<table><tbody><th>"+xmlNode.xml+"</th></tbody></table>");
 			//div.innerHTML = '<table><tbody><th>'+xmlNode.xml+'</th></tbody></table>';
			return div.firstChild.firstChild.firstChild.firstChild;
		}
    	$("#div").html(xmlNode.xml);
		//div.innerHTML = xmlNode.xml;
		return div.firstChild;
	}

Pour identifier les library cherche une ligne comme celle-ci :
Code:

1 2 <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
ici on ajoute Jquery :) en format minimum.

Pour les injections avec Jquery rien de plus simple!
Je reprend mon bout de code :mrgreen:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script> </head> <body> <table> <tbody><tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td ID="ICI">2</td></tr> <tr><td>3</td></tr> </tbody></table> </body> <script type="text/javascript"> $("#ICI").append("ICI on a injecté"); </script> </html>
Pour plus d'info : http://jquery.developpeur-web2.com/d...ion/append.php

Sinon pour la fonction handleElement()

J'ai pas l'habitude de bosser avec des retours XML je bosse généralement avec du JSON. mais ça reviens au même.

Le test suivant : if(xmlNode.nodeName == 'tr') injecte directement le retour "xmlNode.xml" entre les balises <Tbody>

Théoriquement et en dur cela fonctionne mais en injection j'ai un doute sur l'injection XML dans un corps HTML.

Il faudrait arriver à faire injecter que du HTML c'est à dire remplacer "xmlNode.xml" par "xmlNode.taconite-replace"

02/08/2010, 15h30
franklin626

J'ai trouvé mon bug, en réexprimant correctement avec JQuery, j'ai résolu certains des undefined apparaissant sur la page.

Merci pour vos infos ! Je commence à maîtriser AJAX tout doucement. :ccool:
04/08/2010, 04h39
mess is lore

Bonjour,

J'ai le même type de problème, également avec FF et du JS.
voici la ligne qui me donne du fil à retordre:

Code:

onclick="javascript:transformer2(butsend);"

sachant que 'butsend' est l'id d'un lien.
ça fait son taf sur tous les navigateurs testés
mais pas sous FF qui me renvoie 'butsend is not defined'

J'ai essayé

Code:

onclick="javascript:transformer2('#butsend');"

plus d'erreur, mais ma fonction 'transformer2' qui est sensée récupérer le 'title' de 'butsend' ne fonctionne plus (et c'est con pour une fonction)...

Quelle syntaxe est la plus juste? et qu'est ce qui provoque cette exception de FF ? quelqu'un à t-il une piste?
04/08/2010, 11h08
llaffont

mess is lore bienvenu sur le forum :mrgreen:

Par contre ! Je conçois que c'est pratique de créer une demande dans le post de quelqu'un d'autre ça évite d'avoir trop de post sur le forum :D mais on est plus à ça près sur ici.

L'inconvénient de faire ça, même si ton problème te semble proche de l'original de ce topic, c'est que tu flingue le suivi du Post de franklin626.

Et que ton problème va être perdu dans la masse en raison du TAG :resolu:

Comme tous problèmes sont différents pourrais tu créer un autre Post ? :ccool:

En spécifiant si tu utilise un Framework ? Style prototype ou Jquery.