Den bedste løsning for en liste der opdateres

Du har ikke skrevet hvordan outputtet fra AJAX delen ser ud..

Hvis du har et bestemt antal servere, kunne du f.eks oprette samme antal divs, og tilgå de relevante divs direkte via document.getElementById("server1234"). Så sætter du dens værdi til f.eks. "Offline" eller "Online".

Der skal overføres meget hver gang siden indlæses, men du skulle kunne spare noget hvis man ikke reloader siden, da du jo bruger AJAX.

Alternativ kan man have en select, som du tilføjer/fjerner options til/fra. Det vil nok kræve noget processorkraft på klient, hvis serverene skal sorteres alfabetisk, og man f.eks. indsætter en server der starter med "a", da man så skal flytte omkring 4999 servere længere ned..

Jeg kan bare ændre mit output som jeg vil ;) Så det rettes bare efter løsningen ;)

Men jeg har ikke et fast antal ;) Og den kan nemt snige sig op over 5000 så.. Har ikke noget fast antal ;)

Ligesom en brugerliste i en chat ud i højre side normalt. Hvordan tilføjer de normalt og fjerner bruger fra den liste. Hvilken løsning er nemmest ?

<ole>

Læg serverne i en DB-tabel med et felt til et timestamp. Hvergang en servers status opdateres sættes timestamp'et samtidig.

Når brugeren requester siden første gang, downloades data om serverne sammen med et timestamp.
Derefter kan han f.eks. spørge serveren, om der er nyt, hvert halve minut. Det gøres ved at sende tiden for seneste request med den nye request - og på serveren hente data fra tabellen, der er opdateret senere end dette stamp.

/mvh
</bole>

olebole> Genialt.. .-)

Olebole > Det er sådan jeg henter mine data ;)

men jeg ville gerne vide hvordan jeg opdatere min liste, hvordan kan jeg fjerne Server 5 ud fra denne liste

Server 1
Server 2
Server 3
Server 4
Server 5 > Er opdaget, skal fjernes
Server 6
Server 7 osv.

Hvordan laver jeg den liste ? Og jeg så kan fjerne server 5 fra den > Det er selve javascripten jeg spørger om. Ikke ajax delen. Håber i forstår lidt bedre nu.

Som jeg kun kan se det er det at opdater hele den div jeg listen stående i. Men hvis der er 5000 server, så bliver der dælme brugt trafik hvis jeg skal sende hele listen fra min php dokument med ajax og opdatere listen.

peterpedersen> Hvordan vil du vise listen? Skal det bare kører ned ad, så det bliver en lang side? Er der nogen form for opdeling? Er der nogen form for sortering, eller er det lige meget?

den skal liste lodret, og jeg skal kun have et navn, og ingen sotering. Altså jeg ikke helt dum til det med javascript, så tror bare det er det. Og så må jeg jo prøve mig frem hvis jeg får lyst til at lave det på en anden måde

Jeg prøver på at finde ud af, om du kan bruge en form med en select.
Man kan nemlig tilføje og fjerne options i en select.

Skal man kunne markere navnet og kopiere det, eller er det kun til visning?
Det ville hjælpe hvis man faktisk vidste hvad det skulle bruges til.. :-)

jeg vil nu have en liste i stedet for en select. Jeg skal lave listen sådan her

Server1 (1/3) <b>Join</b> - Add to favorit - Report
Server2 (2/6) <b>Join</b> - Add to favorit - Report
Server3 (6/7) <b>Join</b> - Add to favorit - Report
Server4 (2/3) <b>Join</b> - Add to favorit - Report
Server5 (4/5) <b>Join</b> - Add to favorit - Report
Server6 (1/10) <b>Join</b> - Add to favorit - Report

osv.

En liste over en masse server til alle mulige spil ;)

fx.

Counter Strike
Counter Strike Source
Battlefield 2
Call Of Duty 2

