Type Error : _items has no properties

Version imprimable

Bonjour,

J'ai un petit soucis en JS, j'ai créé deux scripts utilisant Prototype.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var Request = {
        send: function(url, callback) {
                new Ajax.Request(url, {
                        method: 'post',
                        asynchronous: 'true',
                        onSuccess: function(request) {
                                callback(request.responseXML);
                        },
                        onFailure: function(request) {
                                alert('Error ' + request.status + ' -- ' + resquest.statusText);
                        },
                        onException: function(request, exception) {
                                alert('Exception :' + exception);
                        }
                });
        }
}

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
 
Menu = Class.create({   
        XML_FILE: "xml/menu.xml",
 
        _items: [],
 
        initialize: function() {
                this._items = new Array();
        },
 
        load: function() {
                new Request.send(this.XML_FILE, this._loadCallBack);
        },              
 
        _loadCallBack: function(responseXML) {
                var items = responseXML.getElementsByTagName("item");
                for (var i = 0; i < items.length; i++) {
                        var item = new Menu.Item(items[i]);
                        this._items.push(item);
                }
                alert(this.toHtml());
        },
 
        toHtml: function() {
                var html = "<ul>";
                for (var i = 0; i < _items.length; i++) {
                        html += _items[i].toHtml();
                }
                html += "</ul>";
                return html;
        }
});
 
Menu.Item = Class.create({
        _title: null,
 
        initialize: function(itemXMLElement) {
                this._title = itemXMLElement.getAttribute("title");
        },
 
        getTitle: function() {
                return this._title;
        },
 
        toHtml: function() {
                return "<li><a href=\"#\">" + this._title + "</a></li>";
        }
});

Lorsque j'execute new Menu().load() j'obtient l'exception "Type Error : _items has no properties".
Il semblerai que this._items dans la fonction _loadCallBlack ne soit pas définie.
Alors que la fonction est une fonction interne de la classe Menu.

Comment resourdre le problème ?

Merci d'avance.
Gronono

23/11/2007, 10h19
E.Bzz

Bonjour,
c'est peut-être simplement la re-déclaration de variable, générée par ta boucle qui pollue ta fonction :

Code:

var item = new Menu.Item(items[i]);

Essaye déclarant item avant le for () ...

A+

Bonjour,

merci de ta réponse mais ça ne marche pas. Je viens d'essayer ça :

Code:

1
2
3
4
5
6
7
8
9
10
 
_loadCallBack: function(responseXML) {
                var ms = responseXML.getElementsByTagName("item");
                var item = null;
                for (var i = 0; i < ms.length; i++) {
                        item = new Menu.Item(ms[i]);
                        this._items.push(item);
                }
                alert(this.toHtml());
},

Je pense que c'est plus un problème d'espace de nommage. La variable _items ne doit pas corresponde avec celle déclarer dans Menu.

A+
Gronono

23/11/2007, 10h49
E.Bzz

Citation:

Envoyé par gronono

La variable _items ne doit pas corresponde avec celle déclarer dans Menu.

Bizarre, puisqu'elle fonctionne ailleurs ...
J'aurais plutôt tenté ça

Code:

item = Menu.Item(items[i]);

Sinon (si c'est bien un problème de portée de this) il faut peut être remplacer this par un paramètre passé à la fonction ...

A+
23/11/2007, 11h20
roro06
Bonjour

Peut-etre, en déclarant simplement :

Code:

_items: Array(),

en corrigeant :
Code:

1 2 initialize: function() { }

@roro06 : Ta méthode ne marche pas.

Sinon je viens de redéfinir mes "classes" pour passer un paramètre (ou plusieurs)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var Request = {
        send: function(url, callback, args) {
                new Ajax.Request(url, {
                        method: 'post',
                        asynchronous: 'true',
                        onSuccess: function(request) {
                                callback(request.responseXML, args) ;
                        },
                        onFailure: function(request) {
                                alert('Error ' + request.status + ' -- ' + resquest.statusText);
                        },
                        onException: function(request, exception) {
                                alert('Exception :' + exception);
                        }
                }); 
        }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
        load: function() {
                new Request.send(this.XML_FILE, this._loadCallBack, this);
        },
 
        _loadCallBack: function(responseXML, menu) {
                var ms = responseXML.getElementsByTagName("item");
                for (var i = 0; i < ms.length; i++) {
                        item = new Menu.Item(ms[i]);
                        menu._items.push(item);
                }       
                alert(menu.toHtml(menu));
        },  
 
        toHtml: function(menu) {
                var html = "<ul>";
                for (var i = 0; i < menu._items.length; i++) {
                        html += menu._items[i].toHtml();
                }
                html += "</ul>";
                return html;
        }

Maintenant, ca marche mais je perds l'intéret de faire une classe ?
N'y a-t-il pas une solution plus élégante ?

Merci,
Gronono