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

**franklin626** · 29/07/2010, 16h14

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

**E.Bzz** · 29/07/2010, 16h24

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

.

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+

**llaffont** · 29/07/2010, 16h24

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

**franklin626** · 29/07/2010, 17h00

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)

**E.Bzz** · 29/07/2010, 17h16

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 (

), si on donne à une variable un nom correspondant à l'id d'un élément de la page, IE plante aussi

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 :

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

toto.value

est l'équivalent de

Code :

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

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

A+

**franklin626** · 29/07/2010, 17h21

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 ?

**E.Bzz** · 29/07/2010, 17h43

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 :

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

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

A+

**llaffont** · 29/07/2010, 17h47

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

.
C'est pour cela qu'il est plus facile de développer dessus et de déboguer ensuite IE (Enfin pour ma part)

**E.Bzz** · 29/07/2010, 18h05

Envoyé par llaffont

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

.

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+

**franklin626** · 30/07/2010, 11h00

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.

**llaffont** · 30/07/2010, 11h02

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 :

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

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 :

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

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"

**E.Bzz** · 30/07/2010, 11h17

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+

**llaffont** · 30/07/2010, 11h22

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.

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

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.

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.

**franklin626** · 02/08/2010, 11h49

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 ?

**llaffont** · 02/08/2010, 12h34

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

**franklin626** · 02/08/2010, 13h45

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 :

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

**franklin626** · 02/08/2010, 14h08

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 ?

**franklin626** · 02/08/2010, 14h10

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.

**franklin626** · 02/08/2010, 14h20

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 :

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

**llaffont** · 02/08/2010, 15h12

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

Code :

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

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

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

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

AJAX

Discussions similaires

Partager

Partager