Refresh data ajax
Ik wil enkel de data laten refreshen van mijn php pagina.
Volgens mij is dat alleen radioDetails.
Ik heb er weinig kaas van gegeten.
Alle hulp word zeer gewaardeerd!
Dit is wat heb:
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
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
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TELLER</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="topbuts">
<a class="btn" href="./index.php">Ververs</a>
<a class="btn" href="./log_listeners.php" target="_blank">Listeners Updates / Peaks</a>
<div class="clearfix"></div>
</div>
<?php include ('array.php');?>
<div class="content">
<br />
<?php
$peak = file_get_contents ('peak.txt');
if ($data['status'] != '1')
{
echo '<b>Error: Servers Offline...</b>';
}
?>
<br />
<div class="box">
<div class="head"><i class="icon-play-circle"></i> BesteHitsNL - All Icecast & Shoutcast servers</div>
<div class="box-content">
<div class="radioLogo">
<img src="logo120.png">
</div>
<div class="radioDetails">
<b>Listeners:</b> <?php echo $data['listeners']; ?> <br />
<b>Listener Peak:</b> <?php echo $peak; ?> <br />
<b>Total Stream Hits:</b> <?php echo $data['hits']; ?> <br />
</div>
<div class="clearfix" style="border-bottom: 1px solid #C8C8C8;"></div>
<div class="listener">
<div class="col">Hostname</div>
<div class="col">Useragent (Player)</div>
<div class="col">Listen Time</div>
<div class="col">Server</div>
<div class="col">Location</div>
</div>
<div id="listeners">
<?php
if (is_array($data['listeners-list']))
{
foreach ($data['listeners-list'] as $list)
{
$ip = $list['HOSTNAME'];
if ($ip == '127.0.0.1')
{
$LocationString = 'Localhost';
}
else
{
$ipInfo = grabIpInfo($ip);
$ipJsonInfo = json_decode($ipInfo);
$LocationString = $ipJsonInfo->name;
}
echo '<div class="listener">
<div class="col">' . $list['HOSTNAME'] . '</div>
<div class="col">' . $list['USERAGENT'] . '</div>
<div class="col">' . floor($list['CONNECTTIME']/3600)."h ".floor(($list['CONNECTTIME'] / 60) % 60) ."m ".floor($list['CONNECTTIME'] % 60)."s" . '</div>
<div class="col">' . $list['SERVER'] . '</div>
<div class="col">' . $LocationString . '</div>
</div>';
}
}
function grabIpInfo($ip)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://api.ipgeolocationapi.com/geolocate/" . $ip);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
$returnData = curl_exec($curl);
curl_close($curl);
return $returnData;
}
?>
</div>
</div>
</div>
<br /><br />
</div>
</body>
Dit stukje heb ik zelf erneer gezet!
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="radioDetails">dynamic content ?</div>
<script>
$(document).ready(function(){
setInterval(function(){
$("#radioDetails").load(window.location.href + "#radioDetails" );
}, 3000);
});
</script>
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TELLER</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="topbuts">
<a class="btn" href="./index.php">Ververs</a>
<a class="btn" href="./log_listeners.php" target="_blank">Listeners Updates / Peaks</a>
<div class="clearfix"></div>
</div>
<?php include ('array.php');?>
<div class="content">
<br />
<?php
$peak = file_get_contents ('peak.txt');
if ($data['status'] != '1')
{
echo '<b>Error: Servers Offline...</b>';
}
?>
<br />
<div class="box">
<div class="head"><i class="icon-play-circle"></i> BesteHitsNL - All Icecast & Shoutcast servers</div>
<div class="box-content">
<div class="radioLogo">
<img src="logo120.png">
</div>
<div class="radioDetails">
<b>Listeners:</b> <?php echo $data['listeners']; ?> <br />
<b>Listener Peak:</b> <?php echo $peak; ?> <br />
<b>Total Stream Hits:</b> <?php echo $data['hits']; ?> <br />
</div>
<div class="clearfix" style="border-bottom: 1px solid #C8C8C8;"></div>
<div class="listener">
<div class="col">Hostname</div>
<div class="col">Useragent (Player)</div>
<div class="col">Listen Time</div>
<div class="col">Server</div>
<div class="col">Location</div>
</div>
<div id="listeners">
<?php
if (is_array($data['listeners-list']))
{
foreach ($data['listeners-list'] as $list)
{
$ip = $list['HOSTNAME'];
if ($ip == '127.0.0.1')
{
$LocationString = 'Localhost';
}
else
{
$ipInfo = grabIpInfo($ip);
$ipJsonInfo = json_decode($ipInfo);
$LocationString = $ipJsonInfo->name;
}
echo '<div class="listener">
<div class="col">' . $list['HOSTNAME'] . '</div>
<div class="col">' . $list['USERAGENT'] . '</div>
<div class="col">' . floor($list['CONNECTTIME']/3600)."h ".floor(($list['CONNECTTIME'] / 60) % 60) ."m ".floor($list['CONNECTTIME'] % 60)."s" . '</div>
<div class="col">' . $list['SERVER'] . '</div>
<div class="col">' . $LocationString . '</div>
</div>';
}
}
function grabIpInfo($ip)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://api.ipgeolocationapi.com/geolocate/" . $ip);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
$returnData = curl_exec($curl);
curl_close($curl);
return $returnData;
}
?>
</div>
</div>
</div>
<br /><br />
</div>
</body>
Dit stukje heb ik zelf erneer gezet!
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="radioDetails">dynamic content ?</div>
<script>
$(document).ready(function(){
setInterval(function(){
$("#radioDetails").load(window.location.href + "#radioDetails" );
}, 3000);
});
</script>
Gewijzigd op 12/03/2021 18:58:03 door Kevin Hettema
In de editor hebben we deze een handige knop voor.
En kan je ook vertellen waar je precies op vastloopt?
Gewijzigd op 12/03/2021 18:55:16 door - Ariën -
Het laatste stukje zet de pagina er nogmaals compleet onder maar wel gerefresht.
Ik wil graag de data zelf.
Hier moet een fout inzitten:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="radioDetails">dynamic content ?</div>
<script>
$(document).ready(function(){
setInterval(function(){
$("#radioDetails").load(window.location.href + "#radioDetails" );
}, 3000);
});
</script>
Een AJAX-request is immers geen i-frame.
Of mis ik dan wat.
Ik heb u persoonlijk via messenger de link gestuurd.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="radioDetails"></div>
<script>
$(document).ready(function(){
setInterval(function(){
$("#radioDetails").load(window.location.href + "#radioDetails" );
}, 3000);
});
</script>
Lees ook even je Privébericht a.u.b.
Gewijzigd op 12/03/2021 19:25:32 door - Ariën -
Maar hij blijft de pagina dubbel onder elkaar weergeven.
Je moet immers NIET dezelfde pagina in je .load() aanroepen, als je dat doet.
Gewijzigd op 12/03/2021 20:56:38 door - Ariën -
<div id="radioDetails"></div>
<script>
$("#radioDetails").load(window.location.href + "#" );
}, 3000);
});
</script>
Nu roep je dezelfde pagina aan met een anchor.
Gewijzigd op 14/03/2021 11:57:02 door - Ariën -
Sorry ben niet echt een topper op dit gebied.
Ik heb nu in de index :
En als extra bestand refresh.php staat:
Code (php)
1
2
3
4
2
3
4
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="listeners"></div>
<script>
<div id="listeners"></div>
<script>
$(document).ready(function() {
var pageRefresh = 1000; //5 s
setInterval(function() {
refresh();
}, pageRefresh);
});
// Functions
function refresh() {
$('#listeners').load(location.href + " #listeners");
}
</script>
Gewijzigd op 14/03/2021 12:39:56 door Kevin Hettema
Dat is niet de bedoeling.
Dus maak een apart script die de data opvraagt. Puur een simpel script zonder enige opmaak. Noem die bijvoorbeeld ajax_radiodata.php, en roep die aan in je .load() functie.
Onthoud wel dat een AJAX-request niet hetzelfde is als een iframe. Je voert een a-sychrone request uit die je in je HTML-document verwerkt. Een iframe is een embed van een bestaande pagina.
Gewijzigd op 14/03/2021 13:27:17 door - Ariën -
Toevoeging op 14/03/2021 14:40:44:
en de .load moet ik die plaatsen op mijn index.php ?
Ik laat het hierbij.
Kom er niet uit na een dag proberen.
Fijne dag verder ;)
Wat heb je geprobeerd? We kunnen vast wel helpen.
Hier gevonden. Toch alweer 12 jaar geleden.
https://www.sitepoint.com/community/t/refresh-div-content-without-reloading-page/5353/4
refresh.html
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
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
<style>
table {
width: 700px;
border-collapse: collapse;
}
th, td {
padding: 0.500em;
text-align: center;
width: 30%;
}
</style>
<table border="1">
<tr>
<th>Dag</th>
<th>Datum</th>
<th>Tijd</th>
</tr>
<tr id="data"><td colspan="3">Hier komt data</td></tr>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#data').fadeOut('slow').load('refresh.php').fadeIn("slow");
}, 2000);
</script>
table {
width: 700px;
border-collapse: collapse;
}
th, td {
padding: 0.500em;
text-align: center;
width: 30%;
}
</style>
<table border="1">
<tr>
<th>Dag</th>
<th>Datum</th>
<th>Tijd</th>
</tr>
<tr id="data"><td colspan="3">Hier komt data</td></tr>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#data').fadeOut('slow').load('refresh.php').fadeIn("slow");
}, 2000);
</script>
refresh.php
Code (php)
Magic word : oefenen.
https://www.bestehits.nl/radio/teller/index-reserve.php
Dat werkt alleen nu krijg ik die datum eronder.
Id al vaak veranderd maar het lukt nog niet :(
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div class="listener">
<div class="col">88.99.58.156</div>
<div class="col">WinampMPEG/5.50</div>
<div class="col">68h 28m 7s</div>
<div class="col">MP3 stream</div>
<div class="col">Germany</div>
</div>
<div class="col">88.99.58.156</div>
<div class="col">WinampMPEG/5.50</div>
<div class="col">68h 28m 7s</div>
<div class="col">MP3 stream</div>
<div class="col">Germany</div>
</div>
die je vervolgens in
Code (php)
1
<div id="listeners"></div>
zet met :
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
var auto_refresh = setInterval(
function()
{
$('#listeners').load('slow').load('refresh.php').fadeIn("slow");
}, 2000);
</script>
var auto_refresh = setInterval(
function()
{
$('#listeners').load('slow').load('refresh.php').fadeIn("slow");
}, 2000);
</script>
Gewijzigd op 15/03/2021 13:10:11 door Adoptive Solution