Avatar billede madsens90 Praktikant
18. januar 2010 - 10:57 Der er 17 kommentarer og
1 løsning

Auto opdater tekst fra MySQL uden opdatering af hele siden?

Hej endnu engang alle Eksperter!

Er nået til det punkt i min "programmerings viden", hvor jeg er nødt til at vide om dette kan lade sig gøre på nogen ordenlig måde (og så har jeg brug for scriptet på min side).

Har tænkt på det utallige gange, og er sikker på at hvis man har programmeret i bare lidt tid, er man faldet over tanken at kunne opdaterer en sides indhold, uden at opdaterer hele siden.

Jeg har en tagwall/shoutbox som fungerer som så mange andre med at du skriver en besked, og så opdaterer siden, og hvis du ellers vil opdaterer, må du trykke "REFRESH".

Vil undgå denne "REFRESH" knap, og vil samtidigt undgå at hele siden reloader.

1. Fordi der er loading tid.
2. Fordi at hvis du skriver noget i tekstfeltet, forsvinder det ved REFRESH.
3. Fordi det ville være en FED funktion.

Jeg har lavet min tagwall i HTML, CSS, PHP og så MySQL til data'en i tagwallen.

Kan det lade sig gøre, og hvordan kan det lade sig gøre smartest?

Ps. Har forsøgt utallige gange at finde et brugbart script på google, men mine søge evner er ikke gode nok, og jeg har intet fundet som kan bruges.
Avatar billede madsens90 Praktikant
18. januar 2010 - 10:58 #1
Forresten.. Grunden til at spørgsmålet ligger i Javascript kategorien, er fordi jeg går ud fra dette nemmest kan løses med lidt javascript? Eller også er jeg helt galt på den..

Var bare den kategori jeg mente passede bedst.

- Christian
Avatar billede majbom Novice
18. januar 2010 - 11:06 #2
du skal ud i noget AJAX, som primært er javascript og kan ved hjælp af asp eller php hente indhold fra database, xml, txt eller anden datakilde.

tag en tur på google, der findes et hav af guides og så kan du med fordel bruge ole's wrapper fra www.dengodekode.dk - da det er ret svært at finde noget ordentlig ajax-kode, især hvis man ikke ved hvad man skal se efter :)
Avatar billede madsens90 Praktikant
18. januar 2010 - 11:19 #3
Tak for kommentaren splazz. :)

Sætter mig til at læse denne artikkel på hans hjemmeside i håb om at finde svar:

http://www.dengodekode.dk/artikler/DOM/no_innerhtml.php

Vender tilbage efter jeg har læst den, og søgt lidt på google efter noget AJAX "something something"..
Avatar billede madsens90 Praktikant
18. januar 2010 - 12:04 #4
Enten er jeg bare dårlig til at søge, eller også er der ikke nogen simpel måde at gøre det på.

Kan ikke finde noget simpelt i ajax hvor at man kan hente data fra en MySQL ned på siden dynamisk, uden at der enten følger 5 filer oveni med JS, eller at der følger en masse ekstra funktioner med som jeg slet ikke skal bruge.

Har aldrig givet mig tid til at sætte mig ind i Ajax, så kan ikke umiddelbart skille de ting ad jeg skal bruge, fra det jeg ikke skal bruge.

Nogen der kan finde noget virkelig simpelt??
Avatar billede majbom Novice
18. januar 2010 - 12:41 #5
jeg bruger dette:

function xmlHttpObject(){
// Hvis XMLHttpRequest understøttes, så returner en ny instans
    if (window.XMLHttpRequest) return new XMLHttpRequest();
   
// Ellers - hvis ActiveX heller ikke understøttes, så returner null
    if (!window.ActiveXObject) return null;
   
// Ellers oprettes et array med de forskellige objekt versioner - nyeste først
    var a = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
    var o = null;
// For hver version ...
    for (var i=0,j=a.length; i<j; i++) {
// Undgå at generere fejl, hvis versionen ikke genkendes
        try {
// Hvis objektet kan oprettes, så returner det
            if ( o=new ActiveXObject(a[i]) ) return o;
        }
        catch(e){};
    }
  // Hvis intet lykkedes, ryddes op og der returneres null
    return a = o = null;
}

