Bonjour

Alors voilà.. J’utilise depuis peu la bibli w2ui, très utile au passage, qui est en gros une bibli d'ui en javascript : http://w2ui.com/web/

L'idée : j'ai une sidebar sur la gauche de ma page, et quand je clique sur différents menu, ça me charge des pages différentes dans le pannel principal. Jusque là, rien de bien sorcier...

J'ai donc un main.html :

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
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
<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: sidebar-1</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
 
<div id="main" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;"></div>
 
<script>
 
var config = {
 
    layout: {
        name: 'layout',
        padding: 0,
        panels: [
            { type: 'left', size: 230, minSize: 230 },
            { type: 'main', minSize: 550, overflow: 'hidden' }
        ]
    },
 
    sidebar: {
        name: 'sidebar',
        nodes: [
            { 
                id: 'level-1', text: 'Achats', expanded: true, group: true,
                nodes: [ 
                    { id: 'essai', text: 'Achats' },
                ]
            },
            { 
                id: 'level-2', text: 'Stocks', expanded: true, group: true,
                nodes: [ 
                    { id: 'grid1', text: 'Stocks' },
                ]
            },
        ],
 
        onClick: function (event) {
            switch (event.target) {
                case 'grid1':
                    w2ui.layout.load('main', 'grid.html');
                    break;
                case 'essai':
                    w2ui.layout.load('main', 'form.html');
                    break;
            }
        }
    },
};
 
$(function () {
 
    $('#main').w2layout(config.layout);
    w2ui.layout.content('left', $().w2sidebar(config.sidebar));
    w2ui.layout.content('main', '');
    $(w2ui.layout.el('main')).css({ 'border-left': '1px solid silver'});
 
});
</script>
 
</body>
</html>

et deux fichiers externes, qui fonctionnent très bien si je les load tout seuls (il faut le préciser !) :

form.html :

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
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
<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: forms-5</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
 
<div id="lol" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;">
    <div class="w2ui-page page-0">
        <div class="w2ui-field">
            <label>First Name:</label>
            <div>
                <input name="first_name" type="text" maxlength="100" size="60"/>
            </div>
        </div>
        <div class="w2ui-field">
            <label>Last Name:</label>
            <div>
                <input name="last_name" type="text" maxlength="100" size="60"/>
            </div>
        </div>
        <div class="w2ui-field">
            <label>Comments:</label>
            <div>
                <textarea name="comments" type="text" style="width: 100%; height: 80px; resize: none"></textarea>
            </div>
        </div>
    </div>
    <div class="w2ui-page page-1">
        <div class="w2ui-field">
            <label>Address:</label>
            <div>
                <input name="address1" type="text" maxlength="100" style="width: 100%"/>
            </div>
        </div>
        <div class="w2ui-field">
            <label>Line 2:</label>
            <div>
                <input name="address2" type="text" maxlength="100" style="width: 100%"/>
            </div>
        </div>
        <div class="w2ui-field">
            <label>City:</label>
            <div>
                <input name="city" type="text" maxlength="50" size="25"/>
            </div>
        </div>
        <div class="w2ui-field">
            <label>State:</label>
            <div>
                <input name="state" type="text" maxlength="2" size="2"/>
            </div>
        </div>
        <div class="w2ui-field">
            <label>Zip:</label>
            <div>
                <input name="zip" type="text" maxlength="10" size="10"/>
            </div>
        </div>
    </div>
    <div class="w2ui-page page-2">
        <div class="w2ui-field">
            <label>Short Bio:</label>
            <div>
                <textarea name="short_bio" type="text" style="width: 100%; height: 80px; resize: none"></textarea>
            </div>
        </div>
        <div class="w2ui-field">
            <label>Talk Name:</label>
            <div>
                <input name="talk_name" type="text" maxlength="100" style="width: 100%"/>
            </div>
        </div>
        <div class="w2ui-field">
            <label>Talk Description:</label>
            <div>
                <textarea name="description" type="text" style="width: 100%; height: 80px; resize: none"></textarea>
            </div>
        </div>
    </div>
 
    <div class="w2ui-buttons">
        <button class="w2ui-btn" name="reset">Reset</button>
        <button class="w2ui-btn" name="save">Save</button>
    </div>
</div>
 
