Bonjour à tous,



Je viens vers vous pour un problème avec la méthode connect() de jsPlumb. Un problème étrange se pose en face de moi et commence à vivement m'agacer !

Voici le code en question et je vous commente le problème ensuite.


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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
$(document).ready(function() {
 
	//recup du json et placement des divs
	generateDiagram(75674);		//On passe en dur ce Flight Number pour le test actuel
 
	var instance = jsPlumb.getInstance();
 
	var defaultOptions = {
		Connector: [ "Bezier", { curviness:100 }],
		PaintStyle: { strokeStyle: "#5b9ada", lineWidth: 2 },
		ConnectorStyle: [{
			lineWidth: 3,
			strokeStyle: "#5b9ada"
		}],
		ConnectionsDetachable:false
	};
 
	instance.importDefaults(defaultOptions);
	//On connecte les différents blocs que l'on vient de créer
	connectDiagram(instance);
 
	$("#chart").on("click", ".afterSide", function(){
		var FlId = $(this).attr("id");
		instance.reset();	//suppression de toutes les connexions
		resetDiagram();
 
		//on redessine
		generateDiagram(FlId);
		instance = jsPlumb.getInstance();
		instance.importDefaults(defaultOptions);
		connectDiagram(instance);		
	}).on("click", ".beforeSide", function(){
		var FlId = $(this).attr("id");
		instance.reset();	//suppression de toutes les connexions
		resetDiagram();
 
		//on redessine
		generateDiagram(FlId);
		instance = jsPlumb.getInstance();
		instance.importDefaults(defaultOptions);
		connectDiagram(instance);	
	});	
});	
 
function generateDiagram(flightId){
	$.ajax({
		url:"**********************",
		datatype: "json",
		async: false,
		success: function(data){
			var topBefore = 0;	//placement vertical du côté gauche
			var before = 101, after=700;
			var topAfter = 0; //placement vertical du côté droit
			var afterCount = 0, beforeCount = 0;
			var gapBetweenAirports = 12.5;
			var airportStartCenter, airportEndCenter;
 
			airportStartCenter = data.flight.org;
			airportEndCenter = data.flight.dst;
			var centraleDiv="<div id='centraleDiv' class='rectangle centerDiv'><span class='airport'>"+data.flight.org+"</span> "+data.flight.fn+" <span class='airport'>"+data.flight.dst+"</span></div>";
 
			$.each( data.after, function( key, fl ) {	
				//Placement de Airport3 à droite de l'O&D
				$("#chart").append("<div id="+fl.id+" class='rectangle afterSide'><span class='airport'>"+fl.dst+"</span> <span class='FlNumber'>"+fl.fn+"</span></div>");
				$("#"+fl.id).css({"top":topAfter, "left":after});
				topAfter+=gapBetweenAirports;
				if(after==801){
					after=700;
				} else {
					after=801;
				}	
				afterCount++;
			});
 
			$.each(data.before, function(key, fl){
				//Placement de Airport1 à gauche de l'O&D
				$("#chart").append("<div id="+fl.id+" class='rectangle beforeSide'><span class='airport'>"+fl.org+"</span> <span class='FlNumber'>"+fl.fn+"</span></div>");
				$("#"+fl.id).css({"top":topBefore, "left":before});
				topBefore+=gapBetweenAirports;
				if(before==101){
					before=0;
				} else {
					before=101;
				}	
				beforeCount++;
			});
 
			//Alignement du côté droit ou gauche puis creation de la div centrale 
			var beforeCenter = (beforeCount-1)*gapBetweenAirports/2;	//calcul du centre gauche
			var afterCenter = (afterCount-1)*gapBetweenAirports/2;	//calcul du centre droit
			var center;
 
			if(beforeCenter > afterCenter){
				//déplacement du côté droit
				center = beforeCenter-afterCenter;
 
				$(".afterSide").each(function(
				index, element ) {
					$(element).css("top", "+="+center);
				});
 
				$("#chart").append(centraleDiv);	//O&D précédemment sélectionnée
				$(".centerDiv").css("top",beforeCenter);
			} else {
				//déplacement du côté gauche
				center = afterCenter-beforeCenter;
 
				$(".beforeSide").each(function( index, element ) {
					$(element).css("top", "+="+center);
				});
 
				$("#chart").append(centraleDiv);	//O&D précédemment sélectionnée
				$(".centerDiv").css("top",afterCenter);	
			}
		}	
	});
};
 
 
function connectDiagram(instance) {
	if ($(".beforeSide").length > 0) {	
		$(".beforeSide").each(function(index, element){
			if($(element).css("left")=="101px" ){
				instance.connect({
					source:$(element),
					target:$("#centraleDiv"),
					anchors:["RightMiddle", "LeftMiddle"],
					endpointStyle:{fillStyle:"#2e6f9a", radius: 3},
					editable:false		
				});		
			}
		});				
	}
 
	if ($(".afterSide").length > 0) {
		$(".afterSide").each(function(index, element){
			if($(element).css("left")=="700px" ){
				instance.connect({
					source:$("#centraleDiv"),
					target:$(element),
					anchors:["RightMiddle", "LeftMiddle"],
					endpointStyle:{fillStyle:"#2e6f9a", radius: 3},
					editable:false		
				});		
			}
		});
	}
};
 
function resetDiagram(){	
	//Actualiser le diagramme
	$(".beforeSide").each(function(index, element){
		$(element).remove();		//suppression cote gauche
	});
	$(".afterSide").each(function(index, element){
		$(element).remove();		//suppression cote gauche
	});
	$(".centerDiv").remove();
}

Les commentaires ne sont pas forcément en phase avec le code écrit.

Ce code fonctionne sur Chrome mais impossible de le faire fonctionner sur IE 8 (navigateur imposé). Je me retrouve systématiquement avec "object doesn't support this property or method".

J'ai pu isoler le bout de code qui provoque cette erreur et il semblerait que ce soit la méthode connect(). Et je ne comprends pas car j'utilise cette même méthode sur un projet de test en local sans que la moindre erreur ne soit remontée...

Merci d'avance pour votre aide !