waarde listmenu in database vervangen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: « vorige 1 2 3

Adoptive Solution

Adoptive Solution

25/04/2019 17:02:26
Quote Anchor link
Als in regel 12-13 'resp' het #hexnummer of de naam van de kleur bevat, dan in regel 29 dit gebruiken :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
document.getElementById("demo").style.backgroundColor = score;
 
PHP hulp

PHP hulp

29/03/2024 13:02:34
 
Thomas van den Heuvel

Thomas van den Heuvel

25/04/2019 17:05:44
Quote Anchor link
insertdetailed.php dient de score terug te geven want de success-callback functie maakt hier gebruik van.
 
Sietsko Bos

Sietsko Bos

25/04/2019 18:31:35
Quote Anchor link
En wat moet ik dan nog in de insertdetailed.php erbij zetten?

Trouwens (document.getElementById("demo").style.backgroundColor = score;) hoe zet ik die waarde dan in de td?
Ik begrijp het even niet.
 
Adoptive Solution

Adoptive Solution

25/04/2019 18:57:38
Quote Anchor link
Je geeft elke <td> een id van 1-3

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
success:function(resp) {
    getColor ( id, resp);
}


Vervang regel 28-30 door dit :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
function getColor (id, 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
 
Sietsko Bos

Sietsko Bos

25/04/2019 19:42:09
Quote Anchor link
Ik heb de wijzigingen aangebracht en in de insertdetailed.php heb ik echo $_POST['resp']; toegevoegd.
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
 
Thomas van den Heuvel

Thomas van den Heuvel

25/04/2019 21:41:10
Quote Anchor link
Als je een AJAX-call doet via JavaScript (dus dat $.post() gedoe) is dat een verzoek terug aan de webserver. Dit levert ook een resultaat (response, output) op die opgevangen wordt als je AJAX-call compleet is. Het resultaat daarvan is beschikbaar via de success-functie binnen de AJAX-call. Dit is een zgn. callback-functie, wanneer het verzoek is verwerkt wordt een seintje teruggegeven.

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
 
Sietsko Bos

Sietsko Bos

25/04/2019 21:46:54
Quote Anchor link
Oke dat begrijp ik maar moet ik dan niet de
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
bgcolor="<?php echo $bgcolor; ?>
in de td vervangen door $_POST['resp']; indien die gezet is?
Gewijzigd op 25/04/2019 21:47:43 door Sietsko Bos
 
Thomas van den Heuvel

Thomas van den Heuvel

25/04/2019 22:15:14
Quote Anchor link
Ja, maar je kunt niet on-the-fly aan de client zijde PHP uitvoeren he :), dit doe je door terug te communiceren via JavaScript, via de hierboven beschreven wijze. Met die "...backgroundColor = ..." riedel zou je dat dus moeten doen, of je gebruikt een class waarin die bgcolors zijn opgenomen.

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
 
Sietsko Bos

Sietsko Bos

26/04/2019 08:39:27
Quote Anchor link
Ik begrijp wel ongeveer hoe het in zijn werk gaat. Alleen hoe die resp aan de kleur komt is mij vaag omdat er van de tabelcolor array verder geen gebruik meer wordt gemaakt. Dus hoe kan die dan de juiste kleur aanmaken. Ik denk dat dit voor mij te ver gaat qwa programmeren.
 
Adoptive Solution

Adoptive Solution

26/04/2019 09:22:53
Quote Anchor link
Het gaat te ver?

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
 
Sietsko Bos

Sietsko Bos

26/04/2019 10:26:24
Quote Anchor link
Dat was het inderdaad die had ik verwijderd en daarom werkte het dus niet.
Het werkt nu helemaal goed.

Iedereen die geholpen heeft natuurlijk heel veel dank want ik was hier niet uitgekomen... Top!
 
Jelle Dnw

Jelle Dnw

26/04/2019 14:08:00
Quote Anchor link
Even de mooie versie:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>


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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>


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.
 

Pagina: « vorige 1 2 3



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.