pagina update met info uit database
Hoe kan ik een pagina die info toont uit een database (mysql) verversen met data zonder dat de pagina een refresh krijgt?
Dus zodra er een verandering is met data; dat dit gelijk getoond wordt.
Gewijzigd op 19/07/2016 12:59:34 door Patrick G
- Ariën - op 19/07/2016 13:00:37:
Heb je al die URL aangeklikt?
Jep .. dat heb ik gedaan. Er staan alleen geen voorbeelden.
bekijk de tutorials maar eens goed.
Hoe ligt je kennis met JavaScript en e.v.t het jQuery-framework eigenlijk?
Gewijzigd op 21/07/2016 15:02:04 door - Ariën -
- Ariën - op 21/07/2016 14:43:14:
Dat is raar, want ik zie ze wel?
bekijk de tutorials maar eens goed.
Hoe ligt je kennis met JavaScript en e.v.t het jQuery-framework eigenlijk?
bekijk de tutorials maar eens goed.
Hoe ligt je kennis met JavaScript en e.v.t het jQuery-framework eigenlijk?
Ik zie wel voorbeelden dat je bepaalde zaken uit een database kan halen middels jQuery maar wat ik niet kan is vinden is wat ik eigenlijk wil doen.
En ja, ik heb minimale kennis vandaar dat ik vroeg om een voorbeeld.
- Ariën - op 21/07/2016 15:28:37:
Het enige wat AJAX doet is de data a-synchroon ophalen. De gegevens uit de database ophalen moet je zelf fabriceren met PHP en MySQL. Dus maak die stap maar eens eerst.
Die stap is niet zo moeilijk dat heb ik al.
Ik heb nu een aantal pagina's die d.m.v. een loop (javascript) worden opgehaald in een iframe maar dat vreet enorm veel geheugen.
Dus wat ik eigenlijk wil een standaard pagina die alleen de data refreshed.
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
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
<script language="JavaScript">
var pages = new Array(
'/screen/klasse.php?klasse=ZAT1'
,'/screen/klasse.php?klasse=ZAT2'
,'/screen/klasse.php?klasse=ZON'
,'/screen/nieuws1.php'
,'/screen/klasse.php?klasse=A'
,'/screen/klasse.php?klasse=B'
,'/screen/klasse.php?klasse=C'
,'/screen/klasse.php?klasse=D1'
,'/screen/klasse.php?klasse=D2'
,'/screen/pin1.php'
,'/screen/klasse.php?klasse=E1'
,'/screen/klasse.php?klasse=E2'
,'/screen/klasse.php?klasse=F1'
,'/screen/klasse.php?klasse=F2'
,'/screen/klasse.php?klasse=MP'
,'/screen/klasse.php?klasse=M'
,'/screen/klok.php'
,'/screen/buien.php'
);
var pagesstand = new Array(
'/stand/tussen.php'
,'/stand/stand.php'
,'/screen/klasse.php?klasse=A'
,'/screen/stand.php?teamID=9'
,'/screen/klasse.php?klasse=B'
,'/screen/stand.php?teamID=14'
,'/screen/klasse.php?klasse=ZAT1'
,'/screen/klasse.php?klasse=ZAT2'
);
var i=0;
var time=10000; // this is set in milliseconds
var countDownInterval=12;
var d = new Date();
var m = d.getMinutes();
var h = d.getHours();
if ( m < 10)
var m = m + 10
var time = (" " + h + m+" ")
//alert (time)
// below should be 1430 1830 when comp starts
if ( time >= 1430 && time <= 1830 )
{
var pages=pagesstand;
}
function pageChange() {
document.getElementById("frame").src=pages[i];
if(i==pages.length) {
i=0;
window.location.reload()
}
i++;
}
onload=pageChange;
var countDownTime=countDownInterval+1;
function countDown(){
countDownTime--;
if (countDownTime <=0){
countDownTime=countDownInterval;
clearTimeout(counter)
//window.location.reload()
pageChange();
countDownTime++;
countDown();
return
}
if (document.all) //if IE 4+
document.all.countDownText.innerText = countDownTime+" ";
else if (document.getElementById) //else if NS6+
document.getElementById("countDownText").innerHTML=countDownTime+" "
else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWN
//document.c_reload.document.c_reload2.document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')
//document.c_reload.document.c_reload2.document.close()
}
counter=setTimeout("countDown()", 1000);
}
function startit(){
if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWN
document.write('<div class="countpos"><b id="countDownText">'+countDownTime+' </b></div>')
countDown();
}
if (document.all||document.getElementById)
startit();
else
window.onload=startit;
</script>
<div id="container">
<iframe id="frame" src="" bgcolor=red width=100% height=1024 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" allowTransparency="true">
<?php
include_once('news.php');
?>
</iframe>
</div>
<?php
include('footer.html');
?>
var pages = new Array(
'/screen/klasse.php?klasse=ZAT1'
,'/screen/klasse.php?klasse=ZAT2'
,'/screen/klasse.php?klasse=ZON'
,'/screen/nieuws1.php'
,'/screen/klasse.php?klasse=A'
,'/screen/klasse.php?klasse=B'
,'/screen/klasse.php?klasse=C'
,'/screen/klasse.php?klasse=D1'
,'/screen/klasse.php?klasse=D2'
,'/screen/pin1.php'
,'/screen/klasse.php?klasse=E1'
,'/screen/klasse.php?klasse=E2'
,'/screen/klasse.php?klasse=F1'
,'/screen/klasse.php?klasse=F2'
,'/screen/klasse.php?klasse=MP'
,'/screen/klasse.php?klasse=M'
,'/screen/klok.php'
,'/screen/buien.php'
);
var pagesstand = new Array(
'/stand/tussen.php'
,'/stand/stand.php'
,'/screen/klasse.php?klasse=A'
,'/screen/stand.php?teamID=9'
,'/screen/klasse.php?klasse=B'
,'/screen/stand.php?teamID=14'
,'/screen/klasse.php?klasse=ZAT1'
,'/screen/klasse.php?klasse=ZAT2'
);
var i=0;
var time=10000; // this is set in milliseconds
var countDownInterval=12;
var d = new Date();
var m = d.getMinutes();
var h = d.getHours();
if ( m < 10)
var m = m + 10
var time = (" " + h + m+" ")
//alert (time)
// below should be 1430 1830 when comp starts
if ( time >= 1430 && time <= 1830 )
{
var pages=pagesstand;
}
function pageChange() {
document.getElementById("frame").src=pages[i];
if(i==pages.length) {
i=0;
window.location.reload()
}
i++;
}
onload=pageChange;
var countDownTime=countDownInterval+1;
function countDown(){
countDownTime--;
if (countDownTime <=0){
countDownTime=countDownInterval;
clearTimeout(counter)
//window.location.reload()
pageChange();
countDownTime++;
countDown();
return
}
if (document.all) //if IE 4+
document.all.countDownText.innerText = countDownTime+" ";
else if (document.getElementById) //else if NS6+
document.getElementById("countDownText").innerHTML=countDownTime+" "
else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWN
//document.c_reload.document.c_reload2.document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')
//document.c_reload.document.c_reload2.document.close()
}
counter=setTimeout("countDown()", 1000);
}
function startit(){
if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWN
document.write('<div class="countpos"><b id="countDownText">'+countDownTime+' </b></div>')
countDown();
}
if (document.all||document.getElementById)
startit();
else
window.onload=startit;
</script>
<div id="container">
<iframe id="frame" src="" bgcolor=red width=100% height=1024 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" allowTransparency="true">
<?php
include_once('news.php');
?>
</iframe>
</div>
<?php
include('footer.html');
?>
Patrick G op 22/07/2016 12:11:27:
Dus wat ik eigenlijk wil een standaard pagina die alleen de data refreshed.
Maar al die pagina's (/screen/klasse.php?klasse=ZAT1 etc.), omvatten deze een compleet en op zichzelf staand HTML-document, of enkel een HTML-snippet? Als je dit inricht zul je ook moeten nadenken over een efficiënt transport van de genoemde data.
Het klinkt alsof je een soort van dashboard aan het maken bent. Je zou een aantal divjes aan kunnen maken op je overzichtspagina, elk met een id - en dan middels AJAX op gezette tijden HTML (of JSON) snippets in kunnen laden in de daarvoor bestemde doel-div. Je haalt dan enkel relevante "data" op, en geen extra overhead.
Het is idd een soort dashboard maar dan met uitslagen van wedstrijden. Deze worden ingevoerd en moeten dan direct zichtbaar zijn.
Zoals ik het nu doe, met een iframe, wordt steeds trager.
Heb je niet een voorbeeld voor me ofzo?
het maakt gebruik van het jQuery-framework. De data wordt geladen in een divje met class="result".
Op mijn site gebruik ik dit (in iets aangepast versie) voor de actuele vertrektijden die elke 30 seconden via AJAX verversen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
loadData();
function loadData() {
$.ajax({
url: "script.php",
cache: false,
success: function(html){
$(".result").empty().html(html);
setTimeout(function () {
loadData();
}, 30000); // 30 sec.
},
error:function (xhr, ajaxOptions, thrownError){
$(".result").empty().html('Er is een fout opgetreden:'+ xhr.status + ' '+ thrownError);
}
});
}
function loadData() {
$.ajax({
url: "script.php",
cache: false,
success: function(html){
$(".result").empty().html(html);
setTimeout(function () {
loadData();
}, 30000); // 30 sec.
},
error:function (xhr, ajaxOptions, thrownError){
$(".result").empty().html('Er is een fout opgetreden:'+ xhr.status + ' '+ thrownError);
}
});
}
Gewijzigd op 31/07/2016 14:04:49 door - Ariën -
Ik heb het nu zo gedaan:
Code (php)
1
2
2
setTimeout(function() { $("#div1").slideUp( "slow").fadeIn(1000).delay(1000).load("/screen/klasse.php?klasse=E1"); }, 0000);
setTimeout(function() { $("#div1").slideUp( "slow").fadeIn(1000).delay(1000).load("/screen/klasse.php?klasse=D1"); }, 12000);
setTimeout(function() { $("#div1").slideUp( "slow").fadeIn(1000).delay(1000).load("/screen/klasse.php?klasse=D1"); }, 12000);
Op zich werkt dit wel maar niet goed.
Wat er nu gebeurd is:
scherm 1, scherm 2, slideup, fadein, scherm2
Wat er eigenlijk moet gebeuren
scherm 1, slideup, fadein, scherm 2
Waarom toont dit dus eerst scherm1 dan scherm2 dan pas de slideup en fadein en dan weer scherm 2?