FullCalendar - Méthode 'destroy' ou comment désinstancier

Version imprimable

Bonjour à tous,

J'ai un petit soucis que je n'arrive pas du tout à régler...

Je vous explique, je créé dynamiquement des calendrier grâce à la librairie FullCalendar. Donc j'ai créé une class qui s'appelle "MonCalendrier", par exemple.

Les X calendriers s'ouvrent dans une popup modal. Lorsque je ferme ce dialogue, je voudrais pouvoir détruire l'instance actuelle des X calendriers qui se trouvent dans ma popup (normal, s'il y en a 50 de calendriers, l'utilisateur peut plus rien faire :P).

J'ai donc fait ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 //Ce close c'est donc le callback du popup jquery qui sera invoqué une fois le dialogue fermé. close: function(){ $('.fullcalendarCalendrier').each( function(){ $(this).fullCalendar('destroy'); $(this).fullCalendar = null; } ); $(this).dialog('destroy'); }
Donc comme vous pouvez le voir, j'ai donc sélectionné les objets par class, et pour chaque objet j'aimerais pouvoir le détruire. Je vous ais donc mis les deux lignes que j'ai testés. Mais aucune des deux ne fonctionne.

Merci pour vos idées et aide

Cordialement

Tidus

Code:

1
2
3
4
5
6
7
8
9
close:
    function(){
          $('.fullcalendarCalendrier').each(
               function(){
                     $(this).remove()
                                }
          );
          $(this).dialog('destroy');
    }

22/12/2011, 17h27
tidus_6_9_2

Ba disons que si je fais ça, ça me supprime uniquement la DIV, et non l'instance de l'objet. Cette dernière restes toujours en mémoire.

Es-ce que je me trompe ?

Car si c'est le cas, j'ai pas mal de code à revoir :aie:

Merci SpaceFrog :ccool:
22/12/2011, 17h30
SpaceFrog

ben pour le savoir tente un appel à l'objet après le remove() ;)
22/12/2011, 17h40
tidus_6_9_2

Alors j'ai fait le test, et merci pour l'idée :) je n'y avait pas du tout songé.

Mais le problème est toujours là ^^, l'objet fullcalendar est toujours présent sur ma page :aie:

Car en faite ce que je fais, c'est qu'un personne peut sélectionner un intervalle de dates d'au maximum 365 jours. Donc une fois qu'il a sélectionné son intervalle (pour mes tests du 01/01/11 au 31/12/11) cela crée un calendrier par mois. Ensuite l'utilisateur clique sur un bouton qui ouvre une popup avec à l'intérieur ces 12 calendriers.

Maintenant le problème c'est que lorsque je quitte la popup si je ne détruit pas du tout l'instance du calendrier, je ne pourrais cliquer sur le bouton qui ouvre la popup que 2-3 fois avant qu'il ne cesse de fonctionner complètement. (Donc je penses que c'est du au fait de la quantité d'objet instancié).

De plus, après avoir supprimé avec .remove(), .('destroy') ou encore = null, je supprimer complètement le contenus HTML.

Donc normalement, je n'ai plus aucun objet dans la popup lors de la fermeture. Sauf qu'il continue à me garder en mémoire le calendrier pour une X raison que je ne connais pas 8O

Merci encore

la doc à pourtant l'aire de dire que la methode destroy reinitialise la balise à son état d'origine ?

http://arshaw.com/fullcalendar/docs/display/destroy/

Code:

1
2
3
4
5
6
7
8
9
10
 
close:
    function(){
          $('.fullcalendarCalendrier').each(
               function(){
                     $(this).fullCalendar('destroy').remove()
                                }
          );
          $(this).dialog('destroy');
    }

???

22/12/2011, 20h31
tidus_6_9_2

Oui j'ai déjà regardé la doc et même l'état actuelle du plugin histoire de voir si il y avait un bogue ou quelque chose...

Mais je penses que ça doit probablement venir de moi... Sauf que je ne vois pas du tout d'où cela pourrait venir...

Je met le bout de mon code demain matin histoire que tu puisses voir par toi même si j'ai fait une grosse boulette ailleurs ^^

Je te remercie pour ton aide :)

Bonjour à tous,