Hmmm.. Hvis du nu genererer det sådan her:
------------------------------------------
<span id="server1">Server1 (1/3) <b>Join</b> - Add to favorit - Report</span>
<span id="server2">Server2 (2/6) <b>Join</b> - Add to favorit - Report</span>
<span id="server3">Server3 (6/7) <b>Join</b> - Add to favorit - Report</span>
<span id="server4">Server4 (2/3) <b>Join</b> - Add to favorit - Report</span>
<span id="server5">Server5 (4/5) <b>Join</b> - Add to favorit - Report</span>
<span id="server6">Server6 (1/10) <b>Join</b> - Add to favorit - Report</span>
------------------------------------------
Så kan du jo fjerne en af serverne med en removeChild.

Joe, det ser jo rigtig nok ud. Men er ikke helt sikker på hvordan det gøres. Så kunne du ikke prøve og lave en addServer() og removeServer() functions, og så et html dokument ?

addServer kan jeg selv rette til ;) hvis jeg ikke helt tilfreds, men er sku ikke helt sikker på det der removeChild ;)

Jeg går ud fra, at "Server#" i f.eks. "Server1 (...)", "Server2 (...)" skal erstattes med navnet på servere? Dvs, der skal egentligt ikke stå et tal, efter ordet "server"?

Dette skulle gerne kunne fjerne en af serverne. Den skal så kaldes med f.eks. removeServer("server2")
---------------------------------
<script type="text/JavaScript">
function removeServer(id){
document.getElementById("servers").removeChild(document.getElementById(id));
}
</script>

<div id="servers">
<span id="server1">Server1 (1/3) <b>Join</b> - Add to favorit - Report</span>
<span id="server2">Server2 (2/6) <b>Join</b> - Add to favorit - Report</span>
<span id="server3">Server3 (6/7) <b>Join</b> - Add to favorit - Report</span>
<span id="server4">Server4 (2/3) <b>Join</b> - Add to favorit - Report</span>
<span id="server5">Server5 (4/5) <b>Join</b> - Add to favorit - Report</span>
<span id="server6">Server6 (1/10) <b>Join</b> - Add to favorit - Report</span>
</div>
---------------------------------
Mht. at add'e servere, kommer det lidt an på, hvordan du vil fortælle den, hvor serveren skal placeres på listen. Som thesurfer spørger, hedder serverne så Server# eller kan de hedde hvadsomhelst? Dvs. skal de sorteres efter tal eller alfabetisk?

Eller er rækkefølgen ligemeget eller hvordan?

w13> 24/09-2007 17:16:55 :-)

Jeg går ud fra, at følgende er links:

Join
Add to favorit
Report

Hvordan ser href ud på dem?

Jeg tror umiddelbart, at add-funktionen kunne være lidt à la følgende:
------------------------------------------------
function addServer(id){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode("TEKST HER"));
document.getElementById("servers").appendChild(newElement);
}
------------------------------------------------
Det er dog ligeså utestet som removeServer, og jeg er lidt i tvivl med det der CreateTextNode.

addServer indsætter i øvrigt bare som det nederste element på listen.

Jamen, så kan min addServer-funktion vel bruges. :) Ja, vi mangler lige dine href's, da alt skal indsættes med DOM.

Hmm

bare lav et <a></a> om Join , add to favorit og report.
det kan jeg godt selv udfylde. For det er nu javascript som skal indsættes ;)

Jeg bliver nødt til at smutte.. jeg er sikker på at w13 har styr på det..
Ellers må en af de andre hjælpe til.. jeg ved godt at de lurer i mørket.. :-)

Okay thesurfer, det lyder også som han har styr på det ;)

og jeg kan heller ikke rigtig forstå at det kun er jer to der er kommet med nogle brugbare svar ;)

W13 > jeg tester det lige engang ;)

Jo, men kan du finde ud af DOM? For det skal indsættes lidt specielt.

function addServer(id){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode("SERVERNAVN HER"));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
document.getElementById("servers").appendChild(newElement);
}

DOM har jeg ingen forstand på ;)

Hov, der manglede to linjer:

function addServer(id){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode("SERVERNAVN HER"));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
document.getElementById("servers").appendChild(newElement);
}

prøvde med

<html>

<head>
<script language="JavaScript">

function addServer(id){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode("SERVERNAVN HER"));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
document.getElementById("servers").appendChild(newElement);
}

addServer('1');
</script>
<title>Ny side 13</title>
</head>

<body>
<div id="servers">
</div>
</body>

</html>

