Doe ik het goed ? Opvullen veld via JSON.stringify
ik zit de volgende uitdaging:
Ik heb een "start_berekening" pagina, waarop een gebruiker heel wat dingen moet gaan invullen.
Alles wat hij kan kiezen komt uit SQL tabellen en voor elke materiaal is er één selectie veld.
Nu wil ik op het einde de gebruiker de kans geven om "oneindig" veel onderdelen in te geven via 2 maten en een aantal. Dit omdat het kan zijn dat hij van het één 10 stuks wil, van het andere 2 en van nog een andere 100. Aangezien het niks is dat uit een tabel kan komen, laat ik de gebruiker dmv een knop een modale DIV te zien krijgen.
De gebruiker geeft daar hoogte, breedte en aantal in. Als hij op "Toevoegen" klikt, wil ik dat de data in "een veld" komt, dat daarna ook wordt meegestuurd met de submit.
Alles werkt op dit moment zoals ik wil, alleen loop ik nu tegen een vervelend stukje aan plus ik zou willen weten of ik het wel goed doe of niet.
De code van de modale DIV is deze :
Quote:
$('#sluiter2').click(function () {
if ($('#passtuklengte').val() != 0 && $('#passtukhoogte').val() != 0) {
passtukarr.push({ lengte: $('#passtuklengte').val(), hoogte: $('#passtukhoogte').val(), aantal: $('#passtukaantal').val() });
var new_text = new String();
new_text = "<table><tr><td colspan='3'><h1>Passtukken</h1></td></tr><tr><th>Lengte</th><th>Hoogte</th><th>Aantal</th></tr>";
$.each(passtukarr, function(i , val) {
new_text += "<tr>";
$.each(val, function(index, value) {
new_text += "<td>" + value + "</td>";
});
new_text += "<td><img src='images/delete.png' id='deleteButton'></td>";
new_text += "</tr>";
});
new_text += "</table>";
var passtukkenarrfield = document.getElementById('passtukkenarr');
passtukkenarrfield.value = JSON.stringify(passtukarr);
$("#passtukken").html(new_text);
$('#passtukken').show();
}
$("#passtuklengte").val("");
$("#passtukhoogte").val("");
$("#passtukaantal").val("");
});
if ($('#passtuklengte').val() != 0 && $('#passtukhoogte').val() != 0) {
passtukarr.push({ lengte: $('#passtuklengte').val(), hoogte: $('#passtukhoogte').val(), aantal: $('#passtukaantal').val() });
var new_text = new String();
new_text = "<table><tr><td colspan='3'><h1>Passtukken</h1></td></tr><tr><th>Lengte</th><th>Hoogte</th><th>Aantal</th></tr>";
$.each(passtukarr, function(i , val) {
new_text += "<tr>";
$.each(val, function(index, value) {
new_text += "<td>" + value + "</td>";
});
new_text += "<td><img src='images/delete.png' id='deleteButton'></td>";
new_text += "</tr>";
});
new_text += "</table>";
var passtukkenarrfield = document.getElementById('passtukkenarr');
passtukkenarrfield.value = JSON.stringify(passtukarr);
$("#passtukken").html(new_text);
$('#passtukken').show();
}
$("#passtuklengte").val("");
$("#passtukhoogte").val("");
$("#passtukaantal").val("");
});
Buiten het feit of dit een goede oplossing is of niet, loop ik tegen twee problemen aan :
1. Als de gebruiker zijn gegevens heeft ingevuld maar nog niet gesubmit heeft en dan per ongeluk F5 of refresh doet, dan zijn de gegevens verdwenen aangezien het in een DIV zit die gevuld wordt met innerHTML.
2. Ik wil de gebruiker de kans geven een "lijn" te deleten, daarvoor heb ik de delete knop al voorzien, maar ik kan niet meegeven aan de knop welke lijn hij moet verwijderen. Waarschijnlijk moet ik daarvoor een parse doen van de JSON, die verwerken en dan weer naar JSON zetten.
Kan er iemand me vertellen of dit al dan niet de beste manier is en zo nee, wat er beter kan of over moet gedaan worden ?
vriendelijke groeten en alvast bedankt.
Davy
Bescheidenheid is meestal een slechte raadgever als het gaat om taxonomie.
Ik zou dit bij javascript gezet hebben.
-----
Kan je de (eventueel ingekorte) HTML tonen die hier bij hoort?
(Vooral dus alle elementen die aangesproken worden in javascript)
------
EDIT
Dit zal al een groot deel doen van wat je vraagt.
Een aantal zaken aan jouw code:
- id='deleteButton' : zet nooit id in een lus. id moet uniek zijn. Als het in een lus staat, gebruik dan class.
- Draai je gebruik van ' en " om. Okay, dit is vooral een kwestie van smaak, maar het maakt het je gemakkelijker.
Verder lijkt jouw idee me niet verkeerd; ik zou zo verder doen.
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
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
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function() {
// variabelen cachen
var passtukarr = new Array();
$('#sluiter2').click(function () {
if ($('#passtuklengte').val() != 0 && $('#passtukhoogte').val() != 0) {
passtukarr.push({
lengte: $('#passtuklengte').val(),
hoogte: $('#passtukhoogte').val(),
aantal: $('#passtukaantal').val()
});
display_table();
}
$("#passtuklengte").val("");
$("#passtukhoogte").val("");
$("#passtukaantal").val("");
});
$('body').on('click', '.deleteButton', function(e) {
// eerst zoeken welke knop het is
var index = $(this).index('.deleteButton');
remove_row(passtukarr, index);
});
/**
* remove an item from an array.
*/
function remove_row(rows, index) {
rows.splice(index, 1); // haalt element index weg en laat de rest mooi staan
display_table();
}
/**
* Converts the passtukarr array and displays it on the screen
*/
function display_table() {
var new_text = '';
new_text = '<table><tr><td colspan="3"><h1>Passtukken</h1></td></tr><tr><th>Lengte</th><th>Hoogte</th><th>Aantal</th></tr>';
$.each(passtukarr, function(i , val) {
new_text += "<tr>";
$.each(val, function(index, value) {
new_text += "<td>" + value + "</td>";
});
new_text += '<td><img src="images/delete.png" alt="X" title="REMOVE row" class="deleteButton"></td>';
new_text += '</tr>';
});
new_text += '</table>';
$('#passtukkenarr').val(JSON.stringify(passtukarr));
$("#passtukken").html(new_text);
$('#passtukken').show();
}
});
</script>
<input id="passtuklengte" placeholder="passtuklengte" value="5">
<input id="passtukhoogte" placeholder="passtukhoogte" value="10">
<input id="passtukaantal" placeholder="passtukaantal" value="2">
<div id="sluiter2">Sluiter2</div>
<hr>
<input id="passtukkenarr">
<div id="passtukken"></div>
<style>
#sluiter2 {
border: 1px solid #000;
width: 100px;
}
</style>
<script>
$(document).ready(function() {
// variabelen cachen
var passtukarr = new Array();
$('#sluiter2').click(function () {
if ($('#passtuklengte').val() != 0 && $('#passtukhoogte').val() != 0) {
passtukarr.push({
lengte: $('#passtuklengte').val(),
hoogte: $('#passtukhoogte').val(),
aantal: $('#passtukaantal').val()
});
display_table();
}
$("#passtuklengte").val("");
$("#passtukhoogte").val("");
$("#passtukaantal").val("");
});
$('body').on('click', '.deleteButton', function(e) {
// eerst zoeken welke knop het is
var index = $(this).index('.deleteButton');
remove_row(passtukarr, index);
});
/**
* remove an item from an array.
*/
function remove_row(rows, index) {
rows.splice(index, 1); // haalt element index weg en laat de rest mooi staan
display_table();
}
/**
* Converts the passtukarr array and displays it on the screen
*/
function display_table() {
var new_text = '';
new_text = '<table><tr><td colspan="3"><h1>Passtukken</h1></td></tr><tr><th>Lengte</th><th>Hoogte</th><th>Aantal</th></tr>';
$.each(passtukarr, function(i , val) {
new_text += "<tr>";
$.each(val, function(index, value) {
new_text += "<td>" + value + "</td>";
});
new_text += '<td><img src="images/delete.png" alt="X" title="REMOVE row" class="deleteButton"></td>';
new_text += '</tr>';
});
new_text += '</table>';
$('#passtukkenarr').val(JSON.stringify(passtukarr));
$("#passtukken").html(new_text);
$('#passtukken').show();
}
});
</script>
<input id="passtuklengte" placeholder="passtuklengte" value="5">
<input id="passtukhoogte" placeholder="passtukhoogte" value="10">
<input id="passtukaantal" placeholder="passtukaantal" value="2">
<div id="sluiter2">Sluiter2</div>
<hr>
<input id="passtukkenarr">
<div id="passtukken"></div>
<style>
#sluiter2 {
border: 1px solid #000;
width: 100px;
}
</style>
Gewijzigd op 16/10/2013 17:20:03 door Kris Peeters
ALVAST ENORM BEDANKT.
Ik probeer het één van de volgende dagen uit, nu even geen tijd.
Het zou leuk zijn dat je hier op het forum code netjes zou kunnen plakken, of een attachment sturen.
Welk gedeelte van de HTML zou je willen ? Want het is nogal een lange pagina.
Mijn excuses trouwens voor het verkeerde subforum te gebruiken.
Vriendelijke groeten,
Davy
- jsFiddle
- CodePen
- pastebin
etc
bedankt voor de tip.
Hier is de ganse code (nog zonder jouw voorstellen erbij).
http://pastebin.com/NGn57tb0
Groetjes,
Davy
Toevoeging op 17/10/2013 17:25:20:
Kris,
je oplossing werkt PERFECT. Mijn nederige dank voor de moeite...
Vriendelijke groeten,
Davy
Toevoeging op 17/10/2013 17:40:05:
Ik merk echter nog één probleempje op.
Als ik (al dan niet per ongeluk) op het hoofdscherm op F5 klik of refresh doe, dan verdwijnt de tabel terug uit mijn DIV. Ik veronderstel dat dit een "normaal" fenomeen is, maar kan ik het (zonder Ajax) ook tegenwerken ?
Vriendelijke groeten,
Davy
Als ik (al dan niet per ongeluk) op het hoofdscherm op F5 klik of refresh doe, dan verdwijnt de tabel terug uit mijn DIV. Ik veronderstel dat dit een "normaal" fenomeen is, maar kan ik het (zonder Ajax) ook tegenwerken ?
Nu ik verder aan het werken ben aan mijn tool, merk ik dat in de "edit" pagina van deze gegevens nu de zelfde tabel wil tonen. Maar ik moet deze uit PHP halen en dan via de display_table functie gaan tonen.
Hoe moet ik daarvoor nu het process omdraaien ?
Is er een functie die de JSON terug kan zetten ?
Groetjes,
Davy
Davy Carmans op 27/10/2013 12:43:21:
Is er een functie die de JSON terug kan zetten ?
http://php.net/manual/en/function.json-decode.php
Je hebt json_encode en json_decode
Daarom heb ik nu een hidden veld toegevoegd waarin ik in het begin van mijn code via PHP een waarde ga invullen...
Code (php)
1
if ($meubelrow['passtukken'] == '1') {$pa = $meubelrow['passtukkenarr'];}
Verderop in de code doe ik dan dit :
Code (php)
1
2
2
var tp_arr = new Array($("#passtukkenarrjson").val());
display_table_passtukken_editmode(tp_arr);
display_table_passtukken_editmode(tp_arr);
(Weet natuurlijk niet of dit de beste manier is).
Verderop vul ik dan de tabel weer op als volgt :
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
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
function display_table_passtukken_editmode(arr) {
var new_text = '';
new_text = '<table><tr><td colspan="4"><h1>Passtukken</h1></td></tr><tr><th></th><th>Lengte (cm)</th><th>Hoogte (cm)</th><th>Aantal (stuks)</th></tr>';
$.each(arr, function(i , val) {
var eva = JSON.parse(val);
$.each(eva, function(index, value) {
new_text += "<tr>";
new_text += '<td width="20px"><img src="images/delete.png" alt="X" title="REMOVE row" class="deleteButton"></td>';
passtukarr.push({
lengte : value.lengte,
hoogte: value.hoogte,
aantal: value.aantal
});
$.each(value, function(index2, value2) {
new_text += "<td> " + value2 + "</td>";
});
new_text += '</tr>';
});
});
new_text += '</table>';
$('#passtukkenarr').val(arr);
$("#passtukken").html(new_text);
$("#passtukken").show();
}
var new_text = '';
new_text = '<table><tr><td colspan="4"><h1>Passtukken</h1></td></tr><tr><th></th><th>Lengte (cm)</th><th>Hoogte (cm)</th><th>Aantal (stuks)</th></tr>';
$.each(arr, function(i , val) {
var eva = JSON.parse(val);
$.each(eva, function(index, value) {
new_text += "<tr>";
new_text += '<td width="20px"><img src="images/delete.png" alt="X" title="REMOVE row" class="deleteButton"></td>';
passtukarr.push({
lengte : value.lengte,
hoogte: value.hoogte,
aantal: value.aantal
});
$.each(value, function(index2, value2) {
new_text += "<td> " + value2 + "</td>";
});
new_text += '</tr>';
});
});
new_text += '</table>';
$('#passtukkenarr').val(arr);
$("#passtukken").html(new_text);
$("#passtukken").show();
}
Het werkt, dat is al iets... :-)