Ajax-al mysqli írás, olvasás, megjelenítés frissítés nélkül

Ajax-al mysqli írás, olvasás, megjelenítés frissítés nélkül
2020-12-12T10:29:14+01:00
2020-12-12T12:02:30+01:00
2022-10-15T21:16:21+02:00
SwoMark
Üdv,

Rendelkezem egy terjedelmes nyilvántartó webbel egy kisebb csoport részére, ahova szükségessé vált, hogy egy kis ajax-al fűszerezzem meg a funkciókat.

Van egy oldalam, ahol egy online oktatásra felcsatlakozottak neve van. Ezen az oldalon már sok az adat, ezért görgethetős már. Minden sor végén van egy gombocska, amire ha rákattintok, tudom igazolni, hogy az adott személy, a képzést elvégezte. Ekkor semmi más nem történik, mint hogy egy update mysqli lefut és egy 0-ás értéket, 1-re cserél.

Mivel eddig ez miatt állandóan újra töltött az oldal, nagyobb képzésnél nehéz volt követni a dolgot. Ezért vettem egy ajaxxal foglalkozó könyvet (Fehér Krisztián - Ajax adatbázis kezelés) .. Nagyjából sikerült felfogjam, a magamnak szükségesre alakítottam a gyakorló példát, ami működdik, viszont ugyanúgy előre ugrik a lapon, mintha "frissítene"

Hol ronthattam el? :)

Tömörítetten hozzáadtam a 3 fájlos kis demót.

Köszi a tippeket!!

~Márk
Mutasd a teljes hozzászólást!
Csatolt állomány

  • Tábla létrehozós scriptet nem mellékeltél, így csak a szememmel néztem át.

    Azt gyanítom, hogy amiatt ugrik, mert először lecseréled a teljes szöveget egy sima szövegre (X. adatbáziskapcsolat bla bla...) majd utána betöltöd a szöveget és emiatt elveszti a scroll pozíciót a böngésző és az oldal elején marad.

    Egy minta: Edit fiddle - JSFiddle - Code Playground

    Én inkább abban az irányba indulnék el, hogy a sorokat egy-egy konténerbe (<div> vagy alapból tábla lenne és akkor sorokba) raknám és a frissítésnél csak ezt az egy sornak az adait adnám vissza és írnám vissza a megfelelő helyre.

    Tehát például egy ilyen lenne a kiindulás (row-<tábla id> hogy egyedi legyen):

    <div id="row-1">Aladár 2020.10.10 10:10 órakor bla bla. [✔ Igazolás]</div> <div id="row-5">Géza 2020.10.10 11:10 órakor bla bla. [✔ Igazolás]</div> <div id="row-6">Józsi 2020.10.10 12:10 órakor bla bla. [✔ Igazolás]</div>
    és amikor a Géza igazolására kattintasz, akkor az update után az ajax visszaadna ennyit:

    Géza 2020.10.10 11:10 órakor bla bla. Igazolva bla bla.
    amit aztán egy sima

    document.getElementById('row-5').innerText = this.responseText
    kóddal beírsz a helyére (persze az row azonosító az dinamikusan jönne a sorszam-ból).
    Mutasd a teljes hozzászólást!
  • Szia!

    A Javascript kódod kb. így néz ki, rövidítve:

    <script> init(); function init() { ... /* ajax: mysql_select.php*/ document.getElementById("szoveg").innerHTML = this.responseText; } function ujember() { ... /* ajax: mysql_update.php*/ document.getElementById("szoveg").innerHTML = this.responseText; init(); ... } function modosit( sorszam) { ... /* ajax: mysql_update.php*/ document.getElementById("szoveg").innerHTML = this.responseText; init(); ... } </script>
    A hiba a modosit() és az ujember() függvényben van.

    Kattintáskor történik egy AJAX hívás a mysql_update.php felé, és ennek az eredményét bele is rakod lista DIV be. Egyrészt teljesen feleslegesen, mert nem listát tartalmaz, hanem gyakorlatilag üres. Másrészt, mivel üres, és belerakod a DIV-be, összeugrik az oldal, a magassága minimális lesz, azonnal a tetejére scrolloz a böngésző. Ezután hívod az init()-et, ami feltölti a lista tartalmával a DIV-et, de ekkor már a lap tetejét látod.

    Több megoldás van:
    A) ez az egyszerűbb: az ujember() és modosit() függvényekben nem módosítod a DIV innerHtml-jét, csak egyszerűen meghívod az init()-et:

    if (this.readyState == 4 && this.status == 200) { init(); }
    B) a mysql_insert.php-t úgy módosítod, hogy rögtön a teljes listát adja vissza. Így nem kell meghívnod az init()-et:

    if (this.readyState == 4 && this.status == 200) { document.getElementById("szoveg").innerHTML = this.responseText; }
    C) ez a bonyolultabb: az egyes kattintásokra csak annyit változtatsz az oldalon, amennyit feltétlenül szükséges. Igazolásnál csak az érintett sort módosítod a HTML DOM-ban, felvételkor csak hozzáfűzöl egy újabb sort a lista végére.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd