cet objet n'est pas une fonction

Version imprimable

Bonjour

j'essaye deséspéremment de développer un slideshow en jquery... J'ai un problème avec l'orienté objet que j'ai du mal à cerner ici:

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
 
 
$(document).ready(function(){
  $(".slideshow").SlideShowManager();
});
 
jQuery.fn.SlideShowManager = function() {
  return this.each(function(){
    var slideshow = new SlideShow(this);
    $.extend(this, slideshow);
  });
};
 
 
function SlideShow(base){
 
  this.currentPosition = 0;
  this.slideWidth = 560;
  this.slides = $('.slide', base);
  this.numberOfSlides = this.slides.length;
 
  this.slides.wrapAll('<div class="slideInner"></div>').css({'float':'left','width':this.slideWidth});
 
  $('.slidesContainer',base).css('overflow', 'hidden');
  $('.slideInner',base).css ('width', this.slideWidth * this.numberOfSlides);
  $(base)
	.prepend('<span class="leftControl">Move left</span>')
	.append('<span  class="rightControl">Move right</span>');
 
  $('.leftControl',base).bind('click', this.onLeftControlClick);
  $('.rightControl',base).bind('click', this.onRightControlClick);
 
  this.manageControls();
}
 
SlideShow.prototype.manageControls = function(){
  if (this.currentPosition == 0){
    $('.leftControl', this).hide();
  }
  else
  {
    $('.leftControl', this).show();
  }
 
  if (this.currentPosition == (this.numberOfSlides - 1)){
    $('.rightControl', this).hide();
  }
  else
  {
    $('.rightControl', this).show();
  }
}
 
SlideShow.prototype.animate = function(){
  alert('Anime');
  $('.slideInner', this).animate({ 'marginLeft' : this.slideWidth * (-this.currentPosition)});
}
 
SlideShow.prototype.onLeftControlClick = function(){
  alert('Hit left');
  this.currentPosition++;
  this.manageControls();
  this.animate();
}
 
SlideShow.prototype.onRightControlClick = function(){
  alert('Hit Right');
  this.currentPosition--;
  this.manageControls();
  this.animate();
}

En effet, lorsque onRightControlClick() est exécutée, j'ai l'alert "hit right" pis après firebug me dit:

Citation:

this.manageControls is not a function
file:///home/goundy/WebDev/JS_Training/slide/slideshow.js
Line 68

Ca me fait pareil lorsque je clique sur le left donc, comment se fait-il qu'il me dise cela ?
Pourtant j'ai crée un objet à part et j'arrive à appeler des méthodes dans des méthodes,

voici la structure du html au cas ou ca pourrait aider:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  <div class="slideshow">
    <div class="slidesContainer">
      <div class="slide">
              textes + images... etc
      </div>
      <div class="slide">
              textes + images... etc
      </div>
      <div class="slide">
              textes + images... etc
      </div>
    </div>
  </div>

Merci d'avance

20/01/2010, 10h31
Sourrisseau

Brievement
dans tes fonctions onLeftControlClick et Right tu fais référence a this qui est en fait un objet de type SlideShow. Quand tu cliques sur un bouton ( gauche droite ) tu as bien mémoriser une fonction mais c'est un objet jquery qui l'appelle . D'ailleurs - this.currentPosition- n'existe pas non plus. Pour connaitre les propriétés de this tu peux faire un debug du type :
Code:

1 2 3 4 5 6 7 SlideShow.prototype.onLeftControlClick = function(){ for( k in this) console.log(k); this.currentPosition++; this.manageControls(); this.animate(); }
C'est une difficulté bien connu de javascript. Comprendre un espace de nommage et les closures sont des notions importantes en javascript pour faire le genre de manip que tu veux faire.

Pour la solution a ton problème , il faudrait que j'ai un peu de temps et je ne te garantie rien avant 2 jours. Sinon tu as un tutto super clair sur la manière la plus simple de faire des plugins en jquery.

Salut,