Voici mon bout de code comme promis :)

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
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
$("#calendrier_supprimer").click(
	function(){
//Un requête qui me renvoit un fichier html
		$.ajax({
			url:'/NouvelleInterface/dialoguedates.html',
			async:false,
			success:
				function(data){
					var Debut = '';
					var Fin = '';
					if(($('#date_du').val()!='')&&($('#date_au').val()!='')){
						Debut = $('#date_du').val();
						Fin = $('#date_au').val();
					}
					
					if((Debut!='')&&(Fin!='')){
//On stock le contenus html dans une div
						$('#tmp_dial').html(data);
						var hauteur = $(window).height()-150;
						var longueur = $(window).width()-150;
						$("#dial_dates").dialog('destroy');
						$("#dial_dates").dialog({
							title:'S&eacute;lection des dates',
							autoOpen:false,
							height:hauteur,
							width:longueur,
							modal:true,
							buttons:{
								"Valider":
									function(){
									},
								"Annuler":
									function(){
										$(this).dialog('destroy');
									}
							},
							close:
								function(){
									//ICI c'est le point critique à mon avis... C'est ici qu'on supprime les instances du calendrier
												$('#intervalle_calendrier .fullcalendarCalendrier').each(
										function(){
											$(this).fullCalendar('destroy');
											$(this).remove();
											$(this).fullCalendar.remove;
											$(this).fullCalendar = null;
										}
									);
									$('#tmp_dial').html('');
									$(this).dialog('destroy');
								}
						});
//On a instancié la popup
//On ouvre la popup
						$("#dial_dates").dialog('open');
//On vide le tableau qui se trouve dans la DIV ou on a stocké le code HTML (donc dans $('#tmp_dial'))
						$('#intervalle_calendrier').html('');

//ICI on va faire un calcul qui va nous permettre de récupérer le mois de l'intervalle des dates. On accèpte au maximum que une année d'intervalle.
						var decoupeDeb = Debut.split('/');
						var decoupeFin = Fin.split('/');
						var MoisCourant = (decoupeDeb[1]-1);
						var NomMois = '';
						var annee = decoupeFin[2]-1;
						var startboucle = (decoupeDeb[1]-1);
						var finishboucle = (decoupeFin[1]-1);
						var erreur = false;
						
						if(decoupeDeb[2]!=decoupeFin[2]){
							var minus = decoupeFin[2]-decoupeDeb[2];
							if(minus>1){
								erreur = true;
							}else{
								finishboucle = finishboucle+(startboucle+(12-startboucle));
							}
						}else{
							if(finishboucle<startboucle){
								finishboucle = startboucle+(12-startboucle)+1;
							}
						}
						
						if(erreur==false){
							
							var LigneMax = 0;
							var LigneText = '';
							var booleen = true;
							
							//On boucle sur les X mois d'intervalle
							for(var i=startboucle;i<=finishboucle;i++){
//Permet de récupérer le nom du mois
								NomMois = NomMoisSelonDate(MoisCourant);
//Permet de repartir à 0 quand le mois courant arrive à 11 ET nous permet de passer à l'année suivante aussi.
								if(MoisCourant>=11){
									MoisCourant = 0;
								}else{
									if(MoisCourant==0){
										annee++;
									}
									MoisCourant++;
								}
								//Il y a au maximum 4 calendriers par ligne
								if(LigneMax<=3){
//On crée le contenus HTML du tableau
									if((LigneMax==0)&&(booleen)){
										LigneText = '<tr>\n';
										booleen = false;
									}
									LigneText = LigneText+'<td><h3>'+NomMois+' '+annee+'</h3><div class="fullcalendarCalendrier" style="width:200px;"></div></td>';
								}else{
									LigneText = LigneText+'</tr>\n';
									LigneText = LigneText+'<tr>\n';
									LigneText = LigneText+'<td><h3>'+NomMois+' '+annee+'</h3><div class="fullcalendarCalendrier" style="width:200px;"></div></td>';
									LigneMax = 0;
								}
								
								LigneMax++;
							}
							//On stock le contenus HTML dans le tableau
							$('#intervalle_calendrier').append(LigneText);
//On instancie les différents calendrier						
							$('.fullcalendarCalendrier').fullCalendar({
									allDaySlot:false,
									theme:true,
									height:0,
									firstDay:1,
									selectable:false,
									editable:false,
									defaultView:'month',
									header:false,
									dayClick:
										function(date,allDay,jsEvent,view){
										}
							});
						}
					}
				}
		});
		return false;
	}
);

Faites moi signe si vous voyez quelconque dysfonctionnement ou anomalie :)

Merci d'avance pour votre aide

[EDIT] Je sais que pour l'intervalle des dates c'est pas encore le top, mais c'est vraiment pas le problème au cas ou. Je ne change pas du tout les dates de début et de fin (donc le champ #date_du et #date_au) lorsque je clique sur le bouton qui m'ouvre la popup avec les calendriers. Et ce dernier ne fonctionne que 2-3 fois, pas plus....

23/12/2011, 14h45
tidus_6_9_2
Alors j'ai résolus mon problème en quelques sorte...

LE gros problème c'est ceci :
Code:

1 2 3 4 5 6 7 8 9 $.ajax({ url:'/NouvelleInterface/dialoguedates.html', async:false, success: function(data){ //CODE } });
En faite cela fait déconner le click sur le bouton qui ouvre la popup pour je ne sais trop quel raison... J'ai donc essayé avec .load, mais le résultat est le même.

Es-ce qu'il y aurait un autre moyen afin d'appeler une page html extérieur pour ensuite l'insérer dans la page ?

Car je ne vois pas d'autre moyens que .get, .ajax et .load pour réussir à faire ça.

Merc
23/12/2011, 17h42
danielhagnoul

:salut:

En général, "async:false,", c'est mal ! :aie:
23/12/2011, 17h57
tidus_6_9_2

Oui je sais :)

C'est temporaire, le temps de développer cette partie, l'asynchrone viendra juste après :) Mais si ça fonctionne déjà pas en synchrone tu imagines la misère que sera l'asynchrone :-P

:pastaper:
23/12/2011, 18h02
danielhagnoul

Imposer le "synchrone" peut aussi provoquer un blocage. Je ne dis pas que c'est le cas ici, mais c'est du déjà vu.