Le clic droit a été bloqué..Mais pourquoi et où ?

Bonjour,

Aujourd'hui, je viens de faire une erreur, peut être vous allez rire. En fait j'ai bloqué le clic droit sur ma page. Le problème, c'est que j'ai jamais voulu le bloqué, et à priori, rien ne bloque le clic droit.

Toujours est-il que c'est lorsque je souhaitait mettre en beta test les amélioration que je souhaitait à un script. Dans l'ancienne version, le clic droit n'est pas bloqué. Dans la nouvelle version du script, il l'est.

Mon code doit permettre la gestion de dashboard. La version non bloqué permet la gestion d'un seul, tandis que l'autre, celui où il est bloqué, permet d'en avoir plusieurs, repertorier sous forme d'onglets.

SCRIPT DU CLIC BLOQUE :

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
var nbwidget;
function overlay() {
	var el = document.getElementById("overlay");
	$("#addWidget").load('/dashboard/createWidget.php');
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function chargeDashboard(){
	$.ajax({
		type: 'POST',
		url: 'getDashboard.php',
		data: {"user_id" : 1},
		dataType:'JSON',
		success: function(data) {
			console.log(data);
			var arr = $.map(data, function(el) { return el; });
			console.debug(arr);
			console.log(arr.length);
			nbwidget = arr.length - 2;
			console.log(arr[0]['posX']);
			// $('.widget:first').width = "700px";
			// $('.widget:first').style.left = arr[0]['posX'];
			for(var i = 0; i <= arr.length - 2; i++){
				console.log("Le fichier "+arr[i]["nom"]+" sera inclus");
				$('.onglets').append("<span class='onglet_0 onglet' id='onglet_dashboard_"+arr[i]['id']+"' onclick='change_onglet(\"dashboard_"+arr[i]['id']+"\");'>"+arr[i]["nom"]+"</span>");
				$(".contenu_onglets").append("<div class='dashboard' id='contenu_onglet_dashboard_"+arr[i]['id']+"'>");
				$(".contenu_onglets").append("</div>");
				chargeWidget(arr[i]['id'])
			}
			change_onglet("dashboard_1");
		}
	});	
}
function chargeWidget(id){
	$.ajax({
		type: 'POST',
		url: 'getWidget.php',
		data: {"dashboard_id" : id},
		dataType:'JSON',
		success: function(data) {
			console.log(data);
			var arr = $.map(data, function(el) { return el; });
			console.debug(arr);
			console.log(arr.length);
			nbwidget = arr.length - 2;
			console.log(arr[0]['posX']);
			// $('.widget:first').width = "700px";
			// $('.widget:first').style.left = arr[0]['posX'];
			for(var i = 0; i <= arr.length - 2; i++){
				if(arr[i]['arg'] != null) {
					host = 0;
					srv = 0;
					if(arr[i]['type'] == 2){
						arg = arr[i]["arg"].split("::");
						console.log(arg[0]);
						console.log(arg[1]);
						host = arg[0].split("=");
						srv = arg[1].split("=");
						console.log(host[1]);
						console.log(srv[1]);
					}
				}
				console.log("Le widget "+arr[i]["nom"]+" sera inclus à #contenu_onglet_dashboard_"+id);
				$('#contenu_onglet_dashboard_'+id).append('<div class="widget" id="widget'+i+'">');
				$('#contenu_onglet_dashboard_'+id).append('</div>');
				$('#contenu_onglet_dashboard_'+id+' > #widget'+i).css( "zIndex", i );
				$('#contenu_onglet_dashboard_'+id+'  > #widget'+i).append('<input type="hidden" value="'+arr[i]["id"]+'" id="widgetId">');
				$('#contenu_onglet_dashboard_'+id+'  > #widget'+i).append('</div>');
				$('#contenu_onglet_dashboard_'+id+'  > #widget'+i).append('<div id="jscriptInclude'+i+'">');
				$('#contenu_onglet_dashboard_'+id+'  > #widget'+i).append('</div>');
				if(typeof host != "undefined"){
					$('#contenu_onglet_dashboard_'+id+'  > #widget'+i+' > #jscriptInclude'+i).load('/dashboard/widget/'+arr[i]['nom']+'.php?host='+host[1]+'&srv='+srv[1]);
					delete host;
					delete srv;
				}else {
					$('#contenu_onglet_dashboard_'+id+'  > #widget'+i+' > #jscriptInclude'+i).load('/dashboard/widget/'+arr[i]['nom']+'.php');
				}
				$('#contenu_onglet_dashboard_'+id+'  > #widget'+i).offset({top: arr[i]["posY"], left:arr[i]["posX"]  });
				$('#contenu_onglet_dashboard_'+id+'  > #widget'+i).width(arr[i]["taille"]);
			}
			updatePosition(id);
		},
		complete : function(resultat, statut){
			// alert('Le dashboard a correctement été sauvegardé.');
		}
	});
}
function setAllWidget(){
	$('.widget').each(function(){
		$(this).prepend("")
		$(this).draggable({ 	
			disabled:false,
			containment: "parent" ,
			drag: function(){
				counts[ 1 ]++;
				updateCounterStatus( $drag_counter, counts[ 1 ] );
			},
			stop: function(){
				updatePosition();
			}
		}).resizable({
			disabled:false,
			helper: "ui-resizable-helper",
			containment: ".dashboard",
		});
	})
	$('#change').hide();
	$('#freeze').show();
}
function destroyAllWidget(){
	$('.widget').each(function(){
		$(this).draggable("destroy");
		$(this).resizable("destroy");
	});
}
function setAllWidgetForDelete(){
	$('.widget').each(function(){
		$(this).prepend("")
		$(this).click(function(){
			$(this).animate({width: $(this).width() + 20}, 300);
			$(this).animate({width: 0}, 500);
			$(this).remove();
			var id = $(this).find('#widgetId').val();
			$.ajax({
				type: 'POST',
				url: 'delete.php',
				data: {"id" : id},
				dataType:'script',
				success: function() {
					console.log(id+" a été correctement supprimé.");
					advertize("L'élement a correctement été supprimé.")
				}
			});
		});
	})
	$('#delete').hide();
	$('#stopDelete').show();
}
function unsetAllWidgetForDelete(){
	$('.widget').each(function(){
		$(this).unbind("click");
		$('#stopDelete').hide();
		$('#delete').show();
	});	
}
function unsetAllWidget(){
	console.log("Tout les widgets vont être pin")
	$('.widget').each(function(){
		$(this).draggable({ 	
			disabled:true
		}).resizable({
			disabled:true
		});
	})
	$('#freeze').hide();
	$('#change').show();
}
function updatePosition(id){
	$('#positions').empty();
	$('#contenu_onglet_dashboard_'+id+' > .widget').each(function(){
		var position = $(this).position();
		// $("#xpos").text(position.left);
		// $("#ypos").text(position.top);
		$('#positions').append( "position x: <span class='xpos'>"+position.left+"</span><br />" );
		$('#positions').append( "position y: <span class='ypos'>"+position.top+"</span><br />" );
		$('#positions').append( "<br />" );
	});
}
function loadDashboard(){
	$('#freeze').hide();
	$('#stopDelete').hide();
	chargeWidget();
	updatePosition();
}
var $start_counter = $( "#event-start" ),
$drag_counter = $( "#event-drag" ),
$stop_counter = $( "#event-stop" ),
counts = [ 0, 0, 0 ];
function updateCounterStatus( $event_counter, new_count ) {
	// first update the status visually...
	if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
		$event_counter.addClass( "ui-state-hover" )
			.siblings().removeClass( "ui-state-hover" );
	}
	// ...then update the numbers
	$( "span.count", $event_counter ).text( new_count );
}
function save(){
	// alert("Sauvegarde en cours !");
	var donnees = new Array(); //tableau dans lequel on sauvegarde tout
	var cpt = 0 //correspond au sous tableau
	var id = null;
	$('.widget').each(function(){
		var position = $(this).position();
		id = $(this).find('#widgetId').val();
		console.log("Sauvegarde pour le widget d'ID "+id);
		donnees[cpt]= new Array();
		donnees[cpt].push({
			"id" : id,
			"positionX" : position.left,
			"positionY": position.top,
			"taille" : $(this).width()
		});
		cpt++;
	});
	var dataJSON= JSON.stringify(donnees);
	$.ajax({
		type: 'POST',
		url: 'position.php',
		data: {"data" : dataJSON, "id": 1},
		dataType:'script',
		success: function(data) {
			$('#resultat').html(data);
		},
		complete : function(resultat, statut){
			// alert('Le dashboard a correctement été sauvegardé.');
		}
	});
}
function advertize(message){
	$('.dashboard').append( "<div id='advertizer'>"+message+"</div>" )
	$('#advertizer').delay( 1000 ).remove();
}
function flushDashboard(){
	$('.dashboard').empty();
}
///////
var arr = new Array();
var last_host = undefined;
function spaceForLink(string){
 return string.replace(/ /g,'%20');
}
function updateForm(){
	var selectValue = getSelectValue('widgetSelect')
	console.log(selectValue);
	if(selectValue == "Graphiques"){
		$('#inputSide').empty();
		$("#inputSide").append('<label for="host">Hotes</label><select id="host" onchange="updateService()">');
		$("#inputSide").append('</select><br />');
		$("#inputSide").append('<label for="service">Service</label><select id="service" >');
		$("#inputSide").append('</select><br />');
		//Rechercher toutes les données relatives aux graphiques
		$.ajax({
			type: 'POST',
			url: 'loadGraph.php',
			dataType:'JSON',
			success: function(rec) {
				console.log("Received data");
				console.log(rec);
				arr = $.map(rec, function(el) { return el; });
				console.debug(arr);
				console.log(arr.length);
				nbwidget = arr.length - 2;
				console.log(arr[0]['posX']);
				// $('.widget:first').width = "700px";
				// $('.widget:first').style.left = arr[0]['posX'];
				for(var i = 0; i <= arr.length - 2; i++){
					if (last_host != arr[i]["host"]){
						console.log("L'hôte "+arr[i]["host"]+" sera inclus");
						last_host = arr[i]["host"];
						$("#host").append('<option value="'+arr[i]["host"]+'">'+arr[i]["host"]+'</option>');
					}
				}
				last_host = arr[0]['host'];
				updateService();
			},
			complete : function(resultat, statut){
				// alert('Le dashboard a correctement été sauvegardé.');
			}
		});
	}
}
function updateService(){
	console.log("Flush Services");
	$('#service').empty();
	$("#service").append('<option class="'+$("#host").val()+'" value="_HOST_">AUCUN SERVICE</option>');
	for(var i = 0; i <= arr.length - 1; i++){
		if(arr[i]['host'] == $("#host").val()){
			console.log("Le service "+arr[i]["srv"]+" sera inclus");
			$("#service").append('<option class="'+arr[i]["host"]+'" value="'+spaceForLink(arr[i]["srv"])+'">'+arr[i]["srv"]+'</option>');
		}
	}
}
function getSelectValue(selectId){
	/**On récupère l'élement html <select>*/
	var selectElmt = document.getElementById(selectId);
	/**
	selectElmt.options correspond au tableau des balises <option> du select
	selectElmt.selectedIndex correspond à l'index du tableau options qui est actuellement sélectionné
	*/
	return selectElmt.options[selectElmt.selectedIndex].value;
}
function send(){
	$.ajax({
		type: 'POST',
		url: 'addWidget.php',
		data: {"host" : $("#host").val(), "srv" : $("#service").val()},
		dataType:'JSON',
		complete : function(resultat, statut){
			flushDashboard();
			chargeWidget();
		}
	});
}

