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

[NoSmoking]

Bonjour,

c'est probablement de là que vient le problème.

cela est possible d'autant qu'avec une même position x/y un élément peut être placé différemment suivant son type de positionnement (absolute, relatif, fixed) et surtout en rapport avec son plus proche ancêtre positionné.

[Nicotyrox]

JE verrais demain, parce que je ne suis plus au bureau.

En fait, il me semblait que c'était pas gênant parce qu'en CSS, tout ce qui est défini après s'ecrivait par dessus, donc en sauvegardant les positions en base de données, et après en les ajoutant en javascript, je pensais que c'était bon

[Bovino]

Tu as deux solutions possibles :
• générer ton fichier CSS en PHP (en lui donnant les bons header) en fonction des infos de ta BDD ;
• mettre le positionnement des éléments séparément dans le code HTML et donc ajustables à chaque appel de la page.

[Nicotyrox]

Problème résolu : le problème était que je n'avais pas précisé que les widgets ont le positionnement absolu.

Pour te répondre, Bovino, en fait je vois pas ce qui gênait puisque le css était déjà géré à part, dans l'utilisation du javascript/php.

Merci beaucoup.