ideeën: fetch data update direct

Door Loek Lemmens op 08-06-2020 21:42

1.502 views

Goede avond,

Mijn topic titel zal ik even toelichten.

Ik heb een klein systeempje gemaakt waarmee ik snel de voorraad kan wijzigen in de database.
Normaal zoek je een product en moet je een aantal klikken uitvoeren om de voorraad te wijzigen.
Daarom heb ik een systeempje gemaakt zodat je dit via een popup kunt wijzigen.
1. Je zoekt eerst de gewenste producten via de zoekbalk, deze worden met AJAX call en php uit de database gehaald.
2. De producten (resultaten) worden weergegeven in de vorm van een lijst.
3. Je klikt bij het gewenste product op voorraad wijzigen.
4. wijzigen het aantal en klik op opslaan.
Via een AJAX call word de info vanuit de popup doorgegeven aan PHP en zo in de database gewijzigd.
Maar de wijziging zie ik pas als ik het product opnieuw zoek en dat wil ik veranderen naar direct zichtbaar na het updaten.

Hoe ik na het updaten dezelfde lijst / resultaten terug qua producten?
Sla ik de productzoek opdracht op in een variabel of local storage of zijn er andere manieren om dit te doen?
Ben benieuwd naar jullie gedachte hierover.

- Ariën -

08-06-2020 21:51

je kan na het versturen toch direct de nieuwe gegevens in JSON formaat terug sturen?
Die gebruik je dan om je visuele waardes aan te passen.

Thomas van den Heuvel

08-06-2020 21:51

Maar waarom gebruik je een popup als je AJAX-calls maakt? Wijzig de informatie rechtstreeks in het overzicht?

Loek Lemmens

08-06-2020 22:09

Ik update maar 1 product en niet die hele lijst wat ik aan het begin opvraag.

Mijn vraag is eigenlijk gewoon hoe ik het makkelijkste dezelfde lijst nog een fetch.
Stel ik heb gezocht op voetbalschoenen dan krijg ik 3 of 4 paar te zien.
Ik verander de voorraad van product 2 in de lijst en wil die lijst wederom van voetbalschoenen fetchen

- Ariën -

08-06-2020 22:21

Dat zeg ik net toch? Bij het sturen van je request fetch je de nieuwe lijst, en stuur je die terug via JSON, en dat zet je weer om naar je eigen visualisatie.

Thomas van den Heuvel

08-06-2020 22:23

Als je die rij interactief maakt, en aanpast via een AJAX-call, en daarna weer terugverandert naar een statische rij, dan staat alles toch meteen goed?

Het hele idee van AJAX-calls is toch niet refreshen/geen nieuwe vensters openen, dus als je een popup toevoegt, introduceer je in wezen zelf dit synchronisatieprobleem?

Martijn B

08-06-2020 22:50

Mischien dat ik het niet goed gelezen heb.. Maar een cell aanpassen in phpmyadmin is het gene wat hier bedoelt word? Je past bijvoorbeeld een cell aan van 1 naar 2, er zit een onkeyup event op die cell die een ajax post doet.

Thomas van den Heuvel

08-06-2020 23:55 gewijzigd op 09-06-2020 00:02

Werkend voorbeeld van hoe je jQuery en AJAX combineert om zo een interactive tabel te maken:

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_GET['action']) && $_GET['action'] == 'update') {
    $response = array(
        'status' => 'failure',
    );
    // ... filter/check input here obviously, for now we do a rudimentary check on the quantity only ...
    if (isset($_POST['qty']) && preg_match('#^[1-9][0-9]*$#', $_POST['qty']) === 1) {
        // ... update table here ...
        // set the appropriate response
        $response = array(
            'status' => 'success',
            'qty'    => $_POST['qty'],
        );
    }
    header('Content-Type: application/json; charset=UTF-8');
    echo json_encode($response);
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>edit table row with jQuery</title>
<style type="text/css">
body                                    { font-family: sans-serif; }
table.inventory                         { table-layout: fixed; border-collapse: collapse; border: 1px solid #000; width: 500px; }
table.inventory th,
table.inventory td                      { border: 1px solid #000; padding: 5px; }
table.inventory td.qty                  { text-align: right; }
table.inventory td.qty input            { text-align: right; width: 50px; }
table.inventory td.qty input.error      { color: #ff0000; }
</style>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</head>

<body>
<table class="inventory">
<thead>
    <tr>
        <th width="80%">name</th>
        <th width="20%">qty</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>pencil</td>
        <td class="qty" data-id="1" data-mode="value" data-value="5">5</td>
    </tr>
    <tr>
        <td>eraser</td>
        <td class="qty" data-id="2" data-mode="value" data-value="3">3</td>
    </tr>
</tbody>
</table>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('table.inventory td.qty').click(function(e) {
        if ($(this).attr('data-mode') == 'value') {
            var $html = $('<input type="text" value="'+$(this).html()+'">');
            $(this).attr('data-mode', 'field').html($html);
            $html.select();
        }
    });
    $('table.inventory td.qty').on('keyup', 'input', function(e) {
        e.preventDefault();
        $input = $(this);
        $td = $input.parent();

        if (e.keyCode == 13 || e.keyCode == 10) { // carriage return / line feed
            console.log('enter!');
            $.ajax({
                'url': '<?php echo $_SERVER['SCRIPT_NAME']; ?>?action=update',
                'method': 'POST',
                'data': {'id': $td.attr('data-id'), 'qty': $input.val()},
                'dataType': 'json',
                'success': function(data) {
                    if (data.status == 'success') {
                        console.log('huge success!');
                        // update attributes
                        $td.attr('data-value', data.qty);
                        $td.html(data.qty).attr('data-mode', 'value');
                    } else {
                        console.log('woops!');
                        // do nothing? or change value to "error"?
                        $input.addClass('error');
                    }
                }
            });
        } else if (e.keyCode == 27) { // escape, restore original value
            console.log('escape!');
            $td.html($td.attr('data-value')).attr('data-mode', 'value');
        }
    });
});
//]]>
</script>
</body>
</html>

Klik op de "quantity" cell om de inhoud aan te passen. Druk vervolgens op enter voor opslaan of escape voor het herstellen van de eerder opgeslagen waarde.

Loek Lemmens

09-06-2020 00:59

Ik heb een global variabel gemaakt die de waarde van de zoekopdracht onthoud.
Zodra er op opslaan is geklikt word de AJAX call uitgevoerd en met succes word de global variabel gebruikt in de fetch om zo mijn data te krijgen wat ik wil.

Thomas van den Heuvel

09-06-2020 16:48

Graag gedaan.

Fijn om te horen dat je iets aan het voorbeeld had.

Reageren

Inloggen om te reageren