[PHP/Ajax/MySQL]via Ajax database-gedeelte tonen

[RainerSGF]

Ik probeer voor een gastenboek-pagina het mogelijk te maken voor bezoekers om telkens een 4-tal berichten te bekijken. Via 2 hyperlinks ('vorige' en 'volgende') kan men aldus de vorige of volgende 4 berichten uit een mysql-database selecteren en bekijken.
De 2 hyperlinks moeten een ajax-functie (in een extern javascript-bestand) oproepen die op zich een php-script laten uitvoeren voor de selectie uit de mysql-database en terugantwoorden aan ajax. Ajax moet het geheel als antwoord terugleveren op de gastenboek-pagina. Tot nu toe zijn alle pogingen zonder succes.

Wat reeds geprobeerd?
in gastenboek.php

code:

<?php
$i = 0;
?>
<a href="?p=previous">vorige</a> <a href="?p=next">volgende</a>
...

<?php
if(isset($_GET['p'])){
 $p_index = $_GET['p'];
 global $i;

  switch($p_index){
    case 'previous':
      if($i > 4){
         $i = $i - 4;
         echo "<script type='text/javascript'>getMessages('$i')</script>";
      }

    case 'next':
       $i = $i + 4;
        echo "<script type='text/javascript'>getMessages('$i')</script>";
  }
}
?>

in functions.js

code:

...
      function getMessages(p){
        
        xmlhttp = GetXmlHttpObject();
        
        if(xmlhttp == null){
            alert("Uw browser ondersteunt geen HTTP-aanvragen"):
            return;
        }
        
        var url = "functions.php";
        url = url + "?p=" + p;     
        xmlhttp.onreadystatechange = state_change2;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }
...

in functions.php

code:

...
if(isset($_GET["p"])){
        $p = $_GET["p"];
        $q = $_GET["q"];
        
        
        include("connect.php");
        
        mysql_query("SET NAMES 'utf8'");
        mysql_query("SET CHARACTER SET 'utf8'");
        
        $resultaat = mysql_query("SELECT * FROM guestmessages LIMIT $p, 4");
        
        while($rij = mysql_fetch_array($resultaat)){
            if($rij['status'] == 1){
                $n = html_entity_decode($rij['naam']);
                $n_br = nl2br($n);

                $d = html_entity_decode($rij['datum']);
                $d_br = nl2br($d);
                
                $u = html_entity_decode($rij['uur']);
                $u_br = nl2br($u);
                
                $ber = html_entity_decode($rij['berichttekst']);
                $ber_br = nl2br($ber);
                
  echo "<p style='font-size:10px;'>" . $n_br . " postte op " . $d_br . " om " . $u_br . ":</p><p>" . $ber_br . " <br/><hr>"; 
            }               
        }
    }
...

Het lukt me maar niet om zelfs nog maar de ajax-functie op te roepen .
Wie kan me helpen of raad geven?

[GlowMouse]

code:

xmlhttp.onreadystatechange = state_change2;

wat doet dat precies?

[RainerSGF]

code:

function state_change2(){
    if (xmlhttp.readySate==4){
        document.getElementById("mainmiddle").innerHTML = xmlhttp.responseText;
    }
}

[Tharulerz]

Moet die readySate niet readyState zijn?

[kwaakvaak_v2]

jQuery is je vriend : http://jqapi.com/#p=jQuery.get Doet hetzelfde als wat jij nu gemaakt hebt, maar dan met het voordeel dat het hele crossbrowser gedoe al afgevangen is voor je

[Caelorum]

jQuery is niet heilig en daarnaast is het voor zo'n simpele functionaliteit als dit jQuery een beetje overkill, vind je niet?

[CodeCaster]

RainerSGF schreef op maandag 15 februari 2010 @ 00:55:
Het lukt me maar niet om zelfs nog maar de ajax-functie op te roepen .
Wie kan me helpen of raad geven?

Debuggen en analyseren moet je nog altijd zelf doen.