function ajaxConn(){
    xmlHttp = new xmlHttpObject();
}

function ajaxSend(sUrl, sParams){
    var params = sParams;
    var url = sUrl;
   
    xmlHttp.open("POST",url,true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=ISO-8859-1");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(params);
}

function getSQL(){
    var url = "ajax.php";
    var params;
   
    params += "&fornavn=Anders";
    params += "&efternavn=Jensen";
   
    ajaxConn();
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
            if(xmlHttp.responseText=='success'){
                //opdater feltet med indholdet fra xmlHttp.responseText
            }else{
                alert("Der skete en fejl: "+xmlHttp.responseText);
            }
        }
    }
    ajaxSend(url, params);
}

den sidste funktion er egentlig bare en samling af de 3 ovenstående funktioner, som henter det du vil og det er så tilgængeligt i xmlHttp.responseText. den første funktion er wrapperen fra dengodekode.dk. i ajaxConn opretter du så objektet fra wrapperen og i ajaxSend sender du informationerne til din php-side (i dette tilfælde - det kunne også være asp, eller anden serverside-sprog) med de nødvendige parametre.

ajax.php bliver sendt med som parameter og er navnet på den side, som serverer det data du skal bruge - dvs at den skal hente data fra databasen og skrive det ud til skærmen. et eksempel kunne være:

<?php

echo $_POST['fornavn']." - ".$_POST['efternavn'];

?>

hvor indholdet af xmlhttp.responseText vil være "Anders - Jensen"

jeg håber det gave mening :)
Avatar billede madsens90 Praktikant
18. januar 2010 - 13:34 #6
Sidder og leger med den kode du har skrevet, og jo mere jeg kigger på den, jo mere rigtig bliver det også i mit hovede.

Jeg skal lige have rækkefølgen rigtig.

1. Koden du har skrevet er f.eks index.php som sender et request til ajax.php

2. ajax.php "loader", og sender informationen tilbage via POST.

3. index.php "loader" denne information, og har nu den nye information i $_POST['fornavn'], og $_POST['efternavn'] (som i dit eksempelt).

Ved ikke om rækkevfølgen er rigtig, men hvis, hvad skal der så være på ajax.php for at den kan sende POST?
Eller er jeg helt galt på den?
Avatar billede majbom Novice
18. januar 2010 - 13:44 #7
punkt 1 og 2 har du ret i, men 3 er forkert.

du har data'en i xmlhttp.respsonseText - du kan f.eks. prøve at sætte den til at alerte den i if-sætningen:

...
xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
            if(xmlHttp.responseText=='success'){
                //opdater feltet med indholdet fra xmlHttp.responseText
alert('SVAR FRA AJAX.PHP: '+xmlHttp.responseText);
            }else{
                alert("Der skete en fejl: "+xmlHttp.responseText);
            }
        }
    }
...
Avatar billede madsens90 Praktikant
18. januar 2010 - 13:49 #8
Men koden er skrevet i funktioner jo.
Skal de ikke kaldes på en eller anden måde?

Får hverken success, eller fejl, så tænkte at funktionerne måske skulle kaldes først, ligesom i PHP?
Avatar billede majbom Novice
18. januar 2010 - 13:51 #9
jo du er nødt til at kalde getSQL() - det kan du gøre med en knap eller et link...
Avatar billede madsens90 Praktikant
18. januar 2010 - 13:55 #10
Men på den måde så får man kun opdateret infoen hvis man selv skriver noget right?

Hvis nu man intet gør på siden, og en anden skriver noget i tagwallen, så ved man intet om det før man selv skriver næste besked.

Prøver lige med den knap der. ;)
Avatar billede madsens90 Praktikant
18. januar 2010 - 14:06 #11
Har fået det til at virke med knappen!! ;D

Det virker jo super lækkert! :P

