AJAX Table többször is betölt

AJAX Table többször is betölt
2019-08-05T23:21:28+02:00
2019-08-07T12:19:31+02:00
2022-10-15T21:30:33+02:00
Natsu
Sziasztok!
Olyan problémám lenne, hogy AJAX segítségével betöltök egy szerkeszthető, szintén AJAX-szel működő Tablet, azonban ez a Table első kattintásra nem tölt be (csak a zöld fejléce, aminek köze sincs az AJAX-hez), másodikra pedig betölt ugyan, de ha törlök benne adatot, akkor a Tablehöz kapcsolódó dolgok megjelennek másodjára is... gondolok most arra, hogy a Tablehöz van például egy Kereső mező, és a törlés után ebből kettő lesz. 

Ugyanez történik akkor is, ha hozzáadok adatot a Tablehöz, és a "showing x y entries" szöveg alapján az történik, hogy a Table "frissült" oldala nem az eredeti oldal helyett tölt be, hanem mellé... és így egyszerre mutatja, hány adat volt a frissítés előtt és után is. Ami viszont még nagyobb baj, hogy ha beszúrok egy sornyi adatot, akkor azt első beszúrásnál még normálisan, egyszer szúrja csak be, de ha átlépek egy másik menübe, majd vissza ebbe a Tables menübe, aztán megint beszúrok adatot, azt már kétszer szúrja be... Ha megint ellépek és vissza, akkor már 3x, és így tovább. Ez az egész így néz ki egyébként:
https://i.stack.imgur.com/lJsqz.png

Röviden és tömören: az oldal menüi AJAX-esen töltenek be, tartalmuk a jobb oldali nagy DIV-be kerül (amiben például a Table is van). Az ilyen módon betöltött Autók menüben lévő Table, ami AJAX-szel frissül (adatbázissal együtt, ahhoz MySQL-t használok... ha változik az adat a Tableben, az változik az adatbázisban is), úgy tűnik, többször is betölt, és többször is beszúr. Ezen kívül olyankor, amikor egy beszúrás több adatot is szúr be, a törlés gomb megerősítő üzenete is annyiszor jelenik meg, ahány beszúrás történt.
Ez a menük AJAX-es betöltését szolgáló script egy fő, index.php fájlban... a "cell-content" a jobb oldali DIV-nek az ID-je, amibe betölti az adatokat, az "autok" (meg az alkalmazottak és a vevok) linkeknek az ID-jei... a linkek a bal oldali menü gombjain vannak, így (egy PHP-s if-ben van, azért kell az echo):

echo"<a href='autok.php' id='autok'>Autók</a>"; echo"<a href='alkalmazottak.php' id='alkalmazottak'>Alkalmazottak</a>"; echo"<a href='vevok.php' id='vevok' >Vevők</a>";
Ez pedig a script, amit említettem:
<script> $(document).ready(function(){ $("#autok").click(function(){ $("#cell-content").load('autok.php'); return false; }); }); $(document).ready(function(){ $("#alkalmazottak").click(function(){ $("#cell-content").load('alkalmazottak.php'); return false; }); }); $(document).ready(function(){ $("#vevok").click(function(){ $("#cell-content").load('vevok.php'); return false; }); }); </script>
Ez a PHP kód tartozik az Autók menüponthoz:

<html> <head> <title>Autószalon</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <style> #user_data { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } #user_data td, #user_data th { border: 1px solid #ddd; padding: 8px; } #user_data tr:nth-child(even){background-color: #f2f2f2;} #user_data tr:hover {background-color: #ddd;} #user_data th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white; } </style> </head> <body> <h1 align="center">Autószalon</h1> <br /> <div class="table-responsive"> <br /> <div align="right"> <button type="button" name="add" id="add" class="btn btn-info">Hozzáad</button> </div> <br /> <div id="alert_message"></div> <table id="user_data" class="table table-bordered table-striped"> <thead> <tr> <th>Autó</th> <th>Ár</th> <th>Alkalmazott</th> <th></th> </tr> </thead> </table> </div> </div> </body> </html> <script type="text/javascript" language="javascript" > $(document).ready(function(){ fetch_data(); function fetch_data() { var dataTable = $('#user_data').DataTable({ "processing" : true, "serverSide" : true, "order" : [], "ajax" : { url:"fetch.php", type:"POST" } }); } function update_data(id, column_name, value) { $.ajax({ url:"update.php", method:"POST", data:{id:id, column_name:column_name, value:value}, success:function(data) { $('#alert_message').html('<div class="alert alert-success">'+data+'</div>'); $('#user_data').DataTable().destroy(); fetch_data(); } }); setInterval(function(){ $('#alert_message').html(''); }, 5000); } $(document).on('blur', '.update', function(){ var id = $(this).data("id"); var column_name = $(this).data("column"); var value = $(this).text(); update_data(id, column_name, value); }); $('#add').click(function(){ var html = '<tr>'; html += '<td contenteditable id="data1"></td>'; html += '<td contenteditable id="data2"></td>' html += '<td contenteditable id="data3"></td>'; html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs">Beszúrás</button></td>'; html += '</tr>'; $('#user_data tbody').prepend(html); }); $(document).on('click', '#insert', function(){ var auto = $('#data1').text(); var ar = $('#data2').text(); var alkalmazott = $('#data3').text(); if(auto != '' && ar != '' && alkalmazott !='') { $.ajax({ url:"insert.php", method:"POST", data:{auto:auto, ar:ar, alkalmazott:alkalmazott}, success:function(data) { $('#alert_message').html('<div class="alert alert-success">'+data+'</div>'); $('#user_data').DataTable().destroy(); fetch_data(); } }); setInterval(function(){ $('#alert_message').html(''); }, 5000); } else { alert("Egy mezot kihagyott!"); } }); $(document).on('click', '.delete', function(){ var id = $(this).attr("id"); if(confirm("Biztosan torolni szeretne?")) { $.ajax({ url:"delete.php", method:"POST", data:{id:id}, success:function(data){ $('#alert_message').html('<div class="alert alert-success">'+data+'</div>'); $('#user_data').DataTable().destroy(); fetch_data(); } }); setInterval(function(){ $('#alert_message').html(''); }, 5000); } }); }); </script>
Ez a fetch.php kódja:

<?php //fetch.php $connect = mysqli_connect("localhost", "root", "", "autoszalon"); if (!mysqli_connect_errno() && mysqli_set_charset($connect, "utf8")) { $columns = array('ID', 'Auto', 'Ar', 'Alkalmazott'); $query = "SELECT * FROM automenu "; if(isset($_POST["search"]["value"])) { $query .= ' WHERE auto LIKE "%'.$_POST["search"]["value"].'%" OR alkalmazott LIKE "%'.$_POST["search"]["value"].'%" '; } if(isset($_POST["order"])) { $query .= 'ORDER BY '.$columns[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' '; } else { $query .= 'ORDER BY id DESC '; } $query1 = ''; if($_POST["length"] != -1) { $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length']; } $number_filter_row = mysqli_num_rows(mysqli_query($connect, $query)); $result = mysqli_query($connect, $query . $query1); $data = array(); while($row = mysqli_fetch_array($result)) { $sub_array = array(); $sub_array[] = '<div contenteditable class="update" data-id="'.$row["id"].'" data-column="Auto">' . $row["Auto"] . '</div>'; $sub_array[] = '<div contenteditable class="update" data-id="'.$row["id"].'" data-column="Ar">' . $row["Ar"] . '</div>'; $sub_array[] = '<div contenteditable class="update" data-id="'.$row["id"].'" data-column="Alkalmazott">' . $row["Alkalmazott"] . '</div>'; $sub_array[] = '<button type="button" name="delete" class="btn btn-danger btn-xs delete" id="'.$row["id"].'">Törlés</button>'; $data[] = $sub_array; } function get_all_data($connect) { $query = "SELECT * FROM automenu"; $result = mysqli_query($connect, $query); return mysqli_num_rows($result); } $output = array( "draw" => intval($_POST["draw"]), "recordsTotal" => get_all_data($connect), "recordsFiltered" => $number_filter_row, "data" => $data ); echo json_encode($output); } ?>
Ez az update.php kódja:

<?php $connect = mysqli_connect("localhost", "root", "", "autoszalon"); if (!mysqli_connect_errno() && mysqli_set_charset($connect, "utf8")) { if(isset($_POST["id"])) { $value = mysqli_real_escape_string($connect, $_POST["value"]); $query = "UPDATE automenu SET ".$_POST["column_name"]."='".$value."' WHERE id = '".$_POST["id"]."'"; if(mysqli_query($connect, $query)) { echo 'Adat Frissitve'; } } } ?>
Ez az insert.php kódja:

<?php $connect = mysqli_connect("localhost", "root", "", "autoszalon"); if (!mysqli_connect_errno() && mysqli_set_charset($connect, "utf8")) { if(isset($_POST["auto"], $_POST["ar"], $_POST["alkalmazott"])) { $auto = mysqli_real_escape_string($connect, $_POST["auto"]); $ar = mysqli_real_escape_string($connect, $_POST["ar"]); $alkalmazott = mysqli_real_escape_string($connect, $_POST["alkalmazott"]); $query = "INSERT INTO automenu(auto, ar, alkalmazott) VALUES('$auto', '$ar', '$alkalmazott')"; if(mysqli_query($connect, $query)) { echo 'Adat Elmentve'; } } } ?>
Ez a delete.php kódja:

<?php $connect = mysqli_connect("localhost", "root", "", "autoszalon"); if(isset($_POST["id"])) { $query = "DELETE FROM automenu WHERE id = '".$_POST["id"]."'"; if(mysqli_query($connect, $query)) { echo 'Adat Torolve'; } } ?>
Utóbbi napokban kértem már párszor segítséget, túl sokszor is, de a határidő meg az egyelőre nulla tapasztalat eléggé sürget, szóval mindenfajta segítség nagyon jól jön most, ezért előre is köszönöm. :D
Mutasd a teljes hozzászólást!
Nah figyu a napokban írtam @Incomingson-nak ugyanebben a témában (SQL) kezelés:

válasz:php-ciklus-teszteles-1-talalat-megszakitassal

csekkold a linket, de ne használd, amit ott írtam, mert (te most php7-el dolgozol nem? mindenesetre) ami ott írtam, az php7-ben deprecated

a lényeg tehát (most ismételni fogom magam, mert ez egy hatásos példa), ha küldök egy olyan requestet, ahol a search value:

'0; DELETE * FROM automenu -- ' //tehát ezt csak beírom a keresőbe az oldalon...

(!!idézőjelekkel együtt) ahol a -- kikommentezi a hátralévő részt... valószínű, hogy kitudom törölni az egész táblád ...

(nem teszteltem soha hasonlót, de (HA!!) ez éppen mégse működne, ha valaki nagyon beakar tenni neked/az oldalnak, valószínű megtudja csinálni...)

tehát esetedben valami ilyesmi lenne a minimum: php/manual/mysqli.real-escape-string

$mysqli = new mysqli("localhost", "root", "", "autoszalon"); // ... if(isset($_POST["search"]["value"])) { $keyword = strip_tags( trim( $mysqli->real_escape_string($_POST["search"]["value"]); ) ); $query .= ' WHERE auto LIKE "%'.$keyword.'%" OR alkalmazott LIKE "%'.$keyword.'%" '; }
Amit @pch írt: "egy komplett html oldal lett behúzva fejlécestől ajaxostól jquerystől mindenestől" <--- ez nagy hiba (én nem csekkoltam tegnap a php-d) ... Csinálj függvényeket (vagy file-okat), amik az adott template partokat küldik (csak amit beakarsz loadolni, script (és stlye tagok nélkül? --> css file-okat kéne használnod)), és azokat hívd az ajaxal (ne pedig az egész oldal-akhoz tartozó php-ket) (ha lesz időm később, lehet tudok írni valami példát...)