<script type="text/javascript">
$(function () {
    $('#lol').w2form({ 
 
        name   : 'lol',
        url    : 'server/post',
        
        fields : [
            { field: 'first_name', type: 'text', required: true },
            { field: 'last_name',  type: 'text', required: true },
            { field: 'comments',   type: 'text'},
            { field: 'address1', type: 'text', required: true },
            { field: 'address2', type: 'text' },
            { field: 'city', type: 'text', required: true },
            { field: 'state', type: 'text', required: true },
            { field: 'zip', type: 'int', required: true },
            { field: 'short_bio', type: 'text' },
            { field: 'talk_name', type: 'text', required: true },
            { field: 'description', type: 'text' }
        ],
 
        tabs: [
            { id: 'tab1', caption: 'General' },
            { id: 'tab2', caption: 'Address'},
            { id: 'tab3', caption: 'About' }
        ],
    });
});
</script>
 
</body>
</html>

et grid.html :

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
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
<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: forms-5</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
 
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
 
<div id="lol" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;"></div>
 
<script type="text/javascript">
 
$(function () {
 
    $('#lol').w2grid({ 
 
        name   : 'lol',
 
        show : {
            toolbar : true,
            toolbarReload : false,
        },
    
        toolbar: {
            items: [
                { type: 'button', id: 'hide', text: 'Hide', icon: 'w2ui-icon-cross' },
                { type: 'button', id: 'show', text: 'Show', icon: 'w2ui-icon-plus' },
                { type: 'break',  id: 'break0' },
                { type: 'button', id: 'btn', text: 'Action Button', img: 'icon-page' },
                { type: 'button', id: 'btn2', text: 'Other Button', img: 'icon-page' }
            ],
            onClick: function (event) {
                if (event.target == 'show') this.show('btn');
                if (event.target == 'hide') this.hide('btn');
            }
        },
            
        searches: [
            { field: 'art', caption: 'Article ', type: 'text' },
            { field: 'sto', caption: 'Stock', type: 'text' },
            { field: 'pro', caption: 'Projet', type: 'text' },
            { field: 'doc', caption: 'Document', type: 'list', options: { items: ['peter@gmail.com', 'jim@gmail.com', 'jdoe@gmail.com']} },
            { field: 'dat', caption: 'Date', type: 'date', options: { format: 'dd/mm/yyyy' } }
        ],
            
        columns: [
            { field: 'art', caption: 'Article', size: '15%', sortable: true, searchable: true },
            { field: 'mou', caption: 'Mouvement', size: '15%' },
            { field: 'sto', caption: 'Stock', size: '15%', sortable: true, searchable: true },
            { field: 'pro', caption: 'Projet', size: '15%', sortable: true, searchable: true },
            { field: 'doc', caption: 'Document', size: '15%', sortable: true, searchable: true },
            { field: 'dat', caption: 'Date', size: '100px', render: 'date:dd/mm/yyyy', sortable: true, searchable: true }
        ],
 
        records: [
            { recid: 1, art: 'B0014', mou: '-5', sto: 'CONTENEUR 1', pro: '326', doc: 'BDS 0012', dat: '04/03/2012' },
            { recid: 2, art: 'B0014', mou: '6', sto: 'CONTENEUR 1', pro: '326', doc: 'CF BBI BGI 2018 0452-5', dat: '03/15/2012' }
        ],
    });
 
 
});
 
 
</script>
 
</body>
</html>

Je suis pas encore expert de cette bibliothèque mais il semble qu'il y a des trucs importants qui se passent dans les scripts en partie basse des deux fichiers externes, sans ces scripts la mise en forme ne se fait pas vraiment (form.html), ou pas du tout (grid.html).

Mon problème, c'est que dès que je reload un fichier dans le pannel central, c'est comme si le script du fichier n'était pas exécuté. Cela n'arrive qu'au deuxième chargement, c'est à dire si je reclique sur le même menu ou si j'en change, c'est assez curieux..

Le seul cas qui se rapproche le plus de mon problème est une doc exemple, sur le site de w2ui : http://w2ui.com/web/demos/#!layout/layout-4
Mais je ne pense pas que data/content1.html ou data/content2.html utilisent de script, donc forcément, sur l'exemple, tout marche

Any ideas ?