classe javascript et ie sur onclick [Fait]

**The_Pretender** · 08/10/2007, 18h02

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 :

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

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

'Utils' est indéfini

Utils correspond au nom de ma classe javascript.

Voici le code html :

Code :

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

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

**The_Pretender** · 10/10/2007, 09h11

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 ?

**E.Bzz** · 10/10/2007, 09h20

Bonjour,
as-tu essayé de déclarer

Code :

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

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+

**The_Pretender** · 10/10/2007, 21h58

Bonjour,

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

Code :

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

'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 :

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

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 :

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

**The_Pretender** · 11/10/2007, 11h40

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 ?

**denisC** · 11/10/2007, 16h44

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

**The_Pretender** · 11/10/2007, 22h20

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 :

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

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.

**denisC** · 11/10/2007, 22h43

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 :

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

**The_Pretender** · 11/10/2007, 23h04

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

Code :

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

this.initialize has no properties

Je ne comprend pas trop pourquoi ?

Dans le doute voici le code complet de mon js :

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
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!";
			}
		});
	}
});

classe javascript et ie sur onclick [Fait]

JavaScript

Discussions similaires

Partager

Partager