waarde listmenu in database vervangen
Code (php)
1
document.getElementById("demo").style.backgroundColor = score;
Trouwens (document.getElementById("demo").style.backgroundColor = score;) hoe zet ik die waarde dan in de td?
Ik begrijp het even niet.
De 'id' weet je, omdat je die naar de server stuurt.
De kleur echo je in insertdetailed.php zoals eerder vermeld en ontvang je in 'resp';
In regel 13 stuur je 'id' en 'resp' mee :
Code (php)
1
2
3
2
3
success:function(resp) {
getColor ( id, resp);
}
getColor ( id, resp);
}
Vervang regel 28-30 door dit :
Code (php)
1
2
3
2
3
function getColor (id, score) {
document.getElementById( id ).style.backgroundColor = score ;
}
document.getElementById( id ).style.backgroundColor = score ;
}
De vraag werd trouwens al in een eerder topic van je behandeld.
De regelnummers verwijzen naar deze lap code :
https://www.phphulp.nl/php/forum/topic/waarde-listmenu-in-database-vervangen/102903/2/#743702
Gewijzigd op 25/04/2019 19:00:15 door Adoptive Solution
Maar de kleur veranderd niet. Ik begrijp ook niet hoe de $_POST['resp']; de bgcolor="echo $bgcolor;>" kan aanpassen.
Gewijzigd op 25/04/2019 20:21:10 door Sietsko Bos
Je kunt dus een PHP-script aanroepen via JavaScript zodat je deze (client side) kunt voeden met (server side) informatie zonder de pagina te verversen. Dat is min of meer het hele idee van het gebruik van deze constructie.
In de callback (in het success blok) is het dus de bedoeling dat je de achtergrondkleur instelt. Dit doe je weer met de hulpfunctie getColor().
Je kunt natuurlijk ook tussentijds deze boel debuggen met alerts, of wellicht nog beter, met console.log() zodat je informatie kunt dumpen in de netwerk (ontwikkel)tab van je browser.
Gewijzigd op 25/04/2019 21:43:56 door Thomas van den Heuvel
Gewijzigd op 25/04/2019 21:47:43 door Sietsko Bos
Begrijp je hoe de communicatie tussen webpagina (client) en het PHP-verwerk-script (server) loopt met behulp van JavaScript?
Het PHP-script geeft informatie terug aan de JavaScript-success-callback-functie. Die informatie, afkomstig uit dat PHP-script, gebruik je vervolgens in de JavaScript om de achtergrondkleur in te stellen.
Gewijzigd op 25/04/2019 22:18:27 door Thomas van den Heuvel
Hier geef je aan waar de kleuren vandaan komen :
https://www.phphulp.nl/php/forum/topic/waarde-listmenu-in-database-vervangen/102903/2/#743686
Dus als je weet wat de score is (vermoedelijk de value uit de list), weet je ook de kleur. Die kleur echo je in insertdetailed.php
Het werkt nu helemaal goed.
Iedereen die geholpen heeft natuurlijk heel veel dank want ik was hier niet uitgekomen... Top!
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
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
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
const tabelcolor =
{
kleur1: 'red',
kleur2: 'yellow',
kleur3: 'purple',
kleur4: 'green',
kleur5: 'lightgrey',
kleur6: 'navy'
};
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
let td = $(this).parent('td');
$.post(
'insertdetailed.php',
{
value: value,
id: id
},
function(data) {
td.css('background-color', tabelcolor['kleur' + data]);
}
);
});
});
</script>
<p id='demo'>JavaScript uses names to access object properties.</p>
<form method="post">
<p>
De waarde van de $bgcolor komt in eerste instantie uit de database.<br>
Die bepaalt dus ook de achtergrondkleur van de td.<br>
Bij een wijziging zou de achtergrondkleur dan de kleur van het nummer moeten krijgen zonder refresh.
De vraag is eigenlijk hoe krijg je nu id='demo' in de td zodat het ook blijft werken met de eerste bgcolor die uit de database komt.
</p>
<?php
// voor de test even de kleur gezet
$bgcolor = '#93050f';
?>
<table width="15%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
<script>
$(document).ready(function() {
const tabelcolor =
{
kleur1: 'red',
kleur2: 'yellow',
kleur3: 'purple',
kleur4: 'green',
kleur5: 'lightgrey',
kleur6: 'navy'
};
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
let td = $(this).parent('td');
$.post(
'insertdetailed.php',
{
value: value,
id: id
},
function(data) {
td.css('background-color', tabelcolor['kleur' + data]);
}
);
});
});
</script>
<p id='demo'>JavaScript uses names to access object properties.</p>
<form method="post">
<p>
De waarde van de $bgcolor komt in eerste instantie uit de database.<br>
Die bepaalt dus ook de achtergrondkleur van de td.<br>
Bij een wijziging zou de achtergrondkleur dan de kleur van het nummer moeten krijgen zonder refresh.
De vraag is eigenlijk hoe krijg je nu id='demo' in de td zodat het ook blijft werken met de eerste bgcolor die uit de database komt.
</p>
<?php
// voor de test even de kleur gezet
$bgcolor = '#93050f';
?>
<table width="15%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
Toevoeging op 26/04/2019 14:23:23:
Voorgaande werkt ook, en native Javascript is zeker sneller dan jQuery, maar qua leesbaarheid en structuur van je code geef ik nog even voorgaande mee ter illustratie.
Toevoeging op 26/04/2019 14:23:50:
Jelle Dnw op 26/04/2019 14:08:00:
Even de mooie versie:
Toevoeging op 26/04/2019 14:23:23:
Voorgaande met de getColor etc werkt ook, en native Javascript is zeker sneller dan jQuery, maar qua leesbaarheid en structuur van je code geef ik nog even bovenstaande mee ter illustratie.
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
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
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
const tabelcolor =
{
kleur1: 'red',
kleur2: 'yellow',
kleur3: 'purple',
kleur4: 'green',
kleur5: 'lightgrey',
kleur6: 'navy'
};
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
let td = $(this).parent('td');
$.post(
'insertdetailed.php',
{
value: value,
id: id
},
function(data) {
td.css('background-color', tabelcolor['kleur' + data]);
}
);
});
});
</script>
<p id='demo'>JavaScript uses names to access object properties.</p>
<form method="post">
<p>
De waarde van de $bgcolor komt in eerste instantie uit de database.<br>
Die bepaalt dus ook de achtergrondkleur van de td.<br>
Bij een wijziging zou de achtergrondkleur dan de kleur van het nummer moeten krijgen zonder refresh.
De vraag is eigenlijk hoe krijg je nu id='demo' in de td zodat het ook blijft werken met de eerste bgcolor die uit de database komt.
</p>
<?php
// voor de test even de kleur gezet
$bgcolor = '#93050f';
?>
<table width="15%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
<script>
$(document).ready(function() {
const tabelcolor =
{
kleur1: 'red',
kleur2: 'yellow',
kleur3: 'purple',
kleur4: 'green',
kleur5: 'lightgrey',
kleur6: 'navy'
};
$('.ajax-select-save').change(function() {
const value = $(this).val();
const id = $(this).data('target-id');
let td = $(this).parent('td');
$.post(
'insertdetailed.php',
{
value: value,
id: id
},
function(data) {
td.css('background-color', tabelcolor['kleur' + data]);
}
);
});
});
</script>
<p id='demo'>JavaScript uses names to access object properties.</p>
<form method="post">
<p>
De waarde van de $bgcolor komt in eerste instantie uit de database.<br>
Die bepaalt dus ook de achtergrondkleur van de td.<br>
Bij een wijziging zou de achtergrondkleur dan de kleur van het nummer moeten krijgen zonder refresh.
De vraag is eigenlijk hoe krijg je nu id='demo' in de td zodat het ook blijft werken met de eerste bgcolor die uit de database komt.
</p>
<?php
// voor de test even de kleur gezet
$bgcolor = '#93050f';
?>
<table width="15%" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td height="40" width="2%" align="center" valign="middle" bgcolor="<?php echo $bgcolor; ?>">
<select class="ajax-select-save" data-target-id="3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
Toevoeging op 26/04/2019 14:23:23:
Voorgaande met de getColor etc werkt ook, en native Javascript is zeker sneller dan jQuery, maar qua leesbaarheid en structuur van je code geef ik nog even bovenstaande mee ter illustratie.