Men med en fejl ;(

Ok. Det fungerer sådan her:

Jeg har et div-element med id="test". Nu vil jeg så tilføje et billede til div'en:

newElement=document.createElement("img") //laver et img-tag i variablen newElement, det er altså ikke blevet indsat endnu
newElement.setAttribute("src","http://www.gul.dk/båd.gif"); //sætter attributten src til en billedadresse
document.getElementById("test").appendChild(newElement); //indsætter newElement (altså billedet) som de sidste tag i div'en "test"

..hvis det er til at få mening ud af. =)

Hvilken fejl?

Husk også altid at bruge:
<script type="text/javascript">
i stedet for:
<script language="JavaScript">

Det sidste er nemlig ikke gyldigt, selvom IE stadig tolker det korrekt.

Nå ja, jeg har måske fundet fejlen. Du kan ikke kalde addServer("1") før div'en eksisterer. Når addServer køres i head, er div'en ikke blevet lavet endnu. Fjern addServer('1');
og skriv den i stedet ind i en onload i body:

<body onload="addServer('1')">

addServer-løsningen kunne også lavet med innerHTML meget kortere, men det er hamrende invalidt. =)

Sad lige og kiggede den kode igennem, og når du så forklar mig det, så forstår jeg det faktisk godt (: Tusind tak skal du ha for det !

Jeg rettede det til

men får fejlen -

Linje: 23
Tegn: 1
Fejl: 'document.getElementById(...)' er null eller ikke et objekt

OG Koden ser lige nu således ud -

<html>

<head>
<script type="text/javascript">

function addServer(id){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode("SERVERNAVN HER"));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
document.getElementById('Servers').appendChild(newElement);
}

addServer('1');
</script>
<title>Ny side 13</title>
</head>

<body>
<div id="Servers">
</div>
</body>

</html>

Hov, der var jeg lidt langsom -
men nu virker det dælme (: kanon!

men jeg får inget linjeskift, prøvede med en <br> men det virker ikke.

hvad skal jeg gøre her ?

Nå ja. Jamen så skal du bare ha' linjen:
document.getELementById("Servers").appendChild(createElement("br"));
med, sådan her:
---------------------------------------------------
function addServer(id){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode("SERVERNAVN HER"));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
document.getElementById('Servers').appendChild(newElement);
document.getELementById("Servers").appendChild(createElement("br"));
}

og kunne du måske have en ide om hvordan jeg skal add mine output fra ajax

jeg kan ændre det som jeg har lyst, men hvordan skal jeg add mine server ?
lige nu giver mit php dokument et output på alle de server der er blevet ændret på, og skal enden fjernes eller tilføjes.

og får en fejl ved at indsætte

document.getELementById("Servers").appendChild(createElement("br"));

Ja, det er fordi jeg kom til at skrive getELement og det skal være getElement
Javascript er casesensitive

Hmmm. Hvis du genererer listen med php: server1,server2,server3
så kan det vel smides i et array, som adskilles ved komma, og så kan du løbe det igennem og køre funktionen for hvert element i array'et.

Ja, det var også sådan jeg ville gøre. Jeg kan sagtens gøre det i php, men ikke i javascript. Så kunne du lave noget ? Det er vel noget explode() det er det ihvertfald i php :b

men jeg får stadig en fejl ved

document.getElementById('Servers').appendChild(createElement("br"));

fiksede selv det med fejlen

du havde lige glemt document.createElement ;) -

document.getElementById('Servers').appendChild(document.createElement("br"));

Jeg tror, det må være:
-----------------------------------
liste="server1,server2,server3";
liste.split(".");
for(i=0;i<liste.length;i++){
addServer(liste[i])
}

Muligvis kan det gøres kortere:
--------------------------------
liste="server1,server2,server3".split(".");
for(i=0;i<liste.length;i++){addServer(liste[i])}

Det virker ikke.

får en masse spans der ser således ud -

SERVER undefined - Join - Add to favorit - Report
SERVER undefined - Join - Add to favorit - Report
SERVER undefined - Join - Add to favorit - Report
SERVER undefined - Join - Add to favorit - Report

Min dokument ser sådan her ud, og jeg får stadig en fejl ;)

<html>

<head>
<script type="text/javascript">