---

JavaScript:

        if(xmlhttp == null){
            alert("Uw browser ondersteunt geen HTTP-aanvragen"):
            return;
        }

Als die foutmelding waar zou zijn zou niemand hem ooit zien. Daarnaast is het niet echt een nuttige melding. Zorg dat je site zonder AJAX ook werkt.

[ Voor 28% gewijzigd door CodeCaster op 15-02-2010 10:23 ]

[armageddon_2k1]

Caelorum schreef op maandag 15 februari 2010 @ 09:23:
jQuery is niet heilig en daarnaast is het voor zo'n simpele functionaliteit als dit jQuery een beetje overkill, vind je niet?

Hoezo? Je kan jQuery zo groot maken als je zelf wil... ik zou niet weten waarom je alles zelf zou moeten doen, als er een hoop mensen alles al voor je gedaan hebben.

[MueR]

armageddon_2k1 schreef op maandag 15 februari 2010 @ 10:12:
ik zou niet weten waarom je alles zelf zou moeten doen, als er een hoop mensen alles al voor je gedaan hebben.

Er is niks mis met zelf javascript schrijven. Daar leer je van, zeker als je bugs in diverse browsers moet gaan oplossen. Er hoeft niet altijd met standaard frameworks gewerkt te worden, sommige mensen vinden die zelfs helemaal niet prettig. Om maar een voorbeeld te noemen, Tweakers.net redt het prima zonder jquery of soortgelijke pakketten. Maar T.net heeft dan natuurlijk ook crisp.

[gvdh]

HTML:

<a href="?p=previous">vorige</a> <a href="?p=next">volgende</a>

Ik denk dat hier het probleem ligt: deze links zorgen voor een volledige page refresh waardoor er van Ajax eigenlijk geen sprake is. Je moet aan deze links een Javascript-functie koppelen die de gegevens ophaalt.

[jip_86]

Het is niet heel handig om het zo te doen nee. Maar die get parameter word verderop wel afgevangen in de php code eronder, daarin word wel de js functie aangeroepen.

[CodeCaster]

jip_86 schreef op maandag 15 februari 2010 @ 11:04:
Het is niet heel handig om het zo te doen nee. Maar die get parameter word verderop wel afgevangen in de php code eronder, daarin word wel de js functie aangeroepen.

Eh, nee, want de PHP wordt op de server uitgevoerd, en de JS op de client.

[kwaakvaak_v2]

Caelorum schreef op maandag 15 februari 2010 @ 09:23:
jQuery is niet heilig en daarnaast is het voor zo'n simpele functionaliteit als dit jQuery een beetje overkill, vind je niet?

uuh nee, eigenlijk niet. Als ik mijzelf met een include van 20K ofzo een hoop ontwikkel tijd met cross browser, fout afvangen etc kan besparen.. Ik hoef niet perse meer alles zelf te maken om te weten hoe iets werkt, als het maar werkt

[Caelorum]

Mja, als dit het enige is wat er op die hele pagina gebeurt met "ajax" dan weegt die extra laadtijd, imo, niet op tegen die paar minuten extra dat je moet besteden aan het uitwerken van dit probleem. Die hoop ontwikkeltijd valt hier namelijk ook wel weer mee

[DEiE]

Wat je kan doen is in je javascript een tellertje maken op welke pagina je zit. Als je dan op de volgende knop drukt (niet op de manier die je nu doet, je pagina wordt dan zowieso ververst, wat gvdh ook al zei) tel je er eentje bij op, bij de vorige pagina eentje eraf. Vervolgens via ajax als parameter de pagina doorgeven, en vervolgens de response de oude reacties laten vervangen.

Wat ik er zo snel van zie, heb jij die teller in je php-bestand geplaatst. Dit gaat niet werken, want bij elke request wordt je php-pagina opnieuw geladen, en de teller weer op 0 gezet.

[TJHeuvel]

