ideeën: fetch data update direct
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.
Die gebruik je dan om je visuele waardes aan te passen.
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
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<?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>
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.
Gewijzigd op 09/06/2020 00:02:58 door Thomas van den Heuvel
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.
Fijn om te horen dat je iets aan het voorbeeld had.