SCRIPT DU CLIC NON BLOQUE :

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
var nbwidget;
function overlay() {
	var el = document.getElementById("overlay");
	$("#addWidget").load('/dashboard/createWidget.php');
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
function chargeDashboard(){
	$.ajax({
		type: 'POST',
		url: 'getDashboard.php',
		data: {"user_id" : 1},
		dataType:'JSON',
		success: function(data) {
			console.log(data);
			var arr = $.map(data, function(el) { return el; });
			console.debug(arr);
			console.log(arr.length);
			nbwidget = arr.length - 2;
			console.log(arr[0]['posX']);
			// $('.widget:first').width = "700px";
			// $('.widget:first').style.left = arr[0]['posX'];
			for(var i = 0; i <= arr.length - 2; i++){
				console.log("Le fichier "+arr[i]["nom"]+" sera inclus");
				// $('.onglets').append("<span class='onglet_0 onglet' id='onglet_dashboard_"+arr[i]['id']+" onclick='change_onglet(dashboard_"+arr[i]['id']+");'>"+arr[i]["nom"]+"</span>");
				// $(".contenu_onglets").append("<div class='dashboard' id='contenu_onglet_dashboard_"+arr[i]['id']+"'>");
				// $(".contenu_onglets").append("</div>");
				// $('.dashboard:first').append('<div class="widget" id="widget'+i+'">');
				// $('.dashboard:first').append('</div>');
				// $("#widget"+i).css( "zIndex", i );
				// $("#widget"+i).append('<input type="hidden" value="'+arr[i]["id"]+'" id="widgetId">');
				// $("#widget"+i).append('</div>');
				// $("#widget"+i).append('<div id="jscriptInclude'+i+'">');
				// $("#widget"+i).append('</div>');
				// if(typeof host != "undefined"){
					// $("#jscriptInclude"+i).load('/dashboard/widget/'+arr[i]['nom']+'.php?host='+host[1]+'&srv='+srv[1]);
					// delete host;
					// delete srv;
				// }else {
					// $("#jscriptInclude"+i).load('/dashboard/widget/'+arr[i]['nom']+'.php');
				// }
				// $("#widget"+i).offset({top: arr[i]["posY"], left:arr[i]["posX"]  });
				// $("#widget"+i).width(arr[i]["taille"]);
			}
			// updatePosition();
		},
		complete : function(resultat, statut){
			// alert('Le dashboard a correctement été sauvegardé.');
		}
	});	
}
function chargeWidget(){
	$.ajax({
		type: 'POST',
		url: 'getWidget.php',
		data: {"user_id" : 1},
		dataType:'JSON',
		success: function(data) {
			console.log(data);
			var arr = $.map(data, function(el) { return el; });
			console.debug(arr);
			console.log(arr.length);
			nbwidget = arr.length - 2;
			console.log(arr[0]['posX']);
			// $('.widget:first').width = "700px";
			// $('.widget:first').style.left = arr[0]['posX'];
			for(var i = 0; i <= arr.length - 2; i++){
				if(arr[i]['arg'] != null) {
					host = 0;
					srv = 0;
					if(arr[i]['type'] == 2){
						arg = arr[i]["arg"].split("::");
						console.log(arg[0]);
						console.log(arg[1]);
						host = arg[0].split("=");
						srv = arg[1].split("=");
						console.log(host[1]);
						console.log(srv[1]);
					}
				}
				console.log("Le fichier "+arr[i]["nom"]+" sera inclus");
				$('.dashboard:first').append('<div class="widget" id="widget'+i+'">');
				$('.dashboard:first').append('</div>');
				$("#widget"+i).css( "zIndex", i );
				$("#widget"+i).append('<input type="hidden" value="'+arr[i]["id"]+'" id="widgetId">');
				$("#widget"+i).append('</div>');
				$("#widget"+i).append('<div id="jscriptInclude'+i+'">');
				$("#widget"+i).append('</div>');
				if(typeof host != "undefined"){
					$("#jscriptInclude"+i).load('/dashboard/widget/'+arr[i]['nom']+'.php?host='+host[1]+'&srv='+srv[1]);
					delete host;
					delete srv;
				}else {
					$("#jscriptInclude"+i).load('/dashboard/widget/'+arr[i]['nom']+'.php');
				}
				$("#widget"+i).offset({top: arr[i]["posY"], left:arr[i]["posX"]  });
				$("#widget"+i).width(arr[i]["taille"]);
			}
			updatePosition();
		},
		complete : function(resultat, statut){
			// alert('Le dashboard a correctement été sauvegardé.');
		}
	});
}
function setAllWidget(){
	$('.widget').each(function(){
		$(this).prepend("")
		$(this).draggable({ 	
			disabled:false,
			containment: "parent" ,
			drag: function(){
				counts[ 1 ]++;
				updateCounterStatus( $drag_counter, counts[ 1 ] );
			},
			stop: function(){
				updatePosition();
			}
		}).resizable({
			disabled:false,
			helper: "ui-resizable-helper",
			containment: ".dashboard",
		});
	})
	$('#change').hide();
	$('#freeze').show();
}
function destroyAllWidget(){
	$('.widget').each(function(){
		$(this).draggable("destroy");
		$(this).resizable("destroy");
	});
}
function setAllWidgetForDelete(){
	$('.widget').each(function(){
		$(this).prepend("")
		$(this).click(function(){
			$(this).animate({width: $(this).width() + 20}, 300);
			$(this).animate({width: 0}, 500);
			$(this).remove();
			var id = $(this).find('#widgetId').val();
			$.ajax({
				type: 'POST',
				url: 'delete.php',
				data: {"id" : id},
				dataType:'script',
				success: function() {
					console.log(id+" a été correctement supprimé.");
					advertize("L'élement a correctement été supprimé.")
				}
			});
		});
	})
	$('#delete').hide();
	$('#stopDelete').show();
}
function unsetAllWidgetForDelete(){
	$('.widget').each(function(){
		$(this).unbind("click");
		$('#stopDelete').hide();
		$('#delete').show();
	});	
}
function unsetAllWidget(){
	console.log("Tout les widgets vont être pin")
	$('.widget').each(function(){
		$(this).draggable({ 	
			disabled:true
		}).resizable({
			disabled:true
		});
	})
	$('#freeze').hide();
	$('#change').show();
}
function updatePosition(){
	$('#positions').empty();
	$('.widget').each(function(){
		var position = $(this).position();
		// $("#xpos").text(position.left);
		// $("#ypos").text(position.top);
		$('#positions').append( "position x: <span class='xpos'>"+position.left+"</span><br />" );
		$('#positions').append( "position y: <span class='ypos'>"+position.top+"</span><br />" );
		$('#positions').append( "<br />" );
	});
}
function loadDashboard(){
	$('#freeze').hide();
	$('#stopDelete').hide();
	chargeWidget();
	updatePosition();
}
var $start_counter = $( "#event-start" ),
$drag_counter = $( "#event-drag" ),
 $stop_counter = $( "#event-stop" ),
 counts = [ 0, 0, 0 ];
function updateCounterStatus( $event_counter, new_count ) {
	// first update the status visually...
	if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
		$event_counter.addClass( "ui-state-hover" )
			.siblings().removeClass( "ui-state-hover" );
	}
	// ...then update the numbers
	$( "span.count", $event_counter ).text( new_count );
}
function save(){
	// alert("Sauvegarde en cours !");
	var donnees = new Array(); //tableau dans lequel on sauvegarde tout
	var cpt = 0 //correspond au sous tableau
	var id = null;
	$('.widget').each(function(){
		var position = $(this).position();
		id = $(this).find('#widgetId').val();
		console.log("Sauvegarde pour le widget d'ID "+id);
		donnees[cpt]= new Array();
		donnees[cpt].push({
			"id" : id,
			"positionX" : position.left,
			"positionY": position.top,
			"taille" : $(this).width()
		});
		cpt++;
	});
	var dataJSON= JSON.stringify(donnees);
	$.ajax({
		type: 'POST',
		url: 'position.php',
		data: {"data" : dataJSON, "id": 1},
		dataType:'script',
		success: function(data) {
			$('#resultat').html(data);
		},
		complete : function(resultat, statut){
			// alert('Le dashboard a correctement été sauvegardé.');
		}
	});
}
function advertize(message){
	$('.dashboard').append( "<div id='advertizer'>"+message+"</div>" )
	$('#advertizer').delay( 1000 ).remove();
}
function flushDashboard(){
	$('.dashboard').empty();
}
///////
var arr = new Array();
var last_host = undefined;
function spaceForLink(string){
	 return string.replace(/ /g,'%20');
}
function updateForm(){
	var selectValue = getSelectValue('widgetSelect')
	console.log(selectValue);
	if(selectValue == "Graphiques"){
		$('#inputSide').empty();
		$("#inputSide").append('<label for="host">Hotes</label><select id="host" onchange="updateService()">');
		$("#inputSide").append('</select><br />');
		$("#inputSide").append('<label for="service">Service</label><select id="service" >');
		$("#inputSide").append('</select><br />');
		//Rechercher toutes les données relatives aux graphiques
		$.ajax({
			type: 'POST',
			url: 'loadGraph.php',
			dataType:'JSON',
			success: function(rec) {
				console.log("Received data");
				console.log(rec);
				arr = $.map(rec, function(el) { return el; });
				console.debug(arr);
				console.log(arr.length);
				nbwidget = arr.length - 2;
				console.log(arr[0]['posX']);
				// $('.widget:first').width = "700px";
				// $('.widget:first').style.left = arr[0]['posX'];
				for(var i = 0; i <= arr.length - 2; i++){
					if (last_host != arr[i]["host"]){
						console.log("L'hôte "+arr[i]["host"]+" sera inclus");
						last_host = arr[i]["host"];
						$("#host").append('<option value="'+arr[i]["host"]+'">'+arr[i]["host"]+'</option>');
					}
				}
				last_host = arr[0]['host'];
				updateService();
			},
			complete : function(resultat, statut){
				// alert('Le dashboard a correctement été sauvegardé.');
			}
		});
	}
}
function updateService(){
	console.log("Flush Services");
	$('#service').empty();
	$("#service").append('<option class="'+$("#host").val()+'" value="_HOST_">AUCUN SERVICE</option>');
	for(var i = 0; i <= arr.length - 1; i++){
		if(arr[i]['host'] == $("#host").val()){
			console.log("Le service "+arr[i]["srv"]+" sera inclus");
			$("#service").append('<option class="'+arr[i]["host"]+'" value="'+spaceForLink(arr[i]["srv"])+'">'+arr[i]["srv"]+'</option>');
		}
	}
}
function getSelectValue(selectId){
	/**On récupère l'élement html <select>*/
	var selectElmt = document.getElementById(selectId);
	/**
	selectElmt.options correspond au tableau des balises <option> du select
	selectElmt.selectedIndex correspond à l'index du tableau options qui est actuellement sélectionné
	*/
	return selectElmt.options[selectElmt.selectedIndex].value;
}
function send(){
	$.ajax({
		type: 'POST',
		url: 'addWidget.php',
		data: {"host" : $("#host").val(), "srv" : $("#service").val()},
		dataType:'JSON',
		complete : function(resultat, statut){
			flushDashboard();
			chargeWidget();
		}
	});
}

