Jag kom fram till en smidig lösning idag när en kund behövde en sida som automatiskt laddade om för att visa sju olika sidor i tur och ordning och den lösningen tänkte jag dela med mig av. Sidorna som skulle laddas hette någonting i stil med sida.php?id=123. Jag tyckte att sidladdningar var onödigt och ville istället ladda sidan inuti en div-container med hjälp av jQuery. Så här gjorde jag.
var sidIdArr = ['1','2','3','4','5'];
laddaOm(sidIdArr.length);
function laddaOm(idx) {
if(idx>=sidIdArr.length) {
idx=0;
}
$("#main_box").load("/sida.php?id="+sidIdArr[idx++]+" #main_box>*","");
timerID=setTimeout('laddaOm('+idx+')', 30000);
}
Arrayen sidIdArr innehåller alltså id på de sidor vi vill ladda. I funktionen laddaOm kontrollerar vi om vi är på sista positionen i arrayen, om vi är det sätter vi nyckeln till 0 för att börja om från början igen.
I nästa steg laddar vi alltså div’en main_box med innehållet av sidan sida.php?id=XXX, där XXX är aktuellt array-värde. Som ni ser står det #main_box i slutet av urlen, genom att ange en container efter url’en så laddas bara innehållet i denna container, i detta fall är det samma container som vi vill visa datat i. På detta vis kan vi koda hela funktionaliteten i en och samma sida, vi bara byter parameter i anropet. I sidIdArr[idx++] ökar vi även värdet på idx.
I det sista steget använder vi setTimeout för att köra funktionen laddaOm efter 30 sekunder igen.
Istället för att surfa till sju olika sidor i tur och ordning har vi nu byggt ett script som automatiskt växlar innehåll var 30’e sekund, utan sidladdning. När det kommer till slutet börjar det om från början igen. En perfekt lösning för exempelvis ett bildspel på webben, eller som i detta fall, visning av statistik.
