Refresh data ajax

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 3 volgende »

Kevin Hettema

Kevin Hettema

12/03/2021 18:52:21
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>
Gewijzigd op 12/03/2021 18:58:03 door Kevin Hettema
 
PHP hulp

PHP hulp

26/10/2021 23:59:58
 
- Ariën -
Beheerder

- Ariën -

12/03/2021 18:54:35
Quote Anchor link
Kan je jouw code tussen code-tags zetten?
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 -
 
Kevin Hettema

Kevin Hettema

12/03/2021 18:59:55
Quote Anchor link
Beste 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>
 
- Ariën -
Beheerder

- Ariën -

12/03/2021 19:03:55
Quote Anchor link
Ik raad aan om een apart script te maken die de data ophaalt. Nu voeg je hoogstwaarschijnlijk twee HTML-documentstructuren in één, wat niet kan.

Een AJAX-request is immers geen i-frame.
 
Kevin Hettema

Kevin Hettema

12/03/2021 19:22:24
Quote Anchor link
Kan ik dit in een apart script zetten ?
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>
 
- Ariën -
Beheerder

- Ariën -

12/03/2021 19:24:50
Quote Anchor link
De data komt uit PHP, en die kan je in een apart script uitvoeren bijvoorbeeld: /ajax/RadioData.php

Lees ook even je Privébericht a.u.b.
Gewijzigd op 12/03/2021 19:25:32 door - Ariën -
 
Kevin Hettema

Kevin Hettema

12/03/2021 19:27:43
Quote Anchor link
Ik heb nu de pagina werkend.
Maar hij blijft de pagina dubbel onder elkaar weergeven.
 
- Ariën -
Beheerder

- Ariën -

12/03/2021 19:30:17
Quote Anchor link
Dan laad je je pagina blijkbaar dubbel in.
Je moet immers NIET dezelfde pagina in je .load() aanroepen, als je dat doet.
 
Kevin Hettema

Kevin Hettema

12/03/2021 19:47:53
Quote Anchor link
In de .load heb ik een div staan
 
- Ariën -
Beheerder

- Ariën -

12/03/2021 20:40:12
Quote Anchor link
Welke URL vraag je in je load() op?
Gewijzigd op 12/03/2021 20:56:38 door - Ariën -
 
Kevin Hettema

Kevin Hettema

14/03/2021 11:50:33
Quote Anchor link
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<div id="radioDetails"></div>
<script>

$("#radioDetails").load(window.location.href + "#" );
}, 3000);
});
</script>
 
- Ariën -
Beheerder

- Ariën -

14/03/2021 11:54:03
Quote Anchor link
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.
Gewijzigd op 14/03/2021 11:57:02 door - Ariën -
 
Kevin Hettema

Kevin Hettema

14/03/2021 12:30:17
Quote Anchor link
Hoi Ariën,

Sorry ben niet echt een topper op dit gebied.
Ik heb nu in de index :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php include ('refresh.php');?>


En als extra bestand refresh.php staat:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<script src="https://code.jquery.com/jquery-3.5.1.js"></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
 
- Ariën -
Beheerder

- Ariën -

14/03/2021 13:14:05
Quote Anchor link
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.
Gewijzigd op 14/03/2021 13:27:17 door - Ariën -
 
Kevin Hettema

Kevin Hettema

14/03/2021 14:30:31
Quote Anchor link
Ik ga wat proberen bedankt voor uw support !

Toevoeging op 14/03/2021 14:40:44:

en de .load moet ik die plaatsen op mijn index.php ?
 
- Ariën -
Beheerder

- Ariën -

14/03/2021 14:51:42
Quote Anchor link
Dat klopt.
 
Kevin Hettema

Kevin Hettema

14/03/2021 17:08:07
Quote Anchor link
Bedankt voor uw hulp.
Ik laat het hierbij.
Kom er niet uit na een dag proberen.

Fijne dag verder ;)
 
- Ariën -
Beheerder

- Ariën -

14/03/2021 17:09:49
Quote Anchor link
Waar loop je op vast?
Wat heb je geprobeerd? We kunnen vast wel helpen.
 
Adoptive Solution

Adoptive Solution

14/03/2021 20:02:57
Quote Anchor link
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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
echo "<td>" . date("l")     . "</td>";
echo "<td>" . date("d M Y") . "</td>";
echo "<td>" . date("H:i:s") . "</td>";
?>


Magic word : oefenen.
 
Kevin Hettema

Kevin Hettema

15/03/2021 12:35:01
Quote Anchor link
Hallo Adoptive Solution

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 :(
 
Adoptive Solution

Adoptive Solution

15/03/2021 13:09:51
Quote Anchor link
Met refresh.php haal je een reeks datasetjes op zoals dit :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


die je vervolgens in

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div id="listeners"></div>


zet met :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<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
 

Pagina: 1 2 3 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.