Cykliczne wywoływanie funkcji z przeładowaniem fragmentu strony.

Question

Jedna z moich podstron prezentuje dane pobrane z pliku tekstowego.

Struktura html to mniej więcej:

<div class="topBar"></div>
<div class="row">
<div class="leftMenu"></div>
<div class="col">
<div class="text"></div>
<div class="data"></div>
</div>
</div>

Chciałbym co minutę wywoływać funkcję odczytującą dane z pliku i wysyłającą je do tego widoku/podstrony. Przy czym nie chcę aby cała strona się przeładowywała. Ma zmieniać się tylko zawartość diva "data".

Jak to zrobić?

W projekcie używam jQuery.

Answer 1

Żeby wywoływać funkcję co minutę musisz zdefiniować interwał czasowy (dokumentacja tutaj)
Do dynamicznego pobrania nowej zawartości musisz użyć AJAX (dokumentacja tutaj)

Mały przykład użycia:
 

var interval = setInterval(refreshDiv, 60*1000)

function refreshDiv() {
    var xhttp = new XMLHttpRequest()
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var div = document.getElementById("moj_div")
            div.innerHTML = this.responseText;
        }
   };
   xhttp.open("GET", "moja_strona.html", true)
   xhttp.send()
}

 

Comments

Tutaj za odczytanie z pliku odpowiada js, o ile dobrze rozumiem.

Ja buduje na laravelu i w kontrolerze pobieram już dane z pliku i ładuje widok z tymi danymi.

Teraz czy mogę te funkcje w php z kontrolera wywołać co tą minute i wysyłać dane do widoku a JS-em tylko wstawiać te dane gdy przyjdą w odpowiedniego diva?

---

XMLHttpRequest może żądać dowolnego zasobu od serwera www. Może to być zarówno statyczny plik jak i dynamicznie generowana strona lub wywołanie interfejsu REST API.