Merci pour ta réponse Sourrisseau
Cependant, j'ai du mal à comprendr epourquoi mon code ne marche pas, car j'ai testé, à part, avec un objet:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function Base(value){ if (typeof Base.Counter == 'undefined') Base.Counter = 1; else Base.Counter++; this.value = value; } Base.prototype.getValue = function (){ this.twitt(); return this.value; } Base.prototype.setValue = function (newVal){ this.value = newVal; } Base.prototype.twitt = function (){ alert(this.value); }
Je l'utilise par exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript"> var b = new Base (10); document.write(Base.Counter + "<br/>"); b.getValue(); var b2 = new Base (3); document.write(Base.Counter + "<br/>"); var b3 = new Base (3); var b4 = new Base (8); var b65 = new Base (329); document.write(Base.Counter + "<br/>"); b2.getValue(); b.twitt(); </script>
Et ca fonctionne à merveille, les variables ET les fonctions sont bien existantes.... etc
J'ai lu 3 tutos sur les plugins mais bon je vois pas exactement le point auquel tu fais références, je vais tout de même revisiter le lien que tu m'as passé

Merci :)

EDIT:

J'ai déjà lu ce tutorial en fait, et ils font pas du tout ce que je veux voir, je dis ca dans le sens ou moi lorsque je récupère mes composants avec: $('.slideshow').manage() je prend chaque composant (div) et je lis ses children pour y faire des trucs également.
Tout ce que fait le tuto c'est appliquer un style CSS à tous div qu'il récupère, il ne va pas chercher les children... Coincé :p

Bonsoir.

Je n'ai pas la totalité du code, impossible donc de tester mes modifications :

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
84
85
86
87
88
<script type="text/javascript">
    (function($){
        function SlideShow(base){
            this.currentPosition = 0;
            this.slideWidth = 560;
            this.slides = $('.slide', base);
            this.numberOfSlides = this.slides.length;
 
            // attention jQuery peut modifier this
            var self = this;
 
            // j'ai réécrit ce passage pour le plaisir,
            // mais sous cette forme il demande jQuery 1.4 !!
            this.slides.wrapAll(
                $("<div/>", {
                    class: "slideInner",
                    css: {
                        float:"left",
                        width:self.slideWidth
                    }
                };
            );
 
            $('.slidesContainer',base).css('overflow', 'hidden');
            $('.slideInner',base).css('width', self.slideWidth * self.numberOfSlides);
 
            $(base)
            .prepend('<span class="leftControl">Move left</span>')
            .append('<span  class="rightControl">Move right</span>');
 
            $('.leftControl', base).bind('click', self.onLeftControlClick);
            $('.rightControl', base).bind('click', self.onRightControlClick);
 
            this.manageControls();
        }
 
        SlideShow.prototype.manageControls = function(){
            if (this.currentPosition == 0){
                $('.leftControl', this).hide();
            }
            else
            {
                $('.leftControl', this).show();
            }
 
            if (this.currentPosition == (this.numberOfSlides - 1)){
                $('.rightControl', this).hide();
            }
            else
            {
                $('.rightControl', this).show();
            }
        }
 
        SlideShow.prototype.animate = function(){
 
            // attention jQuery peut modifier this
            var self = this;
 
            alert('Anime');
            $('.slideInner', this).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
        }
 
        SlideShow.prototype.onLeftControlClick = function(){
            alert('Hit left');
            this.currentPosition++;
            this.manageControls();
            this.animate();
        }
 
        SlideShow.prototype.onRightControlClick = function(){
            alert('Hit Right');
            this.currentPosition--;
            this.manageControls();
            this.animate();
        }
 
        $.fn.SlideShowManager = function() {
          return this.each(function(){
            $.extend(this, new SlideShow(this));
          });
        };
    })(jQuery);
 
    $(function(){
        $(".slideshow").SlideShowManager();
    });
</script>

23/01/2010, 23h25
Goundy

danielhagnoul merci pour ta réponse :)

J'ai appliqué les modifications mais ca ne marche toujours pas.
En fait le problème est que lorsque managecontrols est appelée via le constructeur (this.manageControls()) elle est bien exécutée... Plus tard, lorsque l'utilisateur clique sur un bouton, l'évenement OnClick donc est exécuté et dedans je refais: this.manageControls et c'est là qu'il me dit: this.manageControls n'est pas une fonction
Donc pourquoi elle n'est plus reconnue ?

Merci encore :)

Bonsoir.

