Ajax ne fonctionne que sous FF pas sur les autres navigateurs [Résolu]

Emyleen · 24/08/2011, 17h04

Bonjour,

Je viens à vous car je me trouve devant une erreur bizarre... En effet j'ai mis de l'ajax sur mon site et il se trouve que sous Firefox il fonctionne impeccable, il fait exactement ce qui lui est demandé, aucune erreur de javascript.

Mais ces fonctions ajax ne marchent pas sous d'autres navigateurs : Google Chrome, Opéra, Safari et IE8 Oo

Je trouve ça étonnant, car que ça plante sous IE, on a l'habitude, mais ce genre de cas Oo

Je vous met une de mes fonctions ajax (submitForm) qui ne fonctionne pas :

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
 
function createInstance() {
	var xhr = null;
	//Création de l'objet xhr en fonction du navigateur
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}
 
function submitForm(element,page)
{ 
	var req =  createInstance();
	req.onreadystatechange = function() { 
		if(req.readyState == 4){
			if(req.status == 200) {
				document.getElementById(element).innerHTML = req.responseText;
				document.getElementById('affichage').style.visibility = 'visible';
			}	
			else {
				alert("Error: returned status code " + req.status + " " + req.statusText);
			}
		}
	}; 
	req.open("POST", "/catalogue/scripts/genererListeCatalogue.php", true); 
	req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	catalogue = document.getElementById('zlCatalogue').value;
	gamme = document.getElementById('IDgamme').value;
	famille = document.getElementById('IDfamille').value;
	req.send("numPage="+page+"&zlCatalogue="+catalogue+"&idGamme="+gamme+"&idFamille="+famille); 
}

Qu'en pensez-vous? Une idée théorique sur le sujet?

andry.aime · 24/08/2011, 17h11

Bonjour

Citation:

if(req.status == 200) {
document.getElementById(element).innerHTML = req.responseText;
document.getElementById('affichage').style.visibility = 'visible';
}

Remplace ton visibility par un display (HTML et Javascript) et teste aussi si le status est égal à 0.

Code :

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

1
2
3
4
if(req.status == 200 || req.status == 0) {
				document.getElementById(element).innerHTML = req.responseText;
				document.getElementById('affichage').style.display = 'inline';
			}

A+.

Emyleen · 24/08/2011, 17h35

J'ai essayé tes modifications, toujours rien sur les autres navigateurs...

J'ai fais un schéma de mes div afin que tout le monde me comprenne

En fait quand on clic sur un lien du menu, la div liste doit se mettre à jour. Tout fonctionne bien sous FF mais rien ne se passe sur les autres navigateurs et les fonctions JavaScript associées aux liens du menu ne s'exécutent pas non plus...

Voici le code d'un lien du menu :

Code :

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

1
2
3
4
5
6
7
8
9
<a 
href="javascript:document.getElementById('IDgamme').value = <?php echo $gamme->ID(); ?>;
document.getElementById('IDfamille').value = <?php echo $famille->ID(); ?>;
activeOngletGamme('gamme<?php echo $gamme->ID(); ?>');
activeOngletFamille('famille<?php echo $famille->ID(); ?>');
getNumPage('tableauPagesLien',1,<?php echo $nbPages; ?>);
submitForm('listeAjax',1);" 
title="<?php echo $famille->Libelle(); ?>">
<?php if(count($listeSousFamille)>2){ ?><span>&#9658;</span><?php } echo $famille->Libelle(); ?></a>

J’appelle plusieurs fonction JavaScript sur un même lien, est-ce là le problème?

Edit : Chrome ma renvoyé une erreur \o/

Code :

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

1
2
3
4
Uncaught TypeError: Object function Array() { [native code] } has no method 'filter'
activeOngletGammecatalogue.js:14
(anonymous function)catalogue.php:128
onclick

Mais c'est en rapport avec une méthode de dégradé sous ie Oo je vois pas le rapport...

Voici l'erreur trouvée par Opéra :

Code :

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

1
2
3
4
5
6
Uncaught exception: TypeError: 'Array.filter' is not a function
 
Error thrown at line 14, column 1 in activeOngletGamme(id) in http://localhost/javascript/catalogue.js:
    Array.filter(document.getElementsByClassName('gamme actif'), function(elem){
called from line 3, column 31 in <anonymous function>(event):
    activeOngletGamme('gamme5');

Et IE me donne aussi cette erreur avec filter... Du coup est-ce possible qu'il bloque à une fonction et que du coup il n'exécute pas les fonctions suivantes? (D'où la non-actualisation de ma liste)

andry.aime · 24/08/2011, 17h43

Peut-on voir ton code HTML généré?

A+.

Emyleen · 24/08/2011, 17h48

J'ai édité mon post précédent

et Voici le code de ma page de liste :

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"><!-- InstanceBegin template="/Templates/catalogue.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="prodmanager, spi software, logiciel, meuble" /> 
<meta name="description" content="Accès internet à la base de donn&eacute;es StoreManager" /> 
 
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>StoreManager.com - Catalogue</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="/styles/global.css"/>
<link rel="stylesheet" type="text/css" href="/styles/contenu.css"/>
<link rel="stylesheet" type="text/css" href="/styles/forms.css"/>
<link rel="stylesheet" type="text/css" href="/styles/catalogue.css"/>
<!-- InstanceBeginEditable name="head" -->
<link rel="stylesheet" type="text/css" href="/styles/produitsListe.css"/><link rel="stylesheet" type="text/css" href="/styles/produitDetail.css"/>
 
<script type="text/javascript" src="/javascript/ajax-php.js"></script>
<script type="text/javascript" src="/javascript/jQuery.js"></script>
<script type="text/javascript" src="/javascript/catalogue.js"></script>
<script type="text/javascript" src="/javascript/menuCatalogue.js"></script>
<!-- InstanceEndEditable -->
<script type="text/javascript">
function deconnexion(){
	document.getElementById('action').value = 'logout';
	document.getElementById('deco').submit();
}
</script>
</head>
 
<body>
<div id="confirmation" style="display: none;">
</div>
<div id="shadow" style="display: none;"><&nbsp;</div>
 
<div id="contenu">
	<div id="entete">
		<a id="accueil" href="../index.php" title="Retour à l'accueil">&nbsp;</a>
       	<img id="titre" src="../images/titre-storemanager.png" alt="" />
        <div class="alignDroite">
            <div id="infosConnexion">
                <p><a href="../scripts/fermetureSession.php" title="Deconnexion"><img src="../images/btn-deconnexion.png" alt="Me d&eacute;connecter" /></a><a href="../espace-perso/espace-perso.php" title="Mon profil utilisateur"><img src="../images/btn-profil-utilisateur.png" alt="Mon profil utilisateur" /></a>Bienvenue Admin istrateur </p>
            </div>
            <form id="moteurDeRecherche" action="resultat-recherche.php" method="post">
 
                <a href="../resultat-recherche.php" id="btnRechercher" name="btnRechercher" title="Rechercher">&nbsp;</a>
                <input id="aRechercher" name="aRechercher" value="" />
            </form>
        </div>
    </div>
	<div id="corps">
        <!-- InstanceBeginEditable name="avantTitre" -->
		<!-- InstanceEndEditable -->
        <!-- InstanceBeginEditable name="contenuCorps" -->
 
        <div id="panier">
        	<a href="/catalogue/panier.php" title="Voir mon panier"><img src="/images/panier.png" alt="Voir mon panier" />Vous avez<br/>1 article<br />dans votre panier<br /><span>Total : 17,89€</span></a>
        </div>
        <ul id="menuCatalogue">
		<li id="ongletCatalogue">Catalogue<form id="nomCatalogue" name="nomCatalogue" action="/catalogue/catalogue.php" method="post"><select id="zlCatalogue" name="zlCatalogue" onchange="javascript:changerCatalogue();">
	<option value="Catalogue 1" >Catalogue 1</option><option value="Catalogue 2" >Catalogue 2</option><option value="Catalogue 3" >Catalogue 3</option>    </select>
 
    </form>
</li>
<li class="gamme actif" id="gamme1">
        <a href="#"
        onclick="javascript:document.getElementById('IDgamme').value = 1;
                            document.getElementById('IDfamille').value = 1;
                            activeOngletGamme('gamme1');
                            getNumPage('tableauPagesLien',1,1);
                            submitForm('listeAjax',1);"
                           title="ACCENT" 
 
                   >ACCENT</a></li><li class="gamme " id="gamme2">
        <a href="#"
        onclick="javascript:document.getElementById('IDgamme').value = 2;
                            document.getElementById('IDfamille').value = 2;
                            activeOngletGamme('gamme2');
                            getNumPage('tableauPagesLien',1,2);
                            submitForm('listeAjax',1);"
                           title="ACCESSOIRES" 
 
                   >ACCESSOIRES</a></li><li class="gamme " id="gamme5">
        <a href="#"
        onclick="javascript:document.getElementById('IDgamme').value = 5;
                            document.getElementById('IDfamille').value = 5;
                            activeOngletGamme('gamme5');
                            getNumPage('tableauPagesLien',1,9);
                            submitForm('listeAjax',1);"
                           title="FERRURES" 
						   >FERRURES<span>&#9660;</span></a><ul class="type "><li id="famille5" class="famille "><a 
                            href="#"
                            onclick="javascript:document.getElementById('IDgamme').value = 5;
                                                 document.getElementById('IDfamille').value = 5;
                                                 activeOngletGamme('gamme5');
                                                 activeOngletFamille('famille5');
                                                 getNumPage('tableauPagesLien',1,1);
                                                 submitForm('listeAjax',1);"
                            title="FERRURES BLUM"
                            >
							FERRURES BLUM</a></li><li id="famille6" class="famille "><a 
                            href="#"
                            onclick="javascript:document.getElementById('IDgamme').value = 5;
                                                 document.getElementById('IDfamille').value = 6;
                                                 activeOngletGamme('gamme5');
                                                 activeOngletFamille('famille6');
                                                 getNumPage('tableauPagesLien',1,2);
                                                 submitForm('listeAjax',1);"
                            title="FERRURES DE LITS"
                            >
							FERRURES DE LITS</a></li><li id="famille7" class="famille "><a 
                            href="#"
                            onclick="javascript:document.getElementById('IDgamme').value = 5;
                                                 document.getElementById('IDfamille').value = 7;
                                                 activeOngletGamme('gamme5');
                                                 activeOngletFamille('famille7');
                                                 getNumPage('tableauPagesLien',1,1);
                                                 submitForm('listeAjax',1);"
                            title="FERRURES DE PIEDS"
                            >
 
							FERRURES DE PIEDS</a></li><li id="famille8" class="famille "><a 
                            href="#"
                            onclick="javascript:document.getElementById('IDgamme').value = 5;
                                                 document.getElementById('IDfamille').value = 8;
                                                 activeOngletGamme('gamme5');
                                                 activeOngletFamille('famille8');
                                                 getNumPage('tableauPagesLien',1,1);
                                                 submitForm('listeAjax',1);"
                            title="FERRURES DE TABLES"
                            >
							FERRURES DE TABLES</a></li><li id="famille9" class="famille "><a 
                            href="#"
                            onclick="javascript:document.getElementById('IDgamme').value = 5;
                                                 document.getElementById('IDfamille').value = 9;
                                                 activeOngletGamme('gamme5');
                                                 activeOngletFamille('famille9');
                                                 getNumPage('tableauPagesLien',1,6);
                                                 submitForm('listeAjax',1);"
                            title="FERRURES EN APPLIQUE"
                            >
							FERRURES EN APPLIQUE</a></li></ul></li>		</ul>
        <div id="contenuCatalogue">
	        <h1>Catalogue 1<br/><span>du 17/08/2011</span></h1>
            <div id="affichage">
 
            	<form id="triCatalogue" name="triCatalogue" action="#">
                	<label>Trier par : </label>
                    <select id="tri" name="tri">
                    	<option value="Prix croissant">Prix croissant</option>
                        <option value="Prix décroissant">Prix décroissant</option>
                        <option value="Marque">Marque</option>
                    </select>
 
                </form>
                <div class="alignDroite">
                    <div id="tableauPagesLien">
                                            </div>
                    <img id="affichageVignettes" src="/images/affichage-vignettes.png" alt="Afficher les produits en vignettes" />
                    <img id="affichageListe" src="/images/affichage-liste.png" alt="Afficher les produits en liste" style="display: none;" />
                    <div class="outils">
                        <a href="#" title="Imprimer la page"><img src="/images/btn-print.png" alt="Imprimer la page" /></a>
                    </div>
 
                </div>
            </div>
            <div id="listeAjax">
            	<!-- C'est là qu'on insère le contenu HTML -->
				<div class="produit">
		<img src="../gestion-produit/images/SPO523.jpg" alt="Image du produit" />
		<div class="description">
		<h3><a href="#" title="Voir le détail" 
        	onclick="javascript:document.getElementById('IDproduit').value = 24;
            					document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;
                                voirDetail('listeAjax');"
            >SPOT 12V/20W SUR EMBASE INOX<br/><span>Réf. SPO523</span></a></h3>
 
		<p>Collection : ELEKTRA</p>
	</div>
	<form class="choix" name="listeChoix24" id="listeChoix24" action="#">
		<select id="za24" name="zl24">
			<option value="option 1">option 1&nbsp;</option>
			<option value="option 2">option 2&nbsp;</option>
			<option value="option 3">option 3&nbsp;</option>
 
		</select><br />
		<select id="zb24" name="zb24">
			<option value="Couleur 1">Couleur 1&nbsp;</option>
			<option value="Couleur 2">Couleur 2&nbsp;</option>
			<option value="Couleur 3">Couleur 3&nbsp;</option>
		</select><br />
		<select id="zc24" name="zc24">
 
			<option value="Texture 1">Texture 1&nbsp;</option>
			<option value="Texture 2">Texture 2&nbsp;</option>
			<option value="Texture 3">Texture 3&nbsp;</option>
		</select>
	</form>
	<div class="alignDroite">
		<form class="quantite" id="quantite24" name="quantite24" action="#">
 
			<a class="augmenterQuantite" href="#" onclick="javascript:augmenterQuantite('quantite-24');" title="Augmenter la quantité">&#9650;</a>
			<input type="text" id="quantite-24" name="quantite-24" value="1" />
			<a class="diminuerQuantite" href="#" onclick="javascript:diminuerQuantite('quantite-24');" title="Diminuer la quantité">&#9660;</a>
		</form>
		<div class="prix">
			<span class="prixInitial">399,00€<br /></span>
			17,89€
			<span class="ecoParticipation"><br />dont 0,30€ éco-part</span>
 
		</div>
		<div class="ajoutPanier">
			<a href="#" onclick="javascript:afficherConfirmation();
            					document.getElementById('IDcatalogue').value = 'Catalogue 1';
                                document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;                                
            					produitPanier('confirmation',24,'quantite-24');"
            title="Ajouter le produit au panier"><img src="/images/ajout-panier.png" alt="Ajouter le produit au panier" />Ajouter</a>
		</div>
	</div>
</div>
<div class="produit">
		<img src="../gestion-produit/images/INT523.jpg" alt="Image du produit" />
		<div class="description">
 
		<h3><a href="#" title="Voir le détail" 
        	onclick="javascript:document.getElementById('IDproduit').value = 25;
            					document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;
                                voirDetail('listeAjax');"
            >INTERRUPT.12V/20W SUR EMB.INOX<br/><span>Réf. INT523</span></a></h3>
		<p>Collection : ELEKTRA</p>
	</div>
	<form class="choix" name="listeChoix25" id="listeChoix25" action="#">
		<select id="za25" name="zl25">
			<option value="option 1">option 1&nbsp;</option>
			<option value="option 2">option 2&nbsp;</option>
 
			<option value="option 3">option 3&nbsp;</option>
		</select><br />
		<select id="zb25" name="zb25">
			<option value="Couleur 1">Couleur 1&nbsp;</option>
			<option value="Couleur 2">Couleur 2&nbsp;</option>
			<option value="Couleur 3">Couleur 3&nbsp;</option>
		</select><br />
 
		<select id="zc25" name="zc25">
			<option value="Texture 1">Texture 1&nbsp;</option>
			<option value="Texture 2">Texture 2&nbsp;</option>
			<option value="Texture 3">Texture 3&nbsp;</option>
		</select>
	</form>
	<div class="alignDroite">
 
		<form class="quantite" id="quantite25" name="quantite25" action="#">
			<a class="augmenterQuantite" href="#" onclick="javascript:augmenterQuantite('quantite-25');" title="Augmenter la quantité">&#9650;</a>
			<input type="text" id="quantite-25" name="quantite-25" value="1" />
			<a class="diminuerQuantite" href="#" onclick="javascript:diminuerQuantite('quantite-25');" title="Diminuer la quantité">&#9660;</a>
		</form>
		<div class="prix">
			<span class="prixInitial">399,00€<br /></span>
			19,02€
			<span class="ecoParticipation"><br />dont 0,30€ éco-part</span>
 
		</div>
		<div class="ajoutPanier">
			<a href="#" onclick="javascript:afficherConfirmation();
            					document.getElementById('IDcatalogue').value = 'Catalogue 1';
                                document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;                                
            					produitPanier('confirmation',25,'quantite-25');"
            title="Ajouter le produit au panier"><img src="/images/ajout-panier.png" alt="Ajouter le produit au panier" />Ajouter</a>
		</div>
	</div>
</div>
<div class="produit">
		<img src="../gestion-produit/images/SPO470.jpg" alt="Image du produit" />
		<div class="description">
 
		<h3><a href="#" title="Voir le détail" 
        	onclick="javascript:document.getElementById('IDproduit').value = 26;
            					document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;
                                voirDetail('listeAjax');"
            >SPOT 20 WATTS SUR EMBASE INOX<br/><span>Réf. SPO470</span></a></h3>
		<p>Collection : ELEKTRA</p>
	</div>
	<form class="choix" name="listeChoix26" id="listeChoix26" action="#">
		<select id="za26" name="zl26">
			<option value="option 1">option 1&nbsp;</option>
			<option value="option 2">option 2&nbsp;</option>
 
			<option value="option 3">option 3&nbsp;</option>
		</select><br />
		<select id="zb26" name="zb26">
			<option value="Couleur 1">Couleur 1&nbsp;</option>
			<option value="Couleur 2">Couleur 2&nbsp;</option>
			<option value="Couleur 3">Couleur 3&nbsp;</option>
		</select><br />
 
		<select id="zc26" name="zc26">
			<option value="Texture 1">Texture 1&nbsp;</option>
			<option value="Texture 2">Texture 2&nbsp;</option>
			<option value="Texture 3">Texture 3&nbsp;</option>
		</select>
	</form>
	<div class="alignDroite">
 
		<form class="quantite" id="quantite26" name="quantite26" action="#">
			<a class="augmenterQuantite" href="#" onclick="javascript:augmenterQuantite('quantite-26');" title="Augmenter la quantité">&#9650;</a>
			<input type="text" id="quantite-26" name="quantite-26" value="1" />
			<a class="diminuerQuantite" href="#" onclick="javascript:diminuerQuantite('quantite-26');" title="Diminuer la quantité">&#9660;</a>
		</form>
		<div class="prix">
			<span class="prixInitial">399,00€<br /></span>
			21,69€
			<span class="ecoParticipation"><br />dont 0,30€ éco-part</span>
 
		</div>
		<div class="ajoutPanier">
			<a href="#" onclick="javascript:afficherConfirmation();
            					document.getElementById('IDcatalogue').value = 'Catalogue 1';
                                document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;                                
            					produitPanier('confirmation',26,'quantite-26');"
            title="Ajouter le produit au panier"><img src="/images/ajout-panier.png" alt="Ajouter le produit au panier" />Ajouter</a>
		</div>
	</div>
</div>
<div class="produit">
		<img src="../gestion-produit/images/INT470.jpg" alt="Image du produit" />
		<div class="description">
 
		<h3><a href="#" title="Voir le détail" 
        	onclick="javascript:document.getElementById('IDproduit').value = 27;
            					document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;
                                voirDetail('listeAjax');"
            >INTERRUPTEUR SUR EMBASE INOX<br/><span>Réf. INT470</span></a></h3>
		<p>Collection : ELEKTRA</p>
	</div>
	<form class="choix" name="listeChoix27" id="listeChoix27" action="#">
		<select id="za27" name="zl27">
			<option value="option 1">option 1&nbsp;</option>
			<option value="option 2">option 2&nbsp;</option>
 
			<option value="option 3">option 3&nbsp;</option>
		</select><br />
		<select id="zb27" name="zb27">
			<option value="Couleur 1">Couleur 1&nbsp;</option>
			<option value="Couleur 2">Couleur 2&nbsp;</option>
			<option value="Couleur 3">Couleur 3&nbsp;</option>
		</select><br />
 
		<select id="zc27" name="zc27">
			<option value="Texture 1">Texture 1&nbsp;</option>
			<option value="Texture 2">Texture 2&nbsp;</option>
			<option value="Texture 3">Texture 3&nbsp;</option>
		</select>
	</form>
	<div class="alignDroite">
 
		<form class="quantite" id="quantite27" name="quantite27" action="#">
			<a class="augmenterQuantite" href="#" onclick="javascript:augmenterQuantite('quantite-27');" title="Augmenter la quantité">&#9650;</a>
			<input type="text" id="quantite-27" name="quantite-27" value="1" />
			<a class="diminuerQuantite" href="#" onclick="javascript:diminuerQuantite('quantite-27');" title="Diminuer la quantité">&#9660;</a>
		</form>
		<div class="prix">
			<span class="prixInitial">399,00€<br /></span>
			24,66€
			<span class="ecoParticipation"><br />dont 0,30€ éco-part</span>
 
		</div>
		<div class="ajoutPanier">
			<a href="#" onclick="javascript:afficherConfirmation();
            					document.getElementById('IDcatalogue').value = 'Catalogue 1';
                                document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;                                
            					produitPanier('confirmation',27,'quantite-27');"
            title="Ajouter le produit au panier"><img src="/images/ajout-panier.png" alt="Ajouter le produit au panier" />Ajouter</a>
		</div>
	</div>
</div>
<div class="produit">
		<img src="../gestion-produit/images/PRI470.jpg" alt="Image du produit" />
		<div class="description">
 
		<h3><a href="#" title="Voir le détail" 
        	onclick="javascript:document.getElementById('IDproduit').value = 28;
            					document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;
                                voirDetail('listeAjax');"
            >PRISE SUR EMBASE INOX<br/><span>Réf. PRI470</span></a></h3>
		<p>Collection : ELEKTRA</p>
	</div>
	<form class="choix" name="listeChoix28" id="listeChoix28" action="#">
		<select id="za28" name="zl28">
			<option value="option 1">option 1&nbsp;</option>
			<option value="option 2">option 2&nbsp;</option>
 
			<option value="option 3">option 3&nbsp;</option>
		</select><br />
		<select id="zb28" name="zb28">
			<option value="Couleur 1">Couleur 1&nbsp;</option>
			<option value="Couleur 2">Couleur 2&nbsp;</option>
			<option value="Couleur 3">Couleur 3&nbsp;</option>
		</select><br />
 
		<select id="zc28" name="zc28">
			<option value="Texture 1">Texture 1&nbsp;</option>
			<option value="Texture 2">Texture 2&nbsp;</option>
			<option value="Texture 3">Texture 3&nbsp;</option>
		</select>
	</form>
	<div class="alignDroite">
 
		<form class="quantite" id="quantite28" name="quantite28" action="#">
			<a class="augmenterQuantite" href="#" onclick="javascript:augmenterQuantite('quantite-28');" title="Augmenter la quantité">&#9650;</a>
			<input type="text" id="quantite-28" name="quantite-28" value="1" />
			<a class="diminuerQuantite" href="#" onclick="javascript:diminuerQuantite('quantite-28');" title="Diminuer la quantité">&#9660;</a>
		</form>
		<div class="prix">
			<span class="prixInitial">399,00€<br /></span>
			25,83€
			<span class="ecoParticipation"><br />dont 0,30€ éco-part</span>
 
		</div>
		<div class="ajoutPanier">
			<a href="#" onclick="javascript:afficherConfirmation();
            					document.getElementById('IDcatalogue').value = 'Catalogue 1';
                                document.getElementById('IDgamme').value = 1;
                                document.getElementById('IDfamille').value = 1;                                
            					produitPanier('confirmation',28,'quantite-28');"
            title="Ajouter le produit au panier"><img src="/images/ajout-panier.png" alt="Ajouter le produit au panier" />Ajouter</a>
		</div>
	</div>
</div>
            </div>
        </div>
		<!-- InstanceEndEditable -->
 
        <div class="ajusteur"></div>
        <div id="menuInformel">
        	<a href="../menu-informel/liens.php" title="">Liens</a>&nbsp;|&nbsp;<a href="../menu-informel/contact.php" title="">Nous contacter</a>&nbsp;|&nbsp;<a href="../menu-informel/mentions-legales.php" title="">Mentions l&eacute;gales</a>&nbsp;|&nbsp;<a href="../menu-informel/about.php" title="">A propos</a>&nbsp;|&nbsp;<a href="../menu-informel/plan-site.php" title="">Plan du site</a>
        </div>
 
    </div>
    <div id="piedDePage">
		<!-- InstanceBeginEditable name="piedPage" -->
        <form name="valeurs" id="valeurs" action="#" method="post" style="display: none;">
        	<input type="hidden" name="IDcatalogue" id="IDcatalogue" value="" />
            <input type="hidden" name="IDgamme" id="IDgamme" value="" />
            <input type="hidden" name="IDfamille" id="IDfamille" value="" />
            <input type="hidden" name="IDproduit" id="IDproduit" value="" />
            <input type="hidden" name="nbPages" id="nbPages" value="1" />
 
        </form>
		<!-- InstanceEndEditable -->    	
    	<p>SPI SOFTWARE - 53 rue Saint-Eloi - 12000 RODEZ - T&eacute;l : 05 82 95 09 28 - Fax : 09 72 22 38 08 - <a href="mailto:info-contact@spi-software.com" title="Contactez-nous">info-contact@spi-software.com</a> - <a href="http://www.spi-software.com/" title="Notre site officiel" target="_blank">www.spi-software.com</a></p>
    </div>
</div>
</body>
<!-- InstanceEnd --></html>

Bovino · 24/08/2011, 17h52

Et avant d'essayer de décortiquer tes 500 lignes de code, tu voudrais pas expliciter un peu

Citation:

Mais ces fonctions ajax ne marchent pas sous d'autres navigateurs

?
Ca veut dire quoi ?
Qu'est-ce que tu obtiens comme réponse, comme erreur etc. Ca aiderait un peu quand même

Emyleen · 24/08/2011, 17h56

Désolée de ne pas être plus claire XD Je voulais rester théorique en fait, pour savoir en quoi du Ajax pouvait etre compatible uniquement avec un seul navigateur.

En fait j'ai trouvé la source de mon bug, il se trouve que j'utilise une fonction filter() dans une de mes fonctions javascript :

Code :

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

1
2
3
4
5
6
function activeOngletFamille(id){
	Array.filter(document.getElementsByClassName('famille actif'), function(elem){
		elem.className = 'famille';
	});
	document.getElementById(id).className = 'famille actif';
}

Et cette fonction ne semble être acceptée que par Firefox. Mon problème n'était donc pas Ajax mais juste javascript

Il faut que je trouve une fonction équivalente acceptée par tout les navigateur

dommage car ça fonctionnait bien sous FF

Merci de m'avoir aidé à réfléchir ^^"

jreaux62 · 24/08/2011, 18h58

Bonjour,
voici ce qu'on peut lire ici :

Citation:

Description:
Javascript array filter() method creates a new array with all elements that pass the test implemented by the provided function.

Syntax:
array.filter(callback[, thisObject]);

Here is the detail of parameters:
- callback : Function to test each element of the array.
- thisObject : Object to use as this when executing callback.

Return Value:
Returns created array.

Compatibility:
This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present in other implementations of the standard.
To make it work you need to add following code at the top of your script:

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
if (!Array.prototype.filter)
{
  Array.prototype.filter = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();
 
    var res = new Array();
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this)
      {
        var val = this[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }
 
    return res;
  };
}

Si ca peut aider ...

Emyleen · 30/08/2011, 16h17

Merci jreaux62 pour ton message, je n'ai pas testé ta solution mais elle me parait intéressante.

Je poste juste pour donner la solution que j'ai appliqué

Code :

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

1
2
3
4
5
6
7
function activeOngletGamme(id){
	$(document).ready(function(){
  		$(".gamme.actif").removeClass('actif');
		$(".famille.actif").removeClass('actif');
  	});
	document.getElementById(id).className = 'gamme actif';
}

Voila, pas si compliqué que ça, mais je ne connais pas toutes les fonctions natives JavaScript ^^

En gros cette fonction va lire toute la page html et effectuer ce qu'on lui demande (ici c'est renommer les classes).

Merci encore à tous de m'avoir aidé

24/08/2011, 17h43	#4
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 128 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 128 Points : 7 269 Points : 7 269	Peut-on voir ton code HTML généré? A+.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email