PHP code opnieuw uitvoeren bij jquery refresh
Ik ben bezig met een klein projectje waar de leerlingen van m'n school kunnen zien waar ze gym hebben, in de zaal of op het veld. Nu heb ik het php-script in elkaar zitten en het werkt.
Béhalve één ding, ik heb namelijk een jquery refresh ingebouwd wat de div elke x seconden refreshed, zodat het up-to-date blijft. Alleen nu heb ik het probleem dat de div wel gerefreshed wordt, maar dat de php-code niet opnieuw uitgevoerd wordt ;(
LINKLINK
JQuery code
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#table').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 5000);
</script>
<script>
var auto_refresh = setInterval(
function()
{
$('#table').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 5000);
</script>
Toevoeging op 06/09/2012 19:42:52:
Nog even de hele code:
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
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
<!DOCTYPE hmtl>
<html>
<head>
<title>Locatie GYM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#table').fadeOut('slow').load('index.php').fadeIn("slow");
}, 5000);
</script>
</head>
<body bgcolor="#E7EBEF">
<div id="table">
<table>
<th>Docent</td>
<th>Locatie</th>
<th>Laatste Update</th>
<?php
include('../gym/scripts/configuratie.php');
$query = mysql_query("SELECT * FROM test ");
while($verwerking = mysql_fetch_assoc($query)) {
if( $verwerking['stat'] == 1)
{
$loc = '<span style="color: blue">Veld</span><br>';
}
if( $verwerking['stat'] == 2)
{
$loc = '<span style="color: green">Zaal</span><br>';
}
if( $verwerking['stat'] == 0)
{
$loc = '<span style="color: orange">Onbekend</span><br>';
}
if( $verwerking['lastupdate'] == '0000-00-00 00:00:00')
{
$update = '<span style="color: red; text-weight: bold;">Error!</span><br>';
}
else
{
$update = $verwerking['lastupdate'];
}
?>
<tr>
<td>
<?php echo $verwerking['doc']; ?>
</td>
<td style="text-align: center;">
<?php echo $loc; ?>
</td>
<td>
<?php echo $update ?>
</td>
</tr>
<?php
}
?>
</table>
</div>
</body>
</html>
<html>
<head>
<title>Locatie GYM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#table').fadeOut('slow').load('index.php').fadeIn("slow");
}, 5000);
</script>
</head>
<body bgcolor="#E7EBEF">
<div id="table">
<table>
<th>Docent</td>
<th>Locatie</th>
<th>Laatste Update</th>
<?php
include('../gym/scripts/configuratie.php');
$query = mysql_query("SELECT * FROM test ");
while($verwerking = mysql_fetch_assoc($query)) {
if( $verwerking['stat'] == 1)
{
$loc = '<span style="color: blue">Veld</span><br>';
}
if( $verwerking['stat'] == 2)
{
$loc = '<span style="color: green">Zaal</span><br>';
}
if( $verwerking['stat'] == 0)
{
$loc = '<span style="color: orange">Onbekend</span><br>';
}
if( $verwerking['lastupdate'] == '0000-00-00 00:00:00')
{
$update = '<span style="color: red; text-weight: bold;">Error!</span><br>';
}
else
{
$update = $verwerking['lastupdate'];
}
?>
<tr>
<td>
<?php echo $verwerking['doc']; ?>
</td>
<td style="text-align: center;">
<?php echo $loc; ?>
</td>
<td>
<?php echo $update ?>
</td>
</tr>
<?php
}
?>
</table>
</div>
</body>
</html>
(Graag alleen reageren op de jquery-gebeuren, en niet om dingen die anders zouden moeten in php)
Gewijzigd op 06/09/2012 19:51:05 door - Ariën -
Voorbeeldje:
Code (php)
1
2
3
2
3
$.post('pagina.php', function(data) {
alert(data);
});
alert(data);
});
Data is dan het result van de request.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#table').fadeOut('slow').load('location.php').fadeIn("slow");
}, 3000);
</script>
<script>
var auto_refresh = setInterval(
function()
{
$('#table').fadeOut('slow').load('location.php').fadeIn("slow");
}, 3000);
</script>
Is wat ik gebruik.
Alleen zit ik nu met één probleemje, dat is dat als ik de 'locatie' wijzig, je dat al ziet voordat hij gaat infaden (jquert).
Hoe kan ik dat oplossen?
Toevoeging op 06/09/2012 19:56:24:
Ook duurt het lang voordat hij aan het begin is ingeladen
Gewijzigd op 06/09/2012 20:58:37 door - Raoul -
Eerst de data laden. Dan beginnen faden (out). als de fade out voltooid is, de data vervangen op de pagina. Dan pas fade In. En dan pas beginnen met 3 seconden te wachten vooraleer alles opnieuw te beginnen.
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Load page - fade out - fade in</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function($) {
function refresh_page() {
var tableElm = $('#table'); // het element cachen.
// eerst de pagina al laden
// start Ajax call
$.ajax({
url: 'location.php',
success: function(data) {
// de pagina is geladen. Nu gaan we pas beginnen faden
tableElm.fadeOut('slow',
function(e) { // pas als fadeout gedaan is, veranderen we de data
tableElm.html(data)
}
).fadeIn("slow");
// en nu pas gaan we deze functie opnieuw oproepen, na een timeout
setTimeout(refresh_page, 3000);
}
});
}
// functie voor de eerste keer oproepen
refresh_page();
});
</script>
</head>
<body>
<div id="table">Test</div>
</body>
</html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Load page - fade out - fade in</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function($) {
function refresh_page() {
var tableElm = $('#table'); // het element cachen.
// eerst de pagina al laden
// start Ajax call
$.ajax({
url: 'location.php',
success: function(data) {
// de pagina is geladen. Nu gaan we pas beginnen faden
tableElm.fadeOut('slow',
function(e) { // pas als fadeout gedaan is, veranderen we de data
tableElm.html(data)
}
).fadeIn("slow");
// en nu pas gaan we deze functie opnieuw oproepen, na een timeout
setTimeout(refresh_page, 3000);
}
});
}
// functie voor de eerste keer oproepen
refresh_page();
});
</script>
</head>
<body>
<div id="table">Test</div>
</body>
</html>
Ik heb wat een probleem met de functie load(). Ik vind dat dat het asynchrone karakter van AJAX nogal wegmoffelt.
Als je dan niet goed weet hoe javascript werkt, verlies je volledig de voeling met wat je probeert te realiseren.
Je hebt geen enkel idee hoe lang het duurt, bij de gebruiker, om een data te laden met Ajax. Als je dat dan aan het toeval overlaat ...
Gewijzigd op 07/09/2012 12:19:17 door Kris Peeters