Je pense pas que le code HTML soit nécessaire, mais pour pas tro pque vous soyez perdu, le voiçi (c'est le code du script au clic bloqué) :

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<?php session_start() ?>
<html> 
	<head>
		<title>Dashboard</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
		<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<script type="text/javascript" src="js/dashboard.js"></script>
		<link rel="stylesheet" type="text/css" href="/nagios/css/bootstrap.min.css">
 
		<style>
			#bodyOverlayed{
				background-color: #a1a1a1;
			}
			.dashboard{
				width: 92%;
				height: 100%;
				border : 1px solid black;
			}
			#dashboard_menu{
				display: inline;
			}
			#info{
				position: fixed;
				top: 0;
				left: 93%;
			}
			.widget{			
				position : absolute;
				padding: 3px;
				border: 1px solid black;
			}
 
			.widget:hover{
				border: 2px dotted #00F;
			}
 
			#widget1{
				width: 500px;
				height: 200px;
				background-color: transparent;
			}
 
			.xpos{
				display: inline;
			}
 
			.ypos{
				display: inline;
			}
 
			#draggable { width: 150px; height: 150px; padding: 0.5em; }
 
			.ui-resizable-helper { border: 2px dotted #00F; }
 
			.widget_title{
				font-size: 12px;
				font-weight : bold;
			}
 
			.removed{
				display: none;
			}
 
			.menuB{
				width: 65%;
				margin: 3px;
			}
 
			#info{
				border : 1px solid brown;
				padding: 3px;
				margin: 3px;
			}
 
			#overlay {
				visibility: hidden;
				position: absolute;
				left: 0px;
				top: 0px;
				width:100%;
				height:100%;
				text-align:center;
				z-index: 1000;
			}
 
			.popupContent{
				 width:300px;
				 margin: 100px auto;
				 background-color: #fff;
				 border:1px solid #000;
				 padding:15px;
				 text-align:center;
			}
 
			.onglet
		{
				display:inline-block;
				margin-left:3px;
				margin-right:3px;
				padding:3px;
				border:1px solid black;
				cursor:pointer;
		}
		.onglet_0
		{
				background:#bbbbbb;
				border-bottom:1px solid black;
				z-index: 0;
				transition: 200ms;
		}
 
		.onglet_0:hover{
			background:#D8D3D3
		}
			.onglet_0:active{
			z-index: 50;
		}
		.onglet_1:focus{
			z-index: 25;
		}
		.onglet_1
		{
				background:#dddddd;
				border-bottom:0px solid black;
				padding-bottom:4px;
				z-index: 25;
		}
		.contenu_onglet
		{	
				background-color:#dddddd;
				border:1px solid black;
				margin-top:-1px;
				padding:5px;
				display:none;
				margin-left: 10px;
				margin-right: 10px;
		}
		</style>
	</head>
 
	<body onload="chargeDashboard();">
 
