3 pièce(s) jointe(s)
Entrecroisement d'éléments de l'interface
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 :
Pièce jointe 177440
En base de donnée, ça donne :
Pièce jointe 177438
Mais après rafraichissement, j'ai :
Pièce jointe 177441
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:
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:
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:
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 :)
