[W2UI] charger différents .html externes successifs dans le même layout pannel

Version imprimable

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:

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:

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:

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 ? :roll:

Avec un code minimal c'est mieux :

index.html

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
<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: sidebar-1</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.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" />
 
	<script>
                
                function grid()
                {
                        $("#layout").load("grid.html"); 
                }
 
        </script>
 
</head>
<body>
 
<div id="top">
	<button class="w2ui-btn" onclick="grid()">Load</button>
</div>
 
<div id="layout" style="width: 100%; height: 400px;"></div>
 
</body>
</html>

grid.html

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
<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: forms-3</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.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="width: 100%; height: 400px;"> </div>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
    $('#lol').w2grid({ 
 
        name   : 'gridName',
 
        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>

L'idée est la même. Le bouton (re)load grid.html dans mon div layout, en tous cas au premier clic :)

Edit : il semblerait que l'erreur vienne d'un timeout quelque part :

Code:

1
2
3
$("#layout").load("grid.html"); 
//setTimeout(function(){ $("#layout").load("grid.html"); }, 2000); // appears then disappear
setTimeout(function(){ $("#layout").load("grid.html"); }, 50); // just appears, ok

De l'art de créer l'offre et la demande :lol:

La solution la moins inélégante consiste à concentrer toutes les configs des menus dans un fichier config.js, qui sera load depuis main.php :

main.php

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
<!DOCTYPE html>
<html>
<head>
    <title>W2UI Demo: combo-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: -1px; left: 0px; bottom: 0px; right: 0px;"></div>
 
<script type="text/javascript">
 
    $.getScript('config.js', function() {
 
        // on laisse la config de la sidebar dans un fichier php, au cas où on voudrait filtrer les menus par utilisateur
        config.sidebar =  {
            name: 'sidebar',
            nodes: [ 
                { 
                    id: 'general', text: 'General', group: true, expanded: true, nodes: [
                    { id: 'grid1', text: 'Grid1', img: 'icon-page' },
                    { id: 'form1', text: 'Form1', img: 'icon-page' },
                    { id: 'form2', text: 'Form2', img: 'icon-page' }
                ]}
            ],
            onClick: function (event) {
                w2ui.layout.content('main', w2ui[event.target]);
            }
        };
 
        $('#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'});
 
        $().w2form(config.form1);
        $().w2form(config.form2);
        $().w2grid(config.grid1);
    });
 
</script>
 
</body>
</html>

config.js

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
var config = {
 
    layout: {
        name: 'layout',
        padding: 0,
        panels: [
            { type: 'left', size: 200, resizable: true, minSize: 120 },
            { type: 'main', minSize: 550, overflow: 'hidden' }
        ]
    },
 
    grid1: {
    	name: 'grid1',
        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' }
        ],
    },
 
    form1: {
    	name   : 'form1',
        header : 'Auto-Generated Form',
        url    : 'server/post',
        fields : [
            { field: 'first_name', type: 'text', required: true, html: { caption: 'First Name', attr: 'style="width: 300px"' } },
            { field: 'last_name',  type: 'text', required: true, html: { caption: 'Last Name', attr: 'style="width: 300px"' } },
            { field: 'comments',   type: 'textarea', html: { caption: 'Comments', attr: 'style="width: 300px; height: 90px"' } }
        ],
        actions: {
            'Save': function (event) {
                console.log('save', event);
                this.save();
            },
            'Clear': function (event) {
                console.log('clear', event);
                this.clear();
            }
        }
    },
 
    form2: {
    	name: 'form2',
	    formHTML: 	    		
	    	'<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>',
		tabs: [
            { id: 'tab1', caption: 'General' },
            { id: 'tab2', caption: 'Address'},
            { id: 'tab3', caption: 'About' }
        ],
        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' }
        ],
        actions: {
            reset: function () {
                this.clear();
            },
            save: function () {
                this.save();
            }
        }
    }
};