PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
K

Refresh data ajax

Door Kevin Hettema op 12-03-2021 18:52 gewijzigd op 12-03-2021 18:58
3.375 views
Beste leden,

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:

<?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> &nbsp; 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>
- Ariën -
14-03-2021 11:54 gewijzigd op 14-03-2021 11:57
Zoals ik eerder al zei: maak een apart script die het ophaalt. En roep die in je load() aan.

Nu roep je dezelfde pagina aan met een anchor.
K Kevin Hettema
14-03-2021 12:30 gewijzigd op 14-03-2021 12:39
Hoi Ariën,

Sorry ben niet echt een topper op dit gebied.
Ik heb nu in de index : <?php include ('refresh.php');?>

En als extra bestand refresh.php staat:

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<div id="listeners"></div>
<script>
0

$(document).ready(function() {
var pageRefresh = 1000; //5 s
    setInterval(function() {
        refresh();
    }, pageRefresh);
});

// Functions

function refresh() {

 	  $('#listeners').load(location.href + " #listeners");
}
</script>
- Ariën -
14-03-2021 13:14 gewijzigd op 14-03-2021 13:27
Je roept nu steeds hetzelfde bestand aan die zichzelf weer aanroept en die zichzelf weer aanroept etc....
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.
K Kevin Hettema
14-03-2021 14:30
Ik ga wat proberen bedankt voor uw support !

[size=xsmall]Toevoeging op 14/03/2021 14:40:44:[/size]

en de .load moet ik die plaatsen op mijn index.php ?
- Ariën -
14-03-2021 14:51
Dat klopt.
K Kevin Hettema
14-03-2021 17:08
Bedankt voor uw hulp.
Ik laat het hierbij.
Kom er niet uit na een dag proberen.

Fijne dag verder ;)
- Ariën -
14-03-2021 17:09
Waar loop je op vast?
Wat heb je geprobeerd? We kunnen vast wel helpen.
A Adoptive Solution
14-03-2021 20:02
Kijk eens aan.

Hier gevonden. Toch alweer 12 jaar geleden.

https://www.sitepoint.com/community/t/refresh-div-content-without-reloading-page/5353/4

refresh.html

<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>


refresh.php

<?php
echo "<td>" . date("l")     . "</td>";
echo "<td>" . date("d M Y") . "</td>";
echo "<td>" . date("H:i:s") . "</td>";
?>


Magic word : oefenen.
A Adoptive Solution
15-03-2021 13:09 gewijzigd op 15-03-2021 13:10
Met refresh.php haal je een reeks datasetjes op zoals dit :

<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>


die je vervolgens in

<div id="listeners"></div>


zet met :

<script>
var auto_refresh = setInterval(
function()
{
	$('#listeners').load('slow').load('refresh.php').fadeIn("slow");
}, 2000);
</script>

Reageren

Inloggen om te reageren