function addServer(id){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode("SERVERNAVN HER"));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
document.getElementById('Servers').appendChild(newElement);
document.getELementById('Servers').appendChild(document.createElement("br"));
}

function removeServer(id){
document.getElementById('Servers').removeChild(document.getElementById(id));
}

function RollSplit() {
liste="server1,server2,server3";
liste.split(".");
for(i=0;i<liste.length;i++){
addServer(liste[i])
}
}

</script>
</head>

<body onLoad="addServer(1); RollSplit();">
<div id="Servers">
</div>
</body>

</html>

Nå ja, jeg splitter med punktum, men der er ikke punktummer i listen.

liste="server1,server2,server3".split(",");

function addServer(id){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode("SERVER" + id));
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
document.getElementById("Servers").appendChild(newElement);
document.getElementById("Servers").appendChild(document.createElement("br"));
}
function removeServer(id){
document.getElementById('Servers').removeChild(document.getElementById(id));
}

function RollSplit() {
liste="server1,server2,server3".split(",");
for(i=0;i<liste.length;i++){
    addServer(liste[i]);
}
}

Så pokker! Så tror jeg at vi er nået til enden af dette spørgsmål !

Jeg må nok sige at w13 var den der hjalp mest, og derfor får de 200 point.
thesurfer > skriv lige til mig hvis du er utilfreds ;)

w13 læg et svar ;)

Svar kommer her! :)

og til dem der kigger i tråden for at få hjælp og heller ikke syntes det smart at lave link med det id men inputer i addServer(); (lavet for jeg selv tit mangler sådan noget hjælp her)

function addServer(id, outputId){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode(id));
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.setAttribute("href","http://google.dk?test=" + sqlId);
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.setAttribute("href","http://google.dk?test=" + sqlId);
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.setAttribute("href","http://google.dk?test=" + sqlId);
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
document.getElementById("Servers").appendChild(newElement);
document.getElementById("Servers").appendChild(document.createElement("br"));
}

function removeServer(id){
document.getElementById('Servers').removeChild(document.getElementById(id));
}

function RollSplit() {
liste="server1*1,server2*2,server3*3".split(",");
for(i=0;i<liste.length;i++){
    addServer(liste[i].split("*")[0], liste[i].split("*")[1]);
}
}

Så skal der bare blokkes for at oprette servernavne med tegnet * i navnet.

Hov der skal lige rettes

function addServer(id, outputId){

til

function addServer(id, sqlId){

Hov w13, jeg håber du kan hjælpe igen!
For det ser sku ikke så godt ud med removeServer()

http://ngw.dk/test.php

Der kommer et dumt mellemrum.

som du kan se i kildkoden så køre jeg min RollSplit, med variablen liste sat til
="add*server1*1,add*server2*2,remove*server2*3,add*server4*4,add*server5*5"

når jeg remover kommer der en mellemrum som helst ikke sku ha været der. Kan du hjælpe ?

Nå, det fandt jeg også ud af. Det var jo logisk, for den <br> der indsættes bagefter span bliver jo ikke fjernet, så vi må indsætte den i span'en ;) og så ryger den væk ;)

Så lægger vi bare <br> ind i span.

function addServer(id, outputId){
var newElement=document.createElement("span");
newElement.setAttribute("id",id);
newElement.appendChild(document.createTextNode(id));
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.setAttribute("href","http://google.dk?test=" + sqlId);
newElementLink.appendChild(document.createTextNode("Join"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.setAttribute("href","http://google.dk?test=" + sqlId);
newElementLink.appendChild(document.createTextNode("Add to favorit"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createTextNode(" - "));
newElementLink=document.createElement("a");
newElementLink.setAttribute("href","http://google.dk?test=" + sqlId);
newElementLink.appendChild(document.createTextNode("Report"));
newElement.appendChild(newElementLink);
newElement.appendChild(document.createElement("br"));
document.getElementById("Servers").appendChild(newElement);
}

Jup! :)

Er det ikke meget lettere at lave en færdig element-template og fjerne den fra dokumentet på window.onload? Så kan man efterfølgende klone den - fylde data i - og indsætte klonen i dokumentet, hvergang der skal bruges et nyt span  :)

Nej :)

- så er der vist noget, jeg ikke forstår  ;o)