pagina update met info uit database

- Ariën - op 21/07/2016 15:28:37

Het enige wat AJAX doet is de data a-synchroon ophalen. De gegevens uit de database ophalen moet je zelf fabriceren met PHP en MySQL. Dus maak die stap maar eens eerst.

Die stap is niet zo moeilijk dat heb ik al.
Ik heb nu een aantal pagina's die d.m.v. een loop (javascript) worden opgehaald in een iframe maar dat vreet enorm veel geheugen.
Dus wat ik eigenlijk wil een standaard pagina die alleen de data refreshed.

<script language="JavaScript">
var pages = new Array(
'/screen/klasse.php?klasse=ZAT1'
,'/screen/klasse.php?klasse=ZAT2'
,'/screen/klasse.php?klasse=ZON'
,'/screen/nieuws1.php'
,'/screen/klasse.php?klasse=A'
,'/screen/klasse.php?klasse=B'
,'/screen/klasse.php?klasse=C'
,'/screen/klasse.php?klasse=D1'
,'/screen/klasse.php?klasse=D2'
,'/screen/pin1.php'
,'/screen/klasse.php?klasse=E1'
,'/screen/klasse.php?klasse=E2'
,'/screen/klasse.php?klasse=F1'
,'/screen/klasse.php?klasse=F2'
,'/screen/klasse.php?klasse=MP'
,'/screen/klasse.php?klasse=M'
,'/screen/klok.php'
,'/screen/buien.php'
);

var pagesstand = new Array(
'/stand/tussen.php'
,'/stand/stand.php'
,'/screen/klasse.php?klasse=A'
,'/screen/stand.php?teamID=9'
,'/screen/klasse.php?klasse=B'
,'/screen/stand.php?teamID=14'
,'/screen/klasse.php?klasse=ZAT1'
,'/screen/klasse.php?klasse=ZAT2'
);

var i=0;
var time=10000; // this is set in milliseconds
var countDownInterval=12;

var d = new Date();
var m = d.getMinutes();
var h = d.getHours();
if ( m < 10)
    var m = m + 10


var time = (" " + h + m+" ")
//alert (time)
// below should be 1430 1830 when comp starts
if ( time >= 1430 && time <= 1830 )
    {
    var pages=pagesstand;
    }


function pageChange() {
document.getElementById("frame").src=pages[i];

if(i==pages.length) {
i=0;
window.location.reload()
}
i++;
}
onload=pageChange;

var countDownTime=countDownInterval+1;

function countDown(){
countDownTime--;
if (countDownTime <=0){
countDownTime=countDownInterval;
clearTimeout(counter)
//window.location.reload()
pageChange();
countDownTime++;
countDown();

return
}
if (document.all) //if IE 4+
document.all.countDownText.innerText = countDownTime+" ";
else if (document.getElementById) //else if NS6+
document.getElementById("countDownText").innerHTML=countDownTime+" "
else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWN
//document.c_reload.document.c_reload2.document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' </b> seconds')
//document.c_reload.document.c_reload2.document.close()
}
counter=setTimeout("countDown()", 1000);
}

function startit(){
if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWN
document.write('<div class="countpos"><b id="countDownText">'+countDownTime+' </b></div>')
countDown();
}

if (document.all||document.getElementById)
startit();
else
window.onload=startit;

</script>

<div id="container">
<iframe id="frame" src="" bgcolor=red width=100% height=1024 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" allowTransparency="true">
<?php
include_once('news.php');
?>
</iframe>
</div>


<?php
include('footer.html');
?>

Patrick G op 22/07/2016 12:11:27

Dus wat ik eigenlijk wil een standaard pagina die alleen de data refreshed.

Maar al die pagina's (/screen/klasse.php?klasse=ZAT1 etc.), omvatten deze een compleet en op zichzelf staand HTML-document, of enkel een HTML-snippet? Als je dit inricht zul je ook moeten nadenken over een efficiënt transport van de genoemde data.

Het klinkt alsof je een soort van dashboard aan het maken bent. Je zou een aantal divjes aan kunnen maken op je overzichtspagina, elk met een id - en dan middels AJAX op gezette tijden HTML (of JSON) snippets in kunnen laden in de daarvoor bestemde doel-div. Je haalt dan enkel relevante "data" op, en geen extra overhead.

Ik heb zitten zoeken en proberen maar het lukt me niet.
Het is idd een soort dashboard maar dan met uitslagen van wedstrijden. Deze worden ingevoerd en moeten dan direct zichtbaar zijn.
Zoals ik het nu doe, met een iframe, wordt steeds trager.

Heb je niet een voorbeeld voor me ofzo?

Voor het gemak heb ik even wat code uit mijn site gehaald, en licht aangepast.
het maakt gebruik van het jQuery-framework. De data wordt geladen in een divje met class="result".

Op mijn site gebruik ik dit (in iets aangepast versie) voor de actuele vertrektijden die elke 30 seconden via AJAX verversen.

loadData();
function loadData() {
		$.ajax({
			url: "script.php",
			cache: false,
			success: function(html){
				$(".result").empty().html(html);
				setTimeout(function () { 
					loadData(); 
				}, 30000); // 30 sec.
			},
			error:function (xhr, ajaxOptions, thrownError){
					$(".result").empty().html('Er is een fout opgetreden:'+ xhr.status + ' '+ thrownError);
			      }    
		});
	}

Bedankt voor je voorbeeld.

Ik heb het nu zo gedaan:

setTimeout(function() { $("#div1").slideUp( "slow").fadeIn(1000).delay(1000).load("/screen/klasse.php?klasse=E1"); }, 0000);
setTimeout(function() { $("#div1").slideUp( "slow").fadeIn(1000).delay(1000).load("/screen/klasse.php?klasse=D1"); }, 12000);

Op zich werkt dit wel maar niet goed.
Wat er nu gebeurd is:
scherm 1, scherm 2, slideup, fadein, scherm2

Wat er eigenlijk moet gebeuren
scherm 1, slideup, fadein, scherm 2

Waarom toont dit dus eerst scherm1 dan scherm2 dan pas de slideup en fadein en dan weer scherm 2?