@DJ_Tacee: egy bekezdést ragadtál ki a válaszomból, ami arra vonatkozott, hogy egy MVC (~like --> request-response) keretrendszerben, NEM ajax loadolt template esetében előnyösnek tartom, ha az adott template tartalmazza a hozzá tartozó js-t, css-t... (talán később leírom, hogy milyen esetekben előnyös így, és mikor nem, bár lehet off topic lenne)... mindenesetre direkt úgy írtam a válaszom, hogy az egy kezdőnek szóljon (valakitől, aki szintén nem expert frontenden...), és, hogy tudjon belőle ötletet meríteni... Továbbá két megoldási lehetőséget is csatoltam, amiket használva (TALÁN) megtudja szüntetni a load-ok utáni bubblingot, viszont (mint leírtam), egy bonyolultabb rendszer esetében semmiképp sem tartom előnyösnek öszetettebb template-ek ajax loadolását... nem hiszem, hogy az ajax erre lenne való...
Mutasd a teljes hozzászólást!

  • A PHP ezesetben irreleváns, a probléma, hogy amit szeretnél (a menük közti ajaxos switch) messze nem a te szinted (sry, nem akarlak lehozni, de ez van).

    Iszonyat frontend skill kell ahhoz, hogy az ide-oda switch-ek után a JS-ed stabil maradjon.

    Néhány hónapja dolgoztam hasonló menü koncepción (hogy lásd, nem a levegőbe beszélek csináltam egy másfél perces vidit a fejlesztői oldalamról --> minden ajax vezérelt, kivétel a menük közti váltás): Ajax anywhere, but not in the menu ....

    Nah most legalább 5 napon keresztül (teljes munkaidőben) kínoztam magam vele (az 5 nap kb 14 napos időintervallumban szétszórva, tehát volt időm gondolkodni rajta), mire feladtam, és kiírtottam az ajaxot a menüpontok közti váltásból, ugyanis:

    Első kőrben a lényeg az lenne, hogy minnél kevesebb (csak a szükséges) file-okat töltsük be az adott oldalon, és semmi olyat, amit az adott oldal nem használ. Tehát a profi úgy lenne, hogy:
    [autok template: autok.js], [alkalmazottak template: alkalmazottak.js] etc...

    Szóval van egy parent template (vezérlőpult/dashboard), amin belül egy div-be (cell-content), loadolod az adott menüpont tartalmát ajaxal, tehát:

    dashboard template:

    <main class="left"> <div id="cell-content"> [autok template with autok.js] <!-- tehát ez kezdőtartalom, automatikusan renderelt --> </div> </main> <ul id="dashboard_menu"> <li><button id="autok">autok</button></li> <li><button id="alkalmazottak">alkalmazottak</button></li> </ul>

    A hozzá tartozó js (autok.js) pedig valami ilyesmi (ebben a szuper leegyszerűsített példában):

    $(document).on("click", "#alkalmazottak", function(ev) { ev.preventDefault(); //ennek olvass utána, ha nem vágod ev.stopImmediatePropagation(); //<-- ISZONYAT FONTOS!! OLVASS UTÁNA MI EZ! (Én mindenhol használom a stroke elkerülése végett) $.ajax({ url : "alkalmazottak.php" type : "POST", cache : false, contentType : false, processData : false, success : function(response) { //A response ezesetben a teljes template: [editor template with editor.js] $("#cell-content").html(response); } }); });

    Nah most ebben az esetben nem éppen az fog történni, mint amit várnál... ugyanis bár az autok.js az autok template része volt, amit teljesen lecseréltél az alkalmazottak template-re, a js mégis ott maradt a domban, vagy a gyorsító tárban, vagy az asset manager csinált kötéseket vele (te valószínű nem használsz most olyat, de nálam ez is egy hibafaktor volt...), a lényeg, hogy a javascript kód ott lesz, mint valami ghost, és rombadönti az életedet, összevissza fogja dobálni a error-okat a logba, meg értelmetlenül "bugyborékolni" fog (event bubbling), hiába a stopImmediatePropagation ...

    A legszebb az egészben, hogy teljesen kiszámíthatlan lesz az egész (nekem vagy neked, --> egy expert frontend-esnek, aki 5+ éve pakolja a react/angular type cuccokat, annak sima), volt, hogy 3 órán át próbálkoztam különböző megoldásokkal, és így random volt, hogy működött a dolog 5 switch-ig, (tehát a menüpontok közti ide-oda lépkedésig), aztán 6. alkalommal romba dőlt... Volt, hogy másodjára azonnal... Volt olyan is, hogy kb 10 órás kutatás és próbálkozás után, bevérzett szemekkel, sikerült összeraknom olyan kombinációt, ami 20 switch-ig sem omlott össze, és elaludtam... Másnap teszt ---> 3. switchnél összeomlott az egész...

    Bugyborékolás(ról kicsit bővebben): Van egy olyan effect az ilyen bonyolultabb ajax loadolt template-ekkel, hogy hiába használod a stopImmediatePropagation-t (mindenhol), hiába offolod akár az adott handler-t az eventre, az ajax (és úgy az egész oldalon minden más js is) a switchek számával hatványozódva fog tüzelni... Vagyis pl kattintasz az autok-ról az alkalmazottakra, majd vissza, majd a vevőkre, majd megint az alkalmazottakra, és megint vissza az autok-ra (oké, mint egy átlag user), akkor utána ha elindítasz egy setting-et az autok-on belül, azt az actiont kb (random -min 20 -max 80)-szor fogja a js végrehajtani... (ez akkor a legjobb, amikor az action új tartalmat hoz létre az adatbázisban)

    ... ...

    Tehát, hogy kikerüljem ezt a "ghost" js effectet, fogtam az összes érintett (switchelt) template javascript kódját, és belepakoltam egyetlen undorító és átláthatatlan több, mint 1000 soros file-ba, amit olyan helyen rendereltem, ami jó messzi van az ajax containertől (esetedben cell-content, ha jól értem) (mondjuk footerben (én spec a dashboard menüjébe toltam, mert végülis elsősorban azt kezelte))...

    Ezesetben a js valami ilyesmi volt:

    //(ha rám hallgatsz, (amíg nem mélyedsz el nálam jobban a frontend-ben) //minden ajax-odhoz ezt a patternt fogod használni, //és véletlenül sem indítasz ajax hívást közvetlenül eventből): var ajaxGetEditor = function(callerElem) { //tedd tele a js-ed log-okkal, és figyeld őket a consoleban! //Így tudod tetten érni a bubblingot, stb //Ha minden perfect, szedd ki őket, vagy ne, te tudod console.log('ajaxGetEditor called ...'); //Amikor kell valami adatot küldeni, mindig használd a FormData-t! //let someData = new FormData(); //someData.append("some_data", $("input#some").val()); //<-- így tudsz beletenni adatot $.ajax({ url : "getEditor.php", type : "POST", cache : false, contentType : false, processData : false, //data : someData, success : function(response) { console.log('ajaxGetEditor success ...'); $("#ajax_container").html(response); } }); }; $(document).on("click", "#call_editor", function(ev) { ev.preventDefault(); ev.stopImmediatePropagation(); console.log('click on'+$(this).attr("id")); ajaxGetEditor($(this)); }); var ajaxGetAppearance = function(callerElem) {/**/} $(document).on("click", "#call_appearance", function(ev) //...

    És ez így **szinte** 100%-ra megszüntette nálam a fentebb sorolt problémákat, viszont, ekkor kezdődött a legdurvább horror... Az én kódom már "oké" volt... de spec dessandro-é nem volt az :O Az ImagesLoaded plugin-t nem tudtam rávenni, hogy a switchek után újra initializálódjon a load-olt elemen... hiába destroy-oltam, állítottam null-ra a .data("infiniteScroll")-t a $container-en, a switch után egyszerűen nem működött (---> csak az első görgetés után ---> vagy az ablak méretének változásakor... akkor helyükre ugrottak a posztok...) <--- kb 2 napot szenvedtem vele... végigtúrtam a google-t, rengeteg mindent megpróbáltam, de semmi... Az Ace editor ugyanez... ajaxloadolt content-en egyszerűen nem működött megfelelően...

    A lényeg tehát, hogy a linkelt képedhez hasonló kezelőfelületek menüpontjai közti váltás ajaxal, úgy, hogy az profin, megbízhatóan és biztonságosan működjön, 100% hiba nélkül, a 100. switch után is, nagyon nem az a level, amit néhány nap alatt megtudsz tanulni szerintem... (itt az oldalon kb a @netangel, @tevemadar az, akikről biztosan állítom, hogy ezt megtudják csinálni ...)

    ...

    Lesd meg a tumblr-t, facebook-ot, twitter... semelyik sem használ ajaxot egész template-ek betöltésére (!!DE MÉG A WORDPRESS SEM <-- még a goddamn wordpress dashboard panelei közti váltás sem ajax-os! ... nagyon nem véletlen ...)

    Mindenesetre ezzel a patternnel tudsz tenni egy próbát (tehát, hogy minden ajaxot átírsz ehhez hasonló formára...) (ez a legagresszívebb megoldás, amit eddig találtam (amennyire az időm engedi, hogy frontenddel foglalkozzam)) (de mondom, nekem ezt a problémát sosem sikerült 100%-ra megoldanom):

    var enableAjax; var restartEvent = function(route) { if (route === "autok.php") { $("#autok").on("click", loadAutok); } if (route === "alkalmazottak.php") { $("#alkalmazottak").on("click", loadAlkalmazottak); } if (route === "vevok.php") { $("#vevok").on("click", loadVevok); } enableAjax = true; }; var natsuAjax = function(route) { if (enableAjax === true) { enableAjax = false; $.ajax({ url : route, type : "POST", cache : false, contentType : false, processData : false, success : function(response) { console.log("ajax on:"+route+" ...Hányszor látod ezt?") $("#cell-content").html(response); restartEvent(route); } }); } }; var loadAutok = function() { $("#autok").off("click", loadAutok); natsuAjax("autok.php"); }; var loadAlkalmazottak = function() { $("#alkalmazottak").off("click", loadAlkalmazottak); natsuAjax("alkalmazottak.php"); }; var loadVevok = function() { $("#vevok").off("click", loadVevok); natsuAjax("vevok.php"); }; var initMenu = function() { $("#autok").on("click", loadAutok); $("#alkalmazottak").on("click", loadAlkalmazottak); $("#vevok").on("click", loadVevok); enableAjax = true; }; $(document).ready(function() { initMenu(); });

    ui.: ... a legdurvább am az egészben, hogy miután elengedtem, rájöttem, hogy teljesen felesleges is volt... nem volt gyorsabb, nem volt szebb sem ... csak egy dev horror volt... --> (persze értem, hogy jelen esetben ez nem rajtad múlik... de a megbízód akkor járna a legjobban, ha sikerülne elmagyaráznod neki, hogy mennyire nem jó amit akar (xd))


    ... végül egy utolsó tipp: ahhoz képest, hogy teljesen kezdőnek írod magad, egész szép a JS-ed (a php-t nem igazán csekkoltam)... jó úton haladsz ---> viszont ha a notepad++ -ban kódolsz, ajánlom, hogy válts valami code editorra --> a microsoft Visual Studio Code free, és nekem pl nagyon bevált... teljesen más dimenzió, mint a notepad++

    ...

    (Ezt a hozzászólást meló közben kezdtem el írni, akkor, amikor az első kérdésed feltetted néhány napja ... De mire elküldtem volna, olyan magabiztosan írtad, hogy megvan a megoldás, hogy végül hagytam... (szerencsére elmentettem egy textbe, szó... remélem találsz benne hasznos infót...))
    Mutasd a teljes hozzászólást!
  • Ejjj... :D Remélem akkor csak valami félreértés történik, és nem várnak el komolyan ilyen szintet. Ez elméletileg egy junior webfejlesztői beugrófeladat kell, hogy legyen... :D Mindenesetre köszi a választ. :D
    Mutasd a teljes hozzászólást!
  • Már bocs, de amit írsz az nettó hülyeség. A lényeg csak annyi hogy egy elemre egyszer kell eseménykezelőt rakni és azt az elemet nem kell többet piszkálni. Ugyan miért kellene többször ráaggatni eseménykezelőt 1-1 AJAX hívás előtt / után? Egyszerűen csak jól átgondolt és jól szervezett kód kell, semmi több. Az, ha valaki komplett HTML-t rángat le szőröstül bőröstül (header, JS hivatkozások, stb.) és azt teszi bele innerHTML-el vagy jQuery html()-el az magára vessen, mert az alapokkal sincs tisztában. Nem kell túlgondolni a dolgokat, csak helyesen kell használni a technológiát, átgondolt kódot tervezni és írni, és nem összeollózni innen-onnan...
    Mutasd a teljes hozzászólást!
  • Valóban nem vagyok tisztában az alapokkal, ugyanis egészen konkrétan 10 napot kaptam megtanulni a JavaScriptet, AJAX-et és jQueryt a nulláról elég magas szintre ahhoz, hogy ez a munka sikerüljön (egy cégnek, interjúhoz), ezért azokat a bizonyos alapokat most tanulom meg helyben; ezért kérek segítséget. Mire aggattam több eseménykezelőt is véletlenül? Ezen kívül, mit javasolsz, milyen módon töltsem be ez esetben a Tablet az Autok menüpontba AJAX-esen, ha a jelenlegi nem működőképes? Válaszodat előre is köszönöm.
    Mutasd a teljes hozzászólást!
  • Nem neked írtam azt a hozzászólást. Ha megfogadod belőle a tanácsokat akkor rosszul nem járhatsz. Figyelj oda mikor és mire teszel eseménykezelőd, szkripteket lehetőleg ne nagyon húzz be AJAX-al (csak ha muszáj), itt különösen figyelni kell arra hogy önmagát ne hívja meg újra, vagy ne tegye rá már meglévő elemre az eseményfigyelőt, mert akkor az lesz amit danigore is leírt. Ez kód-szervezési kérdés, amit ő ír hogy (idézem):

    <div id="cell-content"> [autok template with autok.js] <!-- tehát ez kezdőtartalom, automatikusan renderelt --> </div>
    az a lehető legrosszabb, mert itt a JS-t is annyiszor hívod be ahány AJAX query volt... Aztán minden alkalommal ráteszi az on()-al a kattintás figyelőt, utána meg csodálkozik hogy többször fut le, meg gányol hogy mégiscsak egyszer... A lehető legrosszabb út! Ez így felejtős.
    Mutasd a teljes hozzászólást!
  • Szóval a hiba, hogy a jobb oldali div-be egy komplett html oldal lett behúzva fejlécestől ajaxostól jquerystől mindenestől.
    Így ugye minden update esetén mégegyszer behúzásra került az egész cucc így lett az, hogy minden annyiszor jelent meg amennyiszer hozzáadtak.
    De mint többen említették az egész az alapoktól rossz.
    Az sql kezelés meg hátborzongató.

    pch
    Mutasd a teljes hozzászólást!
  • Mik a legsúlyosabb alapvető hibák? Az SQL kezelésben pedig mit (hát, mi mindent) csinálok rosszul? :D Mint mondtam, teljesen kezdő vagyok ebben, ezért szeretném az ilyeneket tudni, hogy a problémákat kiküszöbölhessem.
    Mutasd a teljes hozzászólást!
  • Nah figyu a napokban írtam @Incomingson-nak ugyanebben a témában (SQL) kezelés:

    válasz:php-ciklus-teszteles-1-talalat-megszakitassal

    csekkold a linket, de ne használd, amit ott írtam, mert (te most php7-el dolgozol nem? mindenesetre) ami ott írtam, az php7-ben deprecated

    a lényeg tehát (most ismételni fogom magam, mert ez egy hatásos példa), ha küldök egy olyan requestet, ahol a search value:

    '0; DELETE * FROM automenu -- ' //tehát ezt csak beírom a keresőbe az oldalon...

    (!!idézőjelekkel együtt) ahol a -- kikommentezi a hátralévő részt... valószínű, hogy kitudom törölni az egész táblád ...

    (nem teszteltem soha hasonlót, de (HA!!) ez éppen mégse működne, ha valaki nagyon beakar tenni neked/az oldalnak, valószínű megtudja csinálni...)

    tehát esetedben valami ilyesmi lenne a minimum: php/manual/mysqli.real-escape-string

    $mysqli = new mysqli("localhost", "root", "", "autoszalon"); // ... if(isset($_POST["search"]["value"])) { $keyword = strip_tags( trim( $mysqli->real_escape_string($_POST["search"]["value"]); ) ); $query .= ' WHERE auto LIKE "%'.$keyword.'%" OR alkalmazott LIKE "%'.$keyword.'%" '; }
    Amit @pch írt: "egy komplett html oldal lett behúzva fejlécestől ajaxostól jquerystől mindenestől" <--- ez nagy hiba (én nem csekkoltam tegnap a php-d) ... Csinálj függvényeket (vagy file-okat), amik az adott template partokat küldik (csak amit beakarsz loadolni, script (és stlye tagok nélkül? --> css file-okat kéne használnod)), és azokat hívd az ajaxal (ne pedig az egész oldal-akhoz tartozó php-ket) (ha lesz időm később, lehet tudok írni valami példát...)


    @DJ_Tacee: egy bekezdést ragadtál ki a válaszomból, ami arra vonatkozott, hogy egy MVC (~like --> request-response) keretrendszerben, NEM ajax loadolt template esetében előnyösnek tartom, ha az adott template tartalmazza a hozzá tartozó js-t, css-t... (talán később leírom, hogy milyen esetekben előnyös így, és mikor nem, bár lehet off topic lenne)... mindenesetre direkt úgy írtam a válaszom, hogy az egy kezdőnek szóljon (valakitől, aki szintén nem expert frontenden...), és, hogy tudjon belőle ötletet meríteni... Továbbá két megoldási lehetőséget is csatoltam, amiket használva (TALÁN) megtudja szüntetni a load-ok utáni bubblingot, viszont (mint leírtam), egy bonyolultabb rendszer esetében semmiképp sem tartom előnyösnek öszetettebb template-ek ajax loadolását... nem hiszem, hogy az ajax erre lenne való...
    Mutasd a teljes hozzászólást!
  • Az a gond, hogy bármit is átírok a fetch.php -ban, akár csak egy egyszerű kiíratást is (vagy pedig éppen azt a biztonsági dolgot, amit említettél), kidobja az "Invalid JSON response" errort, ami eléggé megköti a kezeimet... attól is meg kéne szabadulni valahogy kétségkívül, csak egyelőre sok a probléma, idő meg nagyon kevés.
    Mutasd a teljes hozzászólást!
  • sorry, az előző válaszomban a:

    $mysqli->real_escape_string($_POST["search"]["value"]); //HIBÁS <-- nem kell a ; végére...

    tehát cseréld erre:

    $mysqli->real_escape_string($_POST["search"]["value"])

    ha ezzel is error-t, mutasd az egész hibaüzenetet
    Mutasd a teljes hozzászólást!
  • Megoldottam, volt ez az elírás valóban, de volt más baj is (nem abban a kódban, amit te írtál, más kódrészben). :D Most már működik. Ezen kívül megoldottam sikeresen az AJAX-es listamegjelenítést is, most már működik az is. Bár tény, hogy nekem csak egy menü AJAX-es jelenleg, és az a lista menüje, de egyelőre csak ennek is kell nagyon annak lennie, ez volt kérve, a határidőből meg már nincs sok. Később majd utólag megnézem, milyen akkor, ha minden menü AJAX-es. :D A megoldás egyébként az volt, hogy az összes source cuccot az autok.php-ból átvittem az index.php-ba és a JavaScript kódot fájlból olvasom be inkább az autok.php-n belül. Ezen kívül minden MySQL-hez kapcsolódó kód végénél le is zártam a MySQL-t; az sem ártott az biztos.
    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