Er det så muligt bare at kører functionen med timeout eller lign hvert 10 sek, så den konstant tjekker efter nye beskeder i DB'en? ;)
Avatar billede majbom Novice
18. januar 2010 - 14:12 #12
ja så kan du bruge timeout

og så sæt den til kun at hent de nyeste beskeder, så den ikke skal hente alle beskeder hver gang
Avatar billede madsens90 Praktikant
18. januar 2010 - 14:17 #13
Okay.

Gøres det nemmest ved at sende ID'et på den sidste besked man har hentet, og så bare hente nyere beskeder fra det ID, og nyere?
Avatar billede majbom Novice
18. januar 2010 - 14:30 #14
ja det var en ide, eller et timestamp
Avatar billede madsens90 Praktikant
18. januar 2010 - 14:45 #15
Det virker fantastisk!!! :D

brugte timeout.

I får lige mine 2 sider, hvis andre skulle være lige så blanke på området som mig, og falder over denne side.
Har desuden tilføjet en knap (HENT), der loader ajax.php når man trykker på den. og endnu en knap (START), der gør så den loader siden med et interval på 1 sekund. Og en sidste knap (SLUT), som stopper med at loade siden hvert sekund.

Her er min index.php:


<html>
<head>
<script type="text/javascript">
function xmlHttpObject(){
// Hvis XMLHttpRequest understøttes, så returner en ny instans
    if (window.XMLHttpRequest) return new XMLHttpRequest();
   
// Ellers - hvis ActiveX heller ikke understøttes, så returner null
    if (!window.ActiveXObject) return null;
   
// Ellers oprettes et array med de forskellige objekt versioner - nyeste først
    var a = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
    var o = null;
// For hver version ...
    for (var i=0,j=a.length; i<j; i++) {
// Undgå at generere fejl, hvis versionen ikke genkendes
        try {
// Hvis objektet kan oprettes, så returner det
            if ( o=new ActiveXObject(a[i]) ) return o;
        }
        catch(e){};
    }
  // Hvis intet lykkedes, ryddes op og der returneres null
    return a = o = null;
}

function ajaxConn(){
    xmlHttp = new xmlHttpObject();
}

function ajaxSend(sUrl, sParams){
    var params = sParams;
    var url = sUrl;
   
    xmlHttp.open("POST",url,true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=ISO-8859-1");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(params);
}

function getSQL(){

    var url = "ajax.php";
    var params;
   
    params += "&fornavn=Anders";
    params += "&efternavn=Jensen";
   
    ajaxConn();
xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
            if(xmlHttp.responseText=='success'){
                //opdater feltet med indholdet fra xmlHttp.responseText
                document.getElementById("test").innerHTML+=xmlHttp.responseText;
            }else{
                alert("Der skete en fejl: "+xmlHttp.responseText);
            }
        }
    }
    ajaxSend(url, params);
   
if (timeouten == true){   
   
    window.setTimeout( getSQL , 1000 );
   
    }
   
}
var timeouten = false;

function startSQL(){
timeouten = true;
getSQL();
}

function endSQL() {
timeouten = false;
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td>
<div id="test" style="border: 1px solid #000000;">
Change tekst!
</div>
</td>
</tr>
</table>
<br />
<input type="button" onclick="getSQL();" value="HENT" />

<input type="button" onclick="startSQL();" value="START" />

<input type="button" onclick="endSQL();" value="SLUT" />
</body>
</html>


Og her er ajax.php:

<?php

echo "success";

?>

Har ikke gjort brug af parametrene endnu, men der er jo lavet mulighed for det, så tager det i brug når jeg udvikler det nu. :)

Tak for hjælpen splazz!! Kom med svar!
Avatar billede majbom Novice
18. januar 2010 - 19:54 #16
jamen selv tak - ja parametrene bruges jo typisk når der skal laves forskellige kald og for at scriptet kan bruges til andre ting.
Avatar billede majbom Novice
19. januar 2010 - 09:21 #17
tak for point :)
Avatar billede madsens90 Praktikant
19. januar 2010 - 09:27 #18
Så lidt!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester