Jquery dynamisch/statische div, navigatie van statisch naar dynamisch werkt niet?
Code (php)
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,h2,h3,p {
color: white;
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#geenid {
position: absolute;
top: 60px;
left: 5px;
width: 555px;
height: 530px;
border: 1px solid #008800;
}
.spellen {
position: absolute;
top: 2px;
left: 2px;
width: 549px;
height: 524px;
overflow-y: auto;
border: 1px solid red;
}
/* class foei = een hidden shown div bij jquery dynamisch/statisch */
.foei {
position: relative;
top: 2px;
left: 2px;
width: 549px;
height: 524px;
overflow-y: auto;
border:1px solid yellow;
}
/* div aansturing jquery */
#spelknopjes {
position: absolute;
top: 600px;
left: 5px;
width: 555px;
height: 50px;
border: 1px solid #008800;
}
/* knopjes erbij */
.optie1 {
position: absolute;
top: 10px;
left: 55px;
font-size: 18px;
}
.optie2 {
position: absolute;
top: 10px;
left: 225px;
font-size: 18px;
}
.optie3 {
position: absolute;
top: 10px;
left: 410px;
font-size: 18px;
}
.optie1,.optie2,.optie3 {
font-family: "Comic Sans MS", cursive, sans-serif;
color: #006400;
background-color: #008800;
}
</style>
<title>Free 2 501</title>
<script src="/js/jquery-1.11.2.js"></script>
<script>
$(document).ready(function(){
//alert("Jquery Domain Object Model geladen");
function reload($elem, url, interval) {
(function doReload() {
$elem.load(url, function() {
setTimeout(doReload, interval);
});
})();
}
reload ($('.foei'), 'gamelist.phtml', 8000);
reload ($('#spelers'), 'playlist.phtml', 6000);
reload ($('#roomchat'),'/php/output501.php', 3000);
$('#mainform').submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "/php/input.php",
data: $('#mainform').serialize(),
success: function(data){
$('.msge').val('');
$('.msge').focus();
}
});
});
$('.optie1').click(function() {
$('.foei').hide();
$('.spellen').load('page1.phtml');
});
$('.optie2').click(function() {
$('.foei').hide();
$('.spellen').load('page2.phtml');
});
$('.optie3').click(function() {
$('.foei').hide();
$('.spellen').load('page3.phtml');
});
/* rest van de functies op page html */
});
</script>
</head>
<body>
<div id="geenid">
<div class="spellen"></div>
<div class="foei"></div>
</div>
<div id="spelknopjes">
<input type="button" class="optie1" value="Oefenen">
<input type="button" class="optie2" value="Overzicht">
<input type="button" class="optie3" value="Spelen">
</div>
<div id="spelers"></div>
<div id="roomchat"></div>
<form id="mainform" method="post" action="">
<input type="text" class="msge" name="message" maxlenght="100" size="34" autofocus autocomplete="off">
<input type="submit" class="onzin" name="submit" value="Beeldbuisvervuiling">
</form>
</body>
</html>
Tot zover werkt het verhaal. Maar in het onderstaande verhaal gaat het gruwelijk mis, de opgevraagde pagina verschijnt niet & het geheel loopt vast,,,,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
<!--
$('.vaag5').click(function() {
//alert("functie vaag5 doet het");
$('.spellen').hide();
$('.foei').load('gamelist.phtml');
});
//-->
</script>
</head>
<body>
<div id="huh"><h3>Open spellen</h3></div>
<input type="button" class="vaag5" value="Stop">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,h2,h3,p {
color: white;
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
}
#geenid {
position: absolute;
top: 60px;
left: 5px;
width: 555px;
height: 530px;
border: 1px solid #008800;
}
.spellen {
position: absolute;
top: 2px;
left: 2px;
width: 549px;
height: 524px;
overflow-y: auto;
border: 1px solid red;
}
/* class foei = een hidden shown div bij jquery dynamisch/statisch */
.foei {
position: relative;
top: 2px;
left: 2px;
width: 549px;
height: 524px;
overflow-y: auto;
border:1px solid yellow;
}
/* div aansturing jquery */
#spelknopjes {
position: absolute;
top: 600px;
left: 5px;
width: 555px;
height: 50px;
border: 1px solid #008800;
}
/* knopjes erbij */
.optie1 {
position: absolute;
top: 10px;
left: 55px;
font-size: 18px;
}
.optie2 {
position: absolute;
top: 10px;
left: 225px;
font-size: 18px;
}
.optie3 {
position: absolute;
top: 10px;
left: 410px;
font-size: 18px;
}
.optie1,.optie2,.optie3 {
font-family: "Comic Sans MS", cursive, sans-serif;
color: #006400;
background-color: #008800;
}
</style>
<title>Free 2 501</title>
<script src="/js/jquery-1.11.2.js"></script>
<script>
$(document).ready(function(){
//alert("Jquery Domain Object Model geladen");
function reload($elem, url, interval) {
(function doReload() {
$elem.load(url, function() {
setTimeout(doReload, interval);
});
})();
}
reload ($('.foei'), 'gamelist.phtml', 8000);
reload ($('#spelers'), 'playlist.phtml', 6000);
reload ($('#roomchat'),'/php/output501.php', 3000);
$('#mainform').submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "/php/input.php",
data: $('#mainform').serialize(),
success: function(data){
$('.msge').val('');
$('.msge').focus();
}
});
});
$('.optie1').click(function() {
$('.foei').hide();
$('.spellen').load('page1.phtml');
});
$('.optie2').click(function() {
$('.foei').hide();
$('.spellen').load('page2.phtml');
});
$('.optie3').click(function() {
$('.foei').hide();
$('.spellen').load('page3.phtml');
});
/* rest van de functies op page html */
});
</script>
</head>
<body>
<div id="geenid">
<div class="spellen"></div>
<div class="foei"></div>
</div>
<div id="spelknopjes">
<input type="button" class="optie1" value="Oefenen">
<input type="button" class="optie2" value="Overzicht">
<input type="button" class="optie3" value="Spelen">
</div>
<div id="spelers"></div>
<div id="roomchat"></div>
<form id="mainform" method="post" action="">
<input type="text" class="msge" name="message" maxlenght="100" size="34" autofocus autocomplete="off">
<input type="submit" class="onzin" name="submit" value="Beeldbuisvervuiling">
</form>
</body>
</html>
Tot zover werkt het verhaal. Maar in het onderstaande verhaal gaat het gruwelijk mis, de opgevraagde pagina verschijnt niet & het geheel loopt vast,,,,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
<!--
$('.vaag5').click(function() {
//alert("functie vaag5 doet het");
$('.spellen').hide();
$('.foei').load('gamelist.phtml');
});
//-->
</script>
</head>
<body>
<div id="huh"><h3>Open spellen</h3></div>
<input type="button" class="vaag5" value="Stop">
</body>
</html>
Ik heb zo het idee dat ik hier ergens zwaar een flater bega, maar waar? Ik zie het even niet meer....
Gewijzigd op 09/02/2015 23:46:32 door - Ariën -
Het probleem is het load verhaal jquery, dit kan slechts eenmaal op een div daarna gaat het mis. Na wat tests bleek dat een div-navigatie op een php basis niet werkte, deze springt na een refresh weer terug naar de begin pagina uit een array.
Het probleem is dat bij een jquery show wel de border van de div verscheen maar niet de inhoud van deze pagina, deze kun je ankeren met een include via php. Er zat alleen een probleem in het click & submit jquery verhaal. De functies zullen allen een click functie moeten hebben. Zo niet krijg je rare neveneffecten(bug?) zoals een chat die 3x de tekst verzendt & alerts die 3x weggeklikt moeten worden. event.prefendDefault doet, in dit geval, wonderen.
Het is een beetje een 1/2 om 1/2 jquery - php verhaal geworden maar het werkt zonder problemen, dus voor degenen die dit verhaal in de toekomst nog tegen gaan komen zet ik oplossing hier neer. Het scheelt een hoop geklooi, frustraties & tijd.
Code (php)
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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/site.css">
<title>Free 2 501</title>
<script src="/js/jquery-1.11.2.js"></script>
<script>
$(document).ready(function(){
$('.spel1, .spel2, .spel3, .spel4').hide();
function reload($elem, url, interval) {
(function doReload() {
$elem.load(url, function() {
setTimeout(doReload, interval);
});
})();
}
reload ($('.spel'), 'gamelist.phtml', 8000);
reload ($('#spelers'), 'playlist.phtml', 6000);
reload ($('#roomchat'),'/php/output501.php', 3000);
/* $('#mainform').submit(function(event){ // Formulier verzendt 4 keer, waarom 4 keer? */
$('.onzin').click(function(event){ // formulier verzendt normaal
event.preventDefault();
$.ajax({
type: "POST",
url: "/php/input.php",
data: $('#mainform').serialize(),
success: function(data){
$('#mainform')[0].reset();
$('.msge').focus();
}
});
});
/* Dit kan misschien sneller, maar de
hoveelheid css die ervoor nodig qua
positioneren maakt het geheel trager */
$('.optie1').click(function(){
$('.spel, .spel3, .spel4').hide();
$('.spel2').show();
});
$('.optie2').click(function(){
$('.spel, .spel2, .spel4').hide();
$('.spel3').show();
});
$('.optie3').click(function(){
$('.spel, .spel2, .spel3').hide();
$('.spel4').show();
});
/* page1.phtml */
$('.vaag1').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();
});
/* page2.phtml */
$('.vaag5').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();
});
/* page 3.phtml */
$('.vaag3').click(function(){
alert("hoi hoi hoi");
});
$('.vaag4').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();
});
});
</script>
</head>
<body>
<div id="geenid">
<div class="spel"></div>
<div class="spel2"><?php include("page1.phtml"):?></div>
<div class="spel3"><?php include("page2.phtml");?></div>
<div class="spel4"><?php include("page3.phtml");?></div>
</div>
<div id="spelknopjes">
<input type="button" class="optie1" value="Oefenen">
<input type="button" class="optie2" value="Overzicht">
<input type="button" class="optie3" value="Spelen">
</div>
<div id="spelers"></div>
<div id="roomchat"></div>
<form id="mainform" method="post"> <!-- action="" verwijderd //-->
<input type="text" class="msge" name="message" maxlenght="100" size="34" autofocus autocomplete="off">
<input type="submit" class="onzin" value="Beeldbuisvervuiling"> <!-- name=submit" verwijderd //-->
</form>
</body>
</html>
Dat was dus het hele verhaal.
[size=xsmall][i]Toevoeging op 09/02/2015 23:42:50:[/i][/size]
En page2.phtml binnen de div, is uitbreidbaar maar meer om het idee achter het geheel te laten zien. Het geheel is gewoon uitbreidbaar indien nodig.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="/js/room501.js"></script>
</head>
<body>
<div id="huh"><h3>Open spellen</h3></div>
<input type="button" class="vaag5" value="Stop">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/site.css">
<title>Free 2 501</title>
<script src="/js/jquery-1.11.2.js"></script>
<script>
$(document).ready(function(){
$('.spel1, .spel2, .spel3, .spel4').hide();
function reload($elem, url, interval) {
(function doReload() {
$elem.load(url, function() {
setTimeout(doReload, interval);
});
})();
}
reload ($('.spel'), 'gamelist.phtml', 8000);
reload ($('#spelers'), 'playlist.phtml', 6000);
reload ($('#roomchat'),'/php/output501.php', 3000);
/* $('#mainform').submit(function(event){ // Formulier verzendt 4 keer, waarom 4 keer? */
$('.onzin').click(function(event){ // formulier verzendt normaal
event.preventDefault();
$.ajax({
type: "POST",
url: "/php/input.php",
data: $('#mainform').serialize(),
success: function(data){
$('#mainform')[0].reset();
$('.msge').focus();
}
});
});
/* Dit kan misschien sneller, maar de
hoveelheid css die ervoor nodig qua
positioneren maakt het geheel trager */
$('.optie1').click(function(){
$('.spel, .spel3, .spel4').hide();
$('.spel2').show();
});
$('.optie2').click(function(){
$('.spel, .spel2, .spel4').hide();
$('.spel3').show();
});
$('.optie3').click(function(){
$('.spel, .spel2, .spel3').hide();
$('.spel4').show();
});
/* page1.phtml */
$('.vaag1').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();
});
/* page2.phtml */
$('.vaag5').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();
});
/* page 3.phtml */
$('.vaag3').click(function(){
alert("hoi hoi hoi");
});
$('.vaag4').click(function(){
$('.spel2, .spel3, .spel4').hide();
$('.spel').show();
});
});
</script>
</head>
<body>
<div id="geenid">
<div class="spel"></div>
<div class="spel2"><?php include("page1.phtml"):?></div>
<div class="spel3"><?php include("page2.phtml");?></div>
<div class="spel4"><?php include("page3.phtml");?></div>
</div>
<div id="spelknopjes">
<input type="button" class="optie1" value="Oefenen">
<input type="button" class="optie2" value="Overzicht">
<input type="button" class="optie3" value="Spelen">
</div>
<div id="spelers"></div>
<div id="roomchat"></div>
<form id="mainform" method="post"> <!-- action="" verwijderd //-->
<input type="text" class="msge" name="message" maxlenght="100" size="34" autofocus autocomplete="off">
<input type="submit" class="onzin" value="Beeldbuisvervuiling"> <!-- name=submit" verwijderd //-->
</form>
</body>
</html>
Dat was dus het hele verhaal.
[size=xsmall][i]Toevoeging op 09/02/2015 23:42:50:[/i][/size]
En page2.phtml binnen de div, is uitbreidbaar maar meer om het idee achter het geheel te laten zien. Het geheel is gewoon uitbreidbaar indien nodig.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="/js/room501.js"></script>
</head>
<body>
<div id="huh"><h3>Open spellen</h3></div>
<input type="button" class="vaag5" value="Stop">
</body>
</html>
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken. Graag ook relevante code gebruiken tot +/- 20 regels.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Toevoeging op 10/02/2015 00:53:45:
Sorry, -Aar-. Zal er in het vervolg op letten.
Gewijzigd op 09/02/2015 23:47:18 door - Ariën -