J'ai oublié des ;

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
84
85
86
87
88
<script>
	(function($){
		function SlideShow(base){
			this.currentPosition = 0;
			this.slideWidth = 560;
			this.slides = $('.slide', base);
			this.numberOfSlides = this.slides.length;
 
			// attention jQuery peut modifier this
			var self = this;
 
			// j'ai réécrit ce passage pour le plaisir,
			// mais sous cette forme il demande jQuery 1.4 !!
			this.slides.wrapAll(
				$("<div/>", {
					class: "slideInner",
					css: {
						float:"left",
						width:self.slideWidth
					}
				};
			);
 
			$('.slidesContainer',base).css('overflow', 'hidden');
			$('.slideInner',base).css('width', self.slideWidth * self.numberOfSlides);
 
			$(base)
			.prepend('<span class="leftControl">Move left</span>')
			.append('<span  class="rightControl">Move right</span>');
 
			$('.leftControl', base).bind('click', self.onLeftControlClick);
			$('.rightControl', base).bind('click', self.onRightControlClick);
 
			this.manageControls();
		}
 
		SlideShow.prototype.manageControls = function(){
			if (this.currentPosition == 0){
				$('.leftControl', this).hide();
			}
			else
			{
				$('.leftControl', this).show();
			}
 
			if (this.currentPosition == (this.numberOfSlides - 1)){
				$('.rightControl', this).hide();
			}
			else
			{
				$('.rightControl', this).show();
			}
		};
 
		SlideShow.prototype.animate = function(){
 
			// attention jQuery peut modifier this
			var self = this;
 
			alert('Anime');
			$('.slideInner', this).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
		};
 
		SlideShow.prototype.onLeftControlClick = function(){
			alert('Hit left');
			this.currentPosition++;
			this.manageControls();
			this.animate();
		};
 
		SlideShow.prototype.onRightControlClick = function(){
			alert('Hit Right');
			this.currentPosition--;
			this.manageControls();
			this.animate();
		};
 
		$.fn.SlideShowManager = function() {
		  return this.each(function(){
			$.extend(this, new SlideShow(this));
		  });
		};
	})(jQuery);
 
	$(function(){
		$(".slideshow").SlideShowManager();
	});
</script>

J'ai compris ! :yaisse2:

Vous avez absolument besoin de jQuery 1.4, car vous devez utilisez la nouvelle fonction $.proxy().

$.proxy() est particulièrement utile pour lier un gestionnaire d'événement à un élément dont le contexte est dirigé vers un objet différent.

$.proxy() retourne une nouvelle fonction qui aura toujours un contexte particulier.

$.proxy(fonction, contexte)

fonction dont le contexte sera changé.
contexte pour lequel le champ d'application de la fonction doit être défini.

Pour arriver à ce résultat, j'ai utilisé le code de test suivant :

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
	</style>
	<script charset="utf-8" src="../lib/jquery-1.4.min.js"></script>
<script>
	(function($){
		function SlideShow(base){
			console.log("SlideShow this : " + this);
			console.log("SlideShow base : " + base);
 
			var self = this;
 
			$('.leftControl', base).bind('click', $.proxy(self.onLeftControlClick, self));
			$('.rightControl', base).bind('click', $.proxy(self.onRightControlClick, self));
 
			this.manageControls();
		}
 
		SlideShow.prototype.manageControls = function(){
			alert("manageControls OK");
		};
 
		SlideShow.prototype.animate = function(){
			alert("animate OK");
		};
 
		SlideShow.prototype.onLeftControlClick = function(){
			console.log("onLeftControlClick this : " + this);
 
			this.manageControls();
			this.animate();
		};
 
		SlideShow.prototype.onRightControlClick = function(){
			console.log("onRightControlClick this : " + this);
 
			this.manageControls();
			this.animate();
		};
 
		$.fn.SlideShowManager = function() {
		  return this.each(function(){
			console.log(this);
 
			$.extend(this, new SlideShow(this));
 
			console.log(this);
		  });
		};
	})(jQuery);
 
	$(function(){
		$("#affiche").SlideShowManager();
	});
</script>
</head>
<body>
	<div id="conteneur">
		<div id="affiche">
			<button class="leftControl">left</button>
			<button class="rightControl">right</button>			
		</div>
	</div>
</body>
</html>

Par rapport au code de mon message précédent, il faut donc modifier les deux lignes suivantes :

Code:

1
2
$('.leftControl', base).bind('click', $.proxy(self.onLeftControlClick, self));
$('.rightControl', base).bind('click', $.proxy(self.onRightControlClick, self));

24/01/2010, 08h25
Sourrisseau

Merci pour

ce travail de recherche et ce résultat . Je n'ai pas eut le temps encore d'étudier cette fonction proxy() mais visiblement cela ouvre de très belles perspectives. Jquery 1.4 propose quelques très belles innovations . Merci encore danielhagnoul !!!

danielhagnoul je ne sais comment vous remercier ! Vous êtes un monstre :P (dans le bon sens du terme éventuellement :))

