Discussion :

[Nicotyrox]

Bonjour,

J'ai un probleme avec jquery UI. En gros, je souhaite faire un Dashboard avec plein de widgets pour Nagios. J'enregistre les position en base de donnée, tout se met parfaitement bien. Mais Voilà mon problème :

Avant :



En base de donnée, ça donne :



Mais après rafraichissement, j'ai :



J'avoue que je suis une bille en CSS, et c'est probablement de là que vient le problème. Voici ma feuille de style :

Code css :

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
.dashboard{
	width: 92%;
	height: 100%;
	border : 1px solid black;
}
#dashboard_menu{
	display: inline;
}
#info{
	position: fixed;
	top: 0;
	left: 93%;
}
.widget{			
	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: 100px;
	margin: 3px;
}
#info{
	border : 1px solid brown;
	padding: 3px;
	margin: 3px;
}

Dans mon body, j'ai ça :

Code html :

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
<div id="info">
	<div id="positions"></div>
	<button id="save" 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="dashboard"></div>
<div id="dashboard_menu"></div>

En fait, c'est en javascript que tout se charge. Voiçi la fonction de chargement des widgets :

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
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"]);
			}
			setAllWidget();
			updatePosition();
			unsetAllWidget();
		},
		complete : function(resultat, statut){
			// alert('Le dashboard a correctement été sauvegardé.');
		}
	});
}

Merçi d'avance