<?php
	try
	{
		$bdd = new PDO('mysql:host=172.16.1.39;dbname=dashboard;charset=utf8', 'nagioscfg', 'nagioscfgpass76');
	}
	catch (Exception $e)
	{
			die('Erreur : ' . $e->getMessage());
	}
 
?>
		<div id="info">
			<div id="positions">
 
			</div>
				<button id="addingWidget" class="button menuB" onclick='overlay()'>Add new widget</button>
				<button id="save" class="button menuB" onclick="save()">Save position</button>
				<button id="change" class="button menuB" onclick="setAllWidget()">Modify position</button>
				<button id="freeze" class="button menuB" onclick="unsetAllWidget(); save();">Stop modification</button>
				<button id="delete" class="button menuB" onclick="setAllWidgetForDelete();">Delete widget</button>
				<button id="stopDelete" class="button menuB" onclick="unsetAllWidgetForDelete();">Stop deletion</button>
		</div>
 
		<div id="overlay">
			<div class="popupContent">
				<a href='#' onclick='overlay()'>X</a>
				<div id="addWidget">
 
				</div>
			</div>
		</div>
 
		<div class="systeme_onglets">
			<div class="onglets">
 
			</div>
 
			<div class="contenu_onglets">
 
			</div>
		</div>
		////////////////////////////////////////////////
 
		<div id="dashboard_menu">
 
		</div>
	</body>
 
	<script type="text/javascript">
			//<!--
					var anc_onglet;
 
 
					function change_onglet(name)
					{
						if(typeof anc_onglet == "undefined"){
							document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
							document.getElementById('contenu_onglet_'+name).style.display = 'block';
							anc_onglet = name;
						}
						else {
							document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
							document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
							document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
							document.getElementById('contenu_onglet_'+name).style.display = 'block';
							anc_onglet = name;
						}
 
					}
	</script>
</html>

Merci d'avance