Cependant, j'ai un dérnier tout petit problème. C'est avec animate:
A la base j'avais ceci:
Code:

1 2 3 4 $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) });
Donc slideInner fût un id et non une classe, et ca fonctionnait parfaitement.

Maintenant j'ai:
Code:

1 2 3 4 5 6 SlideShow.prototype.animate = function(){ var self = this; $('.slideInner', self).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)}); }
Et là il n'y a plus d'animation bizarrement... pourtant self.slideWidth et self.currentPosition ont les bonnes valeurs (j'ai debogué).

Une dernière idée quant à l'animation ? Car pour l'instant tout marche sauf que ca ne change pas de solide étant donné que l'animation ne passe plus

Merci encore pour tout

EDIT:
le code d'animate:
Code:

1 2 3 4 5 SlideShow.prototype.animate = function(){ var self = this; $('.slideInner', self).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)}); }
J'ai debug un peu et je me suis rendu compte que même si je change le css plutôt qu'animer:
Code:

1 2 3 $('.slideInner', self).css({ 'marginLeft' : self.slideWidth*(-self.currentPosition) });
Rien n'est modifié, j'utilise Firebug et je vois que sur le script d'avant (avec les ids) ca se modifiait, mais dans mon code non... Pourtant je récupère le bon élément et tout.... Bizarre

EDIT:

J'ai résolu le problème en stoquant le inner:

Code:

this.inner = $('.slideInner',base);

et donc j'annime directement celui ci

Code:

self.inner.animate()

ca veut donc dire que dans la fonction animate() l'instruction $('.slideInner', self) ne rend pas le bon élément :)
Une idée pour rester propre ?

Bonsoir.

J'ai repris le code que vous avez donné au départ :

Code:

1
2
3
4
5
6
7
8
SlideShow.prototype.animate = function(){
 
    // attention jQuery peut modifier this
    var self = this;
 
    alert('Anime');
    $('.slideInner', this).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
};

Mais l'élément HTML de classe .slideInner ne peut pas être dans this qui représente l'objet SlideShow. Il est sans doute incorporé dans base ?

Si c'est le cas :

Code:

1
2
3
4
5
 
function SlideShow(base){
   this.base = base;
   ...
}

et alors :

Code:

1
2
3
4
5
6
7
8
SlideShow.prototype.animate = function(){
 
    // attention jQuery peut modifier this
    var self = this;
 
    alert('Anime');
    $('.slideInner', this.base).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
};

24/01/2010, 20h30
Goundy
Oh danielhagnoul ....
Même si je fais un extend ? cf.:
Code:

1 2 3 4 5 jQuery.fn.SlideShowManager = function() { return this.each(function(){ $.extend(this, new SlideShow(this)); }); };
Je pensais que ca permettait de "merger" les objets ensemble.... Donc c'est ca ma bétise :p

Merci !
24/01/2010, 21h24
danielhagnoul
Je dois dire que je n'ai jamais eu à utiliser $.entend et que je n'ai pas compris ce que vous vouliez faire en l'utilisant.

Documentation : http://api.jquery.com/jQuery.extend/

Si on écrit :
Code:

1 2 3 4 5 6 7 8 $.fn.SlideShowManager = function() { return this.each(function(i, item){ var obj = $.extend({}, this, new SlideShow(item)); console.log("plugin obj = " + obj); }); };
alors, on voit que obj contient tout, mais ce n'est d'aucune utilité dans SlideShow.
25/01/2010, 00h47
Goundy

Merci beaucoup !
Problème donc résolu :)