Of in dit geval AJAX en/of jQuery een goede keuze zijn, laten we maar even buiten wegen.

Wat (volgens mij) de setup zou moeten zijn;
De gebuiker ziet een gastenboek, hieronder staan 2 linkjes, Vorige en Volgende.
Als er op een link geklikt word, moet er een Javascript functie aangeroepen worden welke de nieuwe blog-posts op haalt. De gebruiker verlaat hierbij de pagina niet!

Bij je huidige setup verlaat de gebruiker de pagina als hij op een link klikt, komt hij opnieuw op de pagina en word naar de ?p parameter gekeken.

Wat je (ongeveeer) wilt is het volgende, alleen dan niet in Psuedo-code

JavaScript:

var berichtIndex = 0; //Houd bij welk bericht we nu zien.
vorigeKnop.onclick = function() { krijgBericht(-2) };
volgendeKnop.onclick = function() {krijgBericht(2) };

//Haal de nieuwe berichten op, offset geeft aan hoeveel berichten we heen of terug willen.
function krijgBericht(offset)
{
 berichtIndex += offset;
 maakAjaxCall('krijgBericht.php?bericht='+berichtIndex);
}

Het enige wat je moet doen is krijgBericht.php maken, en de juiste berichten ophalen.

[RainerSGF]

Thanks allemaal voor jullie inbreng, dat laatste zal ik morgen zeker eens proberen.

[RainerSGF]

OK, k'ben uiteindelijk al zover dat ik de javascript-functie kan oproepen die de ajax-aanroep moet doen (en uiteindelijk dus ook een variabele doorgeeft naar een php-bestand).

Echter gaat de ajax-oproep zelf niet. K'heb me al zitten suf zoeken en proberen alles te debuggen, maar ik zie het nie...

html-gedeelte

code:

...
<center><a href="javascript:getMessages(-2)" id="vorigeKnop">vorige</a><a href="javascript:getMessages(2)" id="volgendeKnop">volgende</a></center>
...

javascript:

code:

function getMessages(p){

        xmlhttp = GetXmlHttpObject();
        
        if(xmlhttp == null){
            alert("Uw browser ondersteunt geen HTTP-aanvragen!");
            return;
        }
                
        var url = "functions.php";
         //volgende pagina met volgende of vorige berichten uit database
        url = url + "?p=" + 1;      
        xmlhttp.onreadystatechange = stateDeux;     
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }


function stateDeux(){
    if (xmlhttp.readySate==4){
        document.getElementById("berichten").innerHTML = xmlhttp.responseText;
    }
}

php-gedeelte:

code:

if(isset($_GET["p"])){
        $p = $_GET["p"];
        //$q = $_GET["q"];
        
        
        include("blablabla.php");
        
        mysql_query("SET NAMES 'utf8'");
        mysql_query("SET CHARACTER SET 'utf8'");
        
        $resultaat = mysql_query("SELECT * FROM zzzzzzzzzzz LIMIT 0, 4");
        
        while($rij = mysql_fetch_array($resultaat)){
            if($rij['status'] == 1){
                $n = html_entity_decode($rij['naam']);
                $n_br = nl2br($n);

                $d = html_entity_decode($rij['datum']);
                $d_br = nl2br($d);
                
                $u = html_entity_decode($rij['uur']);
                $u_br = nl2br($u);
                
                $ber = html_entity_decode($rij['berichttekst']);
                $ber_br = nl2br($ber);
                
                echo "" . $n_br . " postte op " . $d_br . " om " . $u_br . ": " . $ber_br ; 
            }               
        }
    }

Wat doe ik mis?

[RobIII]

RainerSGF schreef op donderdag 18 februari 2010 @ 23:19:
Echter gaat de ajax-oproep zelf niet.
Wat doe ik mis?

Wat je mis doet is dat je sowieso veel te vaag bent. Hoezo "gaat de ajax-oproep zelf niet"? Wordt 'ie niet verzonden? Krijg je een foutmelding? Wordt 'ie wel verzonden maar krijg je geen antwoord? Of een onverwacht antwoord? Of...

RainerSGF schreef op donderdag 18 februari 2010 @ 23:19:
K'heb me al zitten suf zoeken en proberen alles te debuggen, maar ik zie het nie...

Vertel dan eens hoe/wat je hebt gedebugged en wat daar uit kwam. Je moet, zeker als je je suf hebt gedebugged, op z'n minst kunnen aangeven in welke regel 't volgens jou fout gaat en wat daar dan aan mankeert volgens jou (als in: variabele x bevat y terwijl ik z verwacht).

Met een tool als firebug kun je heel mooi je (Ajax) requests (en de response) zien. Ook daar moet je al een heel eind mee (kunnen) komen.

Dan:

code:

url = url + "?p=" + 1;

Wat doet die + 1 daar? bedoel je niet + p? Waarom zou je anders p aan getMessages() meegeven?

Vervolgens:

PHP:

$resultaat = mysql_query("SELECT * FROM zzzzzzzzzzz LIMIT 0, 4");

while($rij = mysql_fetch_array($resultaat)){
   if($rij['status'] == 1){
       $n = html_entity_decode($rij['naam']);
       $n_br = nl2br($n);

       $d = html_entity_decode($rij['datum']);
       $d_br = nl2br($d);
                   
       $u = html_entity_decode($rij['uur']);
       $u_br = nl2br($u);
                   
       $ber = html_entity_decode($rij['berichttekst']);
       $ber_br = nl2br($ber);
                   
       echo "" . $n_br . " postte op " . $d_br . " om " . $u_br . ": " . $ber_br ; 
   }               
}

Hier stikt 't van de WTF's. Waarom gebruik je html_entity_decode? Heb je dan data met html entities in je DB staan? En zo ja: WHY? En waarom escape je niet juist je output (waarbij naam en berichttekst twee potentiële kandidaten zijn om te escapen, datum en uur lijken me geen tekst te bevatten? En als dat wel zo is: WHY?). Want de output vlam je rechtstreeks in een innerHTML; juist daar zou je escaped data moeten hebben gekregen van PHP.

Ik vraag me af waarom uur los staat van datum? Waarom is dat niet gewoon 1 datetime veld? Ook zie ik je overal nl2br doen en hoewel ik me dat kan voorstellen dat 't voor berichttekst nodig is, zie ik niet waarom dat voor die andere drie velden nodig zou zijn. Zitten er dan newlines in je datum/uur/naam?

Ook stop je alle velden eerst in variabele x om vervolgens nog eens een kopie (met br's) in x_br te zetten; waarom zo moeilijk en "resourceverspillend" alles dubbel in 't geheugen mikken?

Dan zie ik je in de while een "if rij['status']==1" doen. Waarom ga je in PHP die records er uit zitten filteren en waarom maak je niet gewoon gebruik van een WHERE clause in je query? Dat scheelt een if-statement voor elke iteratie evalueren en better yet: je krijgt gewoon alléén de records van MySQL waarin je ook daadwerkelijk geïnteresseerd bent i.p.v. alle records met andere statussen. En MySQL doet dat net effe wat efficiënter en sneller en beter dan dat in PHP die records er nog uit gepulkt moeten worden.

PHP:

$resultaat = mysql_query("SELECT * FROM zzzzzzzzzzz WHERE status = 1 LIMIT 0, 4");

while($rij = mysql_fetch_array($resultaat)){
    echo htmlentities($rij['naam']) .
        " postte op " . $rij['datum'] .
        " om " . $rij['uur'] . ": " .
        nl2br(htmlentities($rij['berichttekst']));
}

Lijkt me al stukken beter. Geen variabelen nodig, niets dubbel in 't geheugen, correcte escaping (waar nodig) en geen 'php-filter'.

En helemaal tot slot:
Tharulerz in "\[PHP/Ajax/MySQL]via Ajax database-gedeel..."
Ik zie nog steeds readySate staan in je code...

[ Voor 79% gewijzigd door RobIII op 19-02-2010 00:45 ]

[RainerSGF]

OK, terechte opmerking (komt wa door de vermoeidheid).

reeds geprobeerd:
- via een alert-popup in het javascript/ajax-gedeelte gekeken stap per stap of die uiteindelijk uitgevoerd werd. Overal waar ik die plaats, wordt die blijkbaar uitgevoerd en komt op het scherm zichtbaar. Echter geen resultaat uit de database komt tevoorschijn na drukken op één van de hyperlinks.

- Ondanks de test met de alert-popup, blijkt geen antwoord terug te komen uit het php-gedeelte OF wordt de functie stateDeux() niet uitgevoerd. Ook in het php-gedeelte heb ik al eens getest met

code:

echo "<script type='text/javascript'>alert('ja');</script>";

Echter dit wordt nooit uitgevoerd (in tegenstelling tot de 'alert("OK")' in javascript)

- Die '1' heb ik uiteindelijk zelf eens opgegeven om te kijken of dit enige invloed ging hebben op de database-selectie. Echter niets komt als antwoord uit de php- of ajax-functies.

- testen via firebug heb ik eens gedaan, maar ik word er zelf ook niet wijzer van (k'ben uiteindelijk er ook geen expert in hoe er juist optimaal mee gewerkt kan worden).

[RobIII]

RainerSGF schreef op vrijdag 19 februari 2010 @ 00:30:
- Ondanks de test met de alert-popup, blijkt geen antwoord terug te komen uit het php-gedeelte OF wordt de functie stateDeux() niet uitgevoerd.

Dan ga je dus eerst eens kijken of je überhaupt response krijgt. Als je als eerste regel in stateDeux een "alert(xmlhttp.readySate);" zet zou je elke state die voorbijkomt al moeten zien. Kijk eens of 'ie ooit 4 wordt. Is dat 't geval dan ga in die if-statement weer wat alerten. Is dat niet 't geval dan ga je uitzoeken waarom.

RainerSGF schreef op vrijdag 19 februari 2010 @ 00:30:
- testen via firebug heb ik eens gedaan, maar ik word er zelf ook niet wijzer van (k'ben uiteindelijk er ook geen expert in hoe er juist optimaal mee gewerkt kan worden).

Je hoeft geen "expert" te zijn om een XMLHTTP request in firebug te volgen. Dat is letterlijk 3 klikjes. Open firebug; zet de actieve tab op "console" en doe je Ajax request. Vervolgens zie je de request verzonden worden. Expand deze door op 't plusje te klikken. Je ziet nu 4 tabjes (Params/headers/response/xml). Bekijk de eerste 3 (met name de 3e) en trek je conclusies.

Verder heb ik je in een dikke edit, die je misschien gemist hebt omdat je aan 't reageren was, op een shitload aan WTF's gewezen. Misschien is 't verstandig dat je daar ook nog even naar kijkt

Tharulerz in "\[PHP/Ajax/MySQL]via Ajax database-gedeel..."
Ik zie nog steeds readySate staan in je code... Het is readyState

[ Voor 27% gewijzigd door RobIII op 19-02-2010 00:46 ]

[RainerSGF]

ow ow ow, I'm terrible sorry...ik heb namelijk een enorm stomme fout gevonden.
Namelijk als ik zonet eens terugkijk naar mijn javascript-functie 'stateDeux' zag ik in de if-clause: 'readySate' staan ipv 'readyState'. De fout was nadien duidelijk (sorry 'Tharulerz'...je sloeg van in het begin de nagel op de kop, k'moet duidelijk beter leren lezen en controleren).

Ondanks deze dwaze fout van me heb ik door de inbreng van heel veel personen hier toch weer de kans gekregen om heel wat bij te leren...waarvoor mijn enorme dank aan iedereen hier!!! Wat zou ik zonder Tweakers.net toch zijn he