classe javascript et ie sur onclick

Version imprimable

Bonjour,

Apparemment je ne suis pas le seul à avoir un problème avec le onclic sous ie.
J'ai fait une recherche sur le forum mais je n'ais pas trouver de solution.

J'ai créer une classe en javascript à l'aide prototype.js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var Utils = Class.create(); Utils.prototype = { // construct initialize: function() { // private property /*function(name, sound) this.name = name; this.sound = sound;*/ }, // method updateBody: function(sWebPage) { /* create listener handler */ // du code } };
Sous firefox, tout fonctionne nickel mais sous IE j'ai à chaque fois cette erreur :

Code:

'Utils' est indéfini

Utils correspond au nom de ma classe javascript.

Voici le code html :

Code:

<a href="#" target="_self" class="a_footer" onclick="var oUtils = new Utils();oUtils.updateBody('plan_site.php');">[Plan du site]</a>

Un exemple concret qui plante : http://www.delfiweb.com puis cliquer sur le lien "Plan du site"

10/10/2007, 09h11
The_Pretender

Bonjour,

J'ai fais plusieurs test, il n'y a pas moyen que IE reconnaisse la classe Utils alors que tout fonctionne correctement sous Firefox.

Je me demandais, est ce que cela peut venir d'une balise html ou autre dans le code source qui génerait IE ?
10/10/2007, 09h20
E.Bzz

Bonjour,
as-tu essayé de déclarer

Code:

var oUtils = new Utils();

dans le <head> de la page ?
Sinon : problème (potentiel, uniquement) de multi-déclaration de la variable, si on clique plusieurs fois ...
:?

A+

Bonjour,

J'ai essayé ce que tu préconisais, toujours la même erreur :

Code:

'Utils' est indéfini

Est ce que quelqu'un a déjà rencontré ce problème ?
Cela peut -il venir du javascript qui n'est pas chargé ?

Dans l'ordre il y a :
Code:

1 2 3 4 5 6 <head> //---- <script type="text/javascript" src="include/js/prototype.js"></script> <script type="text/javascript" src="include/js/utils.js"></script> </head> <body>
Je charge le js de prototype, puis dans utils, je crée la classe js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var Utils = Class.create(); Utils.prototype = { // construct initialize: function() { // private property /*function(name, sound) this.name = name; this.sound = sound;*/ }, // method updateBody: function(sWebPage) { /* create listener handler */ } };

11/10/2007, 11h40
The_Pretender

Bonjour,

Est ce que quelqu'un peut m'expliquer comment utiliser les classes en javacsript et surtout la syntaxe pour qu'elles soient reconnues par IE?

Car mon code fonctionne nickel avec Firefox.
Faut-il utiliser une fonction javascript qui précharge les scripts externes pour IE ?
11/10/2007, 16h44
denisC

Citation:

Envoyé par The_Pretender

Est ce que quelqu'un peut m'expliquer comment utiliser les classes en javacsript et surtout la syntaxe pour qu'elles soient reconnues par IE?

http://t-templier.developpez.com/tut...vascript-poo1/

Normalement, ça devrait marhcer sous IE. Par contre, ce qui m'étonne, c'est que tu utilises prototype pour déclarer la classe (Class.create) et qu'en suite tu violentes le prototype de la classe.

A mon avis, tu devrais utiliser Object.extend pour ajouter des méthodes à la classe. Là en utilisant directement le prototype, tu risques de casser ce que prototype a mis en place au moment de la définition de la classe.....

Merci pour ton aide.

J'ai lu entièrement le tutoriel sur le javascript.
J'ai retravailler ma classe en la créant de ce style :
Code:

1 2 3 4 5 6 7 8 9 10 function MaClasse(parametre1, parametre2) { this.attribut1 = parametre1; this.attribut2 = parametre2; } MaClasse.prototype = { methode: function() { alert("Attributs: " + this.attribut1 + ", " + this.attribut2); } }
Il s'avère que tout fonctionne nickel maintenant.
Par contre, j'ai du mal à situer mon erreur exactement, peut être un problème au niveau de la déclaration de ma classe avec prototype.
Le principal, c'est que ca fonctionne.

Citation:

Envoyé par The_Pretender

Par contre, j'ai du mal à situer mon erreur exactement, peut être un problème au niveau de la déclaration de ma classe avec prototype.

Je pense que ton erreur venait de l'utilisation de la syntaxe issue de la bibliothèque prototype pour déclarer la classe et qu'ensuite tu déclarais les méthodes sans passer par la syntaxe spécifique de la bibliothèque prototype (en utilisant la propriété prototype).

Essaye :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var Utils = Class.create(); Object.extend(Utils, { // construct initialize: function() { // private property /*function(name, sound) this.name = name; this.sound = sound;*/ }, // method updateBody: function(sWebPage) { /* create listener handler */ } });
Ca devrait aussi marcher, car ça sera à 100% dans la bibliothèque prototype.

La difficulté c'es tla différence entre la bibliothèque prototype et l'attribut prototype :aie:

J'ai essayé ton code afin d'être totalement compatible avec la bibliothèque prototype mais j'ai une erreur :

Code:

this.initialize has no properties

Je ne comprend pas trop pourquoi ?

Dans le doute voici le code complet de mon js :

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
var Utils = Class.create();
 
Object.extend(Utils, 
{
	// construct
	initialize: function()
	{/*this.attribut1 = parametre1;*/
		/* create listener handler */
		var myGlobalHandlers = 
		{
			onCreate: function()
			{
				/* delete content of div */
				while ( $('contentbody').childNodes.length>0 )
				  $('contentbody').removeChild( $('contentbody').firstChild );
 
				if (!$('chargement'))
				{
					//new Insertion.Top('contentbody', '<div id="chargement" style="text-align:left; color: #0066FF;font-weight:bold;">Chargement de la page en cours...</div>');
					/*var indicateurPic = document.createElement('img');
					Element.extend(indicateurPic);
					indicateurPic.id = 'chargementPic';
					indicateurPic.src = 'images/divers/loading.gif';
					$('contentbody').appendChild(indicateurPic);*/
 
					var indicateur = document.createElement('div');
					Element.extend(indicateur);
					indicateur.id = 'chargement';
					indicateur.addClassName('loading_progress');
					indicateur.innerHTML = 'Chargement de la page en cours...';
					$('contentbody').appendChild(indicateur);
				}
				Element.show('chargement');
			},
 
			onComplete: function()
			{
				if(Ajax.activeRequestCount == 0)
					Element.hide('chargement');
			}
		};
		Ajax.Responders.register(myGlobalHandlers);	
	},
 
	// method
	updateBody: function(sWebPage) 
	{
		// this.attribut1
 
		/* get the external page */
		new Ajax.Request(sWebPage,
		{ 
			method: 'POST',
			parameters: 
			{
				come: 'true'
			},
			onSuccess: function(res)
			{
				Element.setStyle('contentbody',{display:'none'});
 
				$('contentbody').innerHTML = res.responseText;
 
				// Make the transion longer by adding options.
				Effect.BlindDown('contentbody', {duration:3});
 
				/* excecute code javascript */
				var sCodeJavascript = document.getElementsByTagName("script");
				// for all tag javascript, excecute the code
				for (var i = 0; i < sCodeJavascript.length; i++) 
				{ 
					var contentScript = sCodeJavascript[i];
					if (contentScript.src && contentScript.src != "") z = 1;
					else window.eval(contentScript.innerHTML);
				}// en for
			},
			onFailure: function()
			{
				$('contentbody').innerHTML = "Erreur lors du chargement de la page!";
			}
		});
	}
});