Vanuit Javascript INSERT, UPDATE of DELETE gebruiken naar database

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Frits van Leeuwen

Frits van Leeuwen

17/03/2020 00:14:50
Quote Anchor link
Hallo,

Ik heb een PHP bestand. Als ik die open, wordt ook de verbinding met de database gemaakt.
Zo heb ik
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$query_menu_beheer =
    "SELECT menu_id, menu_sub_van, menu_waarde, menu_tekst, menu_link
    FROM tabel_menu
    ORDER BY menu_sub_van, menu_waarde";

$result_menu_beheer = mysqli_query($connect, $query_menu_beheer);


En dat werkt.
Maar nu ga ik in dat bestand verder en gebruik ik ook Javascript.
In een HTML-FORM heb ik twee BUTTONs

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<button onclick="Verwijderen()" id="Button_Delete" type="Submit" value="Delete" class="button_delete" alt="verwijderen"></button>                                                                <button onclick="Opslaan()" id="Button_Save" type="submit" value="Submit" class="button_save" alt="opslaan"></button>



De aanroep werkt. Zo open ik de volgende Javascript functies:

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
// Er is op de verwijder-knop geklikt
function Verwijderen()
{
    alert('Verwijderen');
    // formulieren en knoppen aan of uit zetten
    $('#Button_Add').show(); // toevoegknop tonen
    $('#Add_Form').hide(); // toevoeg formulier verbergen
};    
function Opslaan()
{
    var j_connect = $connect;
    alert(j_connect);
    if ( $('#fidnr').val().length === 0 )
        {
        alert('nieuwe opslaan');
    }
    else
    {
        alert('bestaande opslaan: id = ' + $('#fidnr').val());
    }
    // formulieren en knoppen tonen of verbergen
    $('#Button_Add').show(); // toevoegknop tonen
    $('#Add_Form').hide(); // toevoeg formulier verbergen
};



En in deze aansturing van de knoppen wil ik een record verwijderen, muteren of toevoegen. De SQL code begrijp ik wel.
Kan ik $connect uit PHP over nemen? Of is dat misschien helemaal niet nodig.
Hoe kan ik naar mijn MYSQL database schrijven?

Alvast bedankt voor de assistentie.
Gewijzigd op 17/03/2020 00:22:40 door Frits van Leeuwen
 
PHP hulp

PHP hulp

26/05/2020 12:43:05
 
- Ariën -
Beheerder

- Ariën -

17/03/2020 00:30:19
Quote Anchor link
JavaScript heeft geen samenwerking met PHP, omdat PHP door de server verwerkt wordt, en Javascript pas op het einde, door de browser van de bezoeker.

De enige weg om JavaScript te laten praten met serverside scripts, is een AJAX-request die asynchroon plaatsvindt.

Lijn 11 zal dus nooit werken.

Zie ook: https://www.tutorialsteacher.com/jquery/jquery-ajax-method
Gewijzigd op 17/03/2020 00:34:38 door - Ariën -
 
Frits van Leeuwen

Frits van Leeuwen

17/03/2020 00:38:28
Quote Anchor link
Heel erg bedankt voor de reactie.
Dan zal ik me dus ook in AJAX moeten gaan verdiepen, want daar weet ik nog niets van. Kan ik vragen daarover hier ook kwijt?
 
- Ariën -
Beheerder

- Ariën -

17/03/2020 00:46:52
Quote Anchor link
Uiteraard!
 
Thomas van den Heuvel

Thomas van den Heuvel

17/03/2020 16:50:14
Quote Anchor link
Maar je hebt hier helemaal geen AJAX voor nodig?

Ik denk dat het voor dit vraagstuk interessant is om te weten hoe je deze lijst van menu-items presenteert.

Wat in een beheerkant vrij gebruikelijk is is dat je eerst een overzichtslijst toont, eventueel met een paginering ofzo. Op zo'n pagina staat meestal ook een "toevoegen" knop voor het toevoegen van een item. Elk item in de lijst heeft vaak ook een aantal acties die toegepast kunnen worden op het item. Dit zijn ofwel hyperlinks of wellicht buttons. Denk hierbij aan een "wijzig"-knop of -link, een voor het verwijderen, en wellicht een knop om een item omhoog of omlaag te verplaatsen door de lijst.

Al de bovenstaande hyperlinks en buttons verwijzen naar aparte code-segmenten, bijvoorbeeld door middel van een "action" variabele, bijvoorbeeld:
list.php?action=add voor het toevoegen van een item
list.php?action=edit&id=X voor het wijzigen van item X
list.php?action=delete&id=X voor het (na bevestiging) verwijderen van item X

De default actie van list.php is het tonen van bovengenoemde lijst. Na het uitvoeren van de gewenste actie keer je hier ook naar terug, mogelijk met een (tijdelijke) boodschap of de actie is geslaagd of niet.

Dit stelt je in staat om al deze acties apart te implementeren en te wijzigen. Dit helpt enorm bij het verkrijgen en behouden van overzicht in jouw code.

Mogelijk kun je dit later uitbreiden met AJAX zodat het er allemaal wat gelikter uitziet, maar hiervoor kun je vrijwel dezelfde codestructuur gebruiken. Het enige wat verandert is de manier waarop je bovengenoemde acties aanroept.

Als je wat "simpeler" (het bovenstaande is complex genoeg) wilt beginnen laat je AJAX in eerste instantie achterwege. Een aanpak met AJAX is ook wat lastiger te debuggen, dus als je daarmee vastloopt is het vaak een stuk ondoorzichtiger wat er precies misgaat tenzij je al enige ervaring hebt met hoe AJAX werkt. Als je deze ervaring nog niet hebt dan zou ik eerst met wat simpelere dingen beginnen dan direct aan de slag te gaan met een complete AJAX-aangestuurde backend.
 
Frits van Leeuwen

Frits van Leeuwen

17/03/2020 23:18:59
Quote Anchor link
Thomas ook bedankt voor je leerzame toevoeging.

Ik maak in PHP de regels die ik in HTML toon. Dit is combinatie met CSS.
Als je op een regel klikt, krijg je die regel boven aan in een HTML-formulier (FORM) dat ik dan toon.
Onder alle regels heb ik een toevoeg knop staan. Ook die opent het zelfde HTML-formulier. Alleen die is dan leeg.
In dat zelfde formulier heb ik 3 buttons. (Ik zie nu dat ik in mijn eerste melding hier niet compleet over was.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<button onclick="Annuleren()" id="Button_Cancel" type="Submit" value="Cancel" class="button_cancel" alt="annuleren"></button>
<button onclick="Verwijderen()" id="Button_Delete" type="Submit" value="Delete" class="button_delete" alt="verwijderen"></button>                                                                    <button onclick="Opslaan()" id="Button_Save" type="submit" value="Submit" class="button_save" alt="opslaan"></button>


De annuleer knop werkt perfect. Die zet alle regels in beeld en sluit het formulier voor wijzigen en toevoegen.
Bij toevoegen heb ik geen ID bij muteren wel.
De knop om te verwijderen heb ik alleen als ik op een regel klik. Dus in de muteer stand.

Ik vind het niet mooi als ik in de URL iets van de actie zie.
 
- Ariën -
Beheerder

- Ariën -

17/03/2020 23:51:35
Quote Anchor link
In dat geval is AJAX 'way to go'. Je kan dan ook op de plek blijven waar je browser je pagina neer-gescrolled heeft. Het oogt ook gebruiksvriendelijker, en vooral als je meerdere acties achter elkaar wilt uitvoeren (achterelkaar iets bevestigen) is het ideaal.
 
Frits van Leeuwen

Frits van Leeuwen

30/03/2020 23:12:47
Quote Anchor link
Het is me gelukt.
Maar ik heb nog ergens een fout.
Als ik in het mutatieformulier op verwijderknop druk, toont hij de tabel regel met de ja/nee-vraag heel even snel, maar knalt direct naar het beginscherm. Dus dat het mutatie scherm weer dicht is. En dat terwijl ik had verwacht dat hij een tabel-regel in beeld zou zouden.
De tabel-regel die hij zou moeten tonen is een ja/nee-vraag. Bij ja moet hij het gevraagde record verwijderen. Bij nee moet hij terug in het mutatieformulier komen.

hier mijn code:
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<?php
//beheer_menu.php
error_reporting(E_ALL);
ini_set('display_startup_errors', true);
ini_set('display_errors', 'stdout');

include("init.php");
include("databaseopenen.php"); // openen van de database

$Huidige_bestandsnaam = "beheer_menu.php";
include("menuchecker.php"); // Check de filenaam in de tabel van het menu

$link_menu_beheer = "";
/*
//Het kan niet zijn dat er geen menu is. Want dan kan deze keuze niet gemaakt worden.
*/


?>

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
    <head>
        <!-- Created by Artisteer v4.3.0.60745 -->
        <meta charset="utf-8">
        <title>Geldboom: Menu beheer</title>
        <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

        <!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <link rel="stylesheet" href="style.css" media="screen">
        <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
        <link rel="stylesheet" href="style.responsive.css" media="all">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans&amp;subset=latin">
        <link rel="stylesheet" href="extra.css" media="all">
        <link rel="stylesheet" type="text/css" href="lijsten.css">         
        
        <script type="text/javascript" src="jquery.js" ></script>
        <script type="text/javascript" src="jquery-3.4.1.min.js" ></script>
        <script src="script.js"></script>
        <script src="script.responsive.js"></script>

        <script type="text/javascript">
            
            // pagina is open
            $( document ).ready(function()
            {
                $('#Add_Form').hide();
            });
            
            // Er is een regel aangeklikt
            function SelecteerRegel( x, j_idnr, j_waarde, j_subvan, j_tekst, j_link )
            {
                // formulieren en knoppen tonen of verbergen
                $(x).siblings().show(); // alle regels tonen
                $(x).hide(); // geselecteerde regel verbergen
                $('#Button_Add').hide(); // toevoegknop verbergen
                $('#Add_Form').show(); // toevoeg formulier tonen
                $('#Button_Delete_Verzoek').show(); // verwijderknop tonen
                // velden moeten gevuld worden
                $('#fidnr').val(j_idnr);
                $('#fwaarde').val(j_waarde);
                $('#fsubvan').val(j_subvan);
                $('#ftekst').val(j_tekst);
                $('#flink').val(j_link);    
            };
            
            // Er is op de toevoeg-knop geklikt
            function Toevoegen()
            {
                // formulieren en knoppen tonen of verbergen
                $('#Add_Form').show(); // toevoeg formulier tonen
                $('#Button_Delete_Verzoek').hide(); // verwijderknop verbergen
                $('#Button_Add').hide(); // toevoegknop verbergen
                
            };        
        </script>

    </head>
    <body>
        <div id="art-main">
            <?php
                if (file_exists($filename)) {
                    include ("menu.php");
                }

            ?>

            <div class="art-sheet clearfix">
                <div class="art-layout-wrapper">
                    <div class="art-content-layout">
                        <div class="art-content-layout-row">
                            <?php include ("blok_links.php"); ?>
                    
                            <!-- Content blok -->
                            <Table>
                            <tr><td>
                                <div class="art-layout-cell art-content">
                                    <article class="art-post art-article">
                                        <div class="art-postcontent art-postcontent-0 clearfix">
                                            <H1 align="center">Menu beheer</H1>    
                                            <table>
                                            
                                                <tr id = "Add_Form">
                                                    <td>    
                                                        <?php include ("menu_tabel_toevoegen_muteren.php");?>        
                                                    </td>
                                                </tr>
                                                
                                                <tr id = "show_lines"><td>
                                                    
                                                    <table id = "Tabel" class = "hovertabel">                                            
                                                        <thead>
                                                            <tr>
                                                                <th>Waarde</th><th>Sub van</th><th>Menulabel</th><th>Link naar pagina</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="datalijst"> <!-- Hier volgt de lijst -->
                                                            <?php include ("menu_tabel_tonen.php"); ?>
                                                        </tbody>
                                                        <tfoot>
                                                            <tr>
                                                                <th colspan="4">
                                                                    <button onclick="Toevoegen()" id="Button_Add" type="Submit" value="New" class="button_add" alt="Nieuwe toevoegen"></button>
                                                                </th>
                                                            </tr>
                                                        </tfoot>
                                                    </table>

                                                </td></tr>
                                                
                                            </table>
                                        </div>
                                    </article>
                                </div>
                            </td></tr>
                            </table>
                            <!-- einde Content blok -->
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <?php include("footer.php"); ?>

    </body>
</html>


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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<?php
//menu_tabel_toevoegen_muteren.php
if(isset($_POST['knoppen']))
{

    switch ($_POST['knoppen'])
    {
        case
'Submit': // Opslaan van het record
            $i_waarde = $_POST['fwaarde'];
            $i_subvan = $_POST['fsubvan'];
            $i_tekst = $_POST['ftekst'];
            $i_link = $_POST['flink'];
            if (strlen($_POST['fidnr'])>>0)
            {

                $i_idnr = $_POST['fidnr'];
                $query_insert_update_menu = "UPDATE tabel_menu SET menu_waarde='" . $i_waarde . "', menu_sub_van='" . $i_subvan . "', menu_tekst='" . $i_tekst . "', menu_link='" . $i_link . "' WHERE menu_id = ". $i_idnr;
            }

            else
            {
                $query_insert_update_menu = "INSERT INTO `tabel_menu` (`menu_id`, `menu_waarde`, `menu_sub_van`, `menu_tekst`, `menu_link`) VALUES (NULL, '$i_waarde', '$i_subvan', '$i_tekst', '$i_link')";
            }

            if ($connect->query($query_insert_update_menu) === TRUE)
            {

                echo "Record opgeslagen";
            }

            else
            {
                echo "Bij het opslaan gaat er iets mis.";
            }

            $query_insert_update_menu = "";
            break;
        case
'Delete': // Verwijderen van het record
            $i_idnr = $_POST['fidnr'];
            $query_delete_menu = "DELETE FROM tabel_menu WHERE menu_id = $i_idnr";
            if ($connect->query($query_delete_menu) === TRUE)
            {

                echo "Record verwijderd";
            }

            else
            {
                echo "Bij het verwijderen gaat er iets mis.";
            }

            $query_delete_menu = "";
            break;
        case
'Delete_Request': // Verwijderen van het record
            
            break;
        default:
// Situatie terug brengen in oude staat.
            break;
    }  
}

?>


<Form id = "Add_Row" class="hoverinput" method='post'>
    <table id = "FormTabel" >
        <TR>
            <th >
                Waarde:
            </th >
            <th >
                Sub van:
            </th>
        </tr>
        <tr>
            <td >
                <input type="text" id = "fwaarde" name="fwaarde" autofocus size="5">
            </td >
            <td >
                <input type="text" id = "fsubvan" name="fsubvan" size="5">
                <span style = "visibility:hidden;"><input type="text" id = "fidnr" name="fidnr"></span>
                <br>
            </td>
        </tr>
        <tr>
            <th colspan="2" >
                <label for = "Ftekst">Menulabel:</label><BR>
            </th>
        </tr>
        <tr>
            <td colspan="2" >
                <input type="text" id = "ftekst" name="ftekst" size="50">
            </td>
        </tr>
        <tr>
            <th colspan="2"  >
                <label for = "Flink">Link naar pagina:</label>
            </th>
        </tr>
        <tr>
            <td colspan="2" >
                <input type="text" id = "flink" name="flink" size="50">
            </td>
        </tr>
        <tr id = "Knoppen_Add_Form">
            <td colspan="2" align="center">
                <button onclick="Annuleren()" id="Button_Cancel" type="Submit" name="knoppen" value="Cancel" class="button_cancel" alt="annuleren"></button>
                <button onclick="Verwijderen_Nee_Ja()" id="Button_Delete_Verzoek" type="Submit" name="knoppen" value="Delete_Request" class="button_delete" alt="verwijderen" ></button>    
                <button onclick="Opslaan()" id="Button_Save" type="submit" name="knoppen" value="Submit" class="button_save" alt="opslaan"></button>
            </td>
        </tr>
            
        <tr id = "Delete_Yes_No">
            <td colspan="2" align="center">
                <H2>Weet u zeker dat u deze gegevens wilt verwijderen?</h2><BR>
                <button onclick="Verwijderen_Nee()" id="Button_Cancel_No" type="reset" name="knoppen" value="Cancel_No" alt="Niet verwijderen">Nee</button>
                <button onclick="Verwijderen_Ja()" id="Button_Delete" type="Submit" name="knoppen" value="Delete" alt="Wel verwijderen" >Ja</button>    
            </td>
        </tr>
    </table>
</Form>

<script type="text/javascript">    
    $( document ).ready(function()
        {
            $('#Delete_Yes_No').hide(); // verwijdervraag verbergen
            $('#Knoppen_Add_Form').show(); // knoppen tonen
            if ( $("#fidnr").val().length === 0 ) // nieuw record
            {    
                $('#Button_Delete_Verzoek').hide(); // verwijderknop verbergen
            }
            else // bestaand record mag ook verwijderd worden
            {
                $('#Button_Delete_Verzoek').show(); // verwijderknop tonen
            }
        }
    );

    // als de verwijder knop gedrukt wordt, moet er een vraag volgen
    function Verwijderen_Nee_Ja()
    {
        $('#Delete_Yes_No').show(); // verwijdervraag tonen
        $('#knoppen_Add_Form').hide(); // knoppen verbergen
    }
    
    function Verwijderen_Nee()
    {
        $('#knoppen_Add_Form').show(); // knoppen tonen
        $('#Delete_Yes_No').hide(); // verwijdervraag verbergen
    }
    // Er is op de verwijder-knop geklikt
    function Verwijderen_Ja()
    {
        // formulieren en knoppen aan of uit zetten
        $('#knoppen_Add_Form').show(); // knoppen tonen
        $('#Delete_Yes_No').hide(); // verwijdervraag verbergen
        $('#Button_Add').show(); // toevoegknop tonen
        $('#Add_Form').hide(); // toevoeg formulier verbergen
    };        
    
    // Er is op de annuleer-knop geklikt
    function Annuleren()
    {
        // formulieren en knoppen tonen of verbergen
        $('#Button_Add').show(); // toevoegknop tonen
        $('#Add_Form').hide(); // toevoeg formulier verbergen
    };    
        
    function Opslaan()
    {
        // onderstaande waarden van i_.... werken. Dit heb ik gecheckt
        var i_waarde = $("#fwaarde").val();
        var i_subvan = $("#fsubvan").val();
        var i_tekst = $("#ftekst").val();
        var i_link = $("#flink").val();
                
        if ( $("#fidnr").val().length === 0 ) // nieuw record
        {
            var form_data = {
                                menu_waarde: i_waarde,
                                menu_subvan: i_subvan,
                                menu_tekst: i_tekst,
                                menu_link: i_link
                            }
        }
        else
        {
            var menu_idnr = $("#fwaarde").val();
            var form_data = {
                                menu_id: i_idnr,
                                menu_waarde: i_waarde,
                                menu_subvan: i_subvan,
                                menu_tekst: i_tekst,
                                menu_link: i_link
                            }            
        }
        $.ajax
        ({
            url:'menu_tabel_toevoegen_muteren.php',
            method:'POST',
            data: form_data,
            success: function()
            {
            }
        });
        
        // formulieren en knoppen tonen of verbergen
        $('#Button_Add').show(); // toevoegknop tonen
        $('#Add_Form').hide(); // toevoeg formulier verbergen
    };                    
</script>
Gewijzigd op 30/03/2020 23:53:09 door Frits van Leeuwen
 
- Ariën -
Beheerder

- Ariën -

30/03/2020 23:58:06
Quote Anchor link
Kan je het niet bij relevante code houden?
Ik vind rond de 300 regels een beetje te gortig.
 
Thomas van den Heuvel

Thomas van den Heuvel

31/03/2020 00:06:43
Quote Anchor link
Goede kans dat alle knoppen nu de pagina verversen, mogelijk heb je dit niet altijd in de gaten?

Alle knoppen van de form zijn immers van het type "submit". Het default gedrag is dat vervolgens het formulier gePOST wordt, maar dat is dus nooit de bedoeling omdat je hebt besloten om alles via AJAX af te handelen. Een goed begin zou dus zijn om hier buttons van simpelweg het type="button" van te maken.

Maar je zou ook onclicks kunnen toevoegen die een return-waarde verwachten. Als je zorgt dat de return waarde false is dan zal de submit nooit plaatsvinden.

Weer een andere manier, en wellicht beter, is dat je gewoon je click-events definieert in JavaScript/jQuery. Dan hoef je je HTML ook niet te doorspekken met JavaScript maar houd je dat lekker gescheiden allemaal. Met jQuery kun je het default gedrag van events afvangen met de preventDefault() methode. Ingeval van een submitbutton houdt dat in dat dan het formulier niet gesubmit wordt.

Of je vangt het gewoon op het formulier niveau af, als een soort van catch-all, wellicht is dat nog het simpelste.

Niet getest, maar dit zou ook moeten werken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$('#Add_Row').submit(function(e) {
    // never submit form, we use AJAX calls for this
    e.preventDefault();
    alert('preventing form submission!'); // bij wijze van test om te zien of dit altijd wordt tegengehouden
});


Trouwens, mogelijk een tip. Scheid ofwel variabelen met underscores: add_form, of gebruik Hoofdletters: AddForm, maar niet beide, dat leest nou niet bepaald prettig.
 
Frits van Leeuwen

Frits van Leeuwen

31/03/2020 19:18:59
Quote Anchor link
- Ariën - Sorry, ik had niet het goed door hoe ik er een mooie samenvatting van kon maken.

Thomas van den Heuvel, hartelijk dank voor het uitgebreide antwoord. Ik was vergeten dat ik bij "submit" ook "button" kon invullen. Ik was er wel naar op zoek gegaan, maar vond alleen "reset", maar die wilde ik niet gebruiken. Ik had immers wel een vermoede dat het daar zou kunnen zitten.
Ook bedankt voor de alternatieven en de tip aan het eind. Bedankt.

Ik laat weten welke oplossing ik uiteindelijk heb gekozen.

Ik heb ook nog een andere vraag die hierbij past. Als ik de pagina start, zie ik even alles, dus ook het invulformulier. Hoe kan ik die ook bij het starten verbergen?
 
Thomas van den Heuvel

Thomas van den Heuvel

31/03/2020 20:16:31
Quote Anchor link
Je zou alles standaard kunnen verbergen met CSS.

Dat zou wel inhouden dat het weinig doet zonder JavaScript. Aan de andere kant, bij deze opzet is het gebruik van JavaScript onvermijdelijk, dus wat dat betreft maakt het niet zoveel uit.
 
Frits van Leeuwen

Frits van Leeuwen

31/03/2020 23:14:38
Quote Anchor link
Wat gaaf. Het werkt allemaal.

BEDANKT

Ik heb inderdaad de "Submit" in "Button" veranderd.
En bij "id = Add_Form" ook een class aangeroepen die in de CSS de regel verbergt.

Helemaal top. Bedankt weer voor deze service, uitleg en tips.
 
Frits van Leeuwen

Frits van Leeuwen

04/04/2020 17:18:22
Quote Anchor link
Deze situatie wil ik nu gaan kopiëren naar andere tabellen, maar vraag me nu af of ik wel alle velden moet meenemen.
Ik heb nu deze code staan

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
            // Er is een regel aangeklikt
            function SelecteerRegel( x, j_idnr, j_waarde, j_subvan, j_tekst, j_link )
            {
                // formulieren en knoppen tonen of verbergen
                $(x).siblings().show(); // alle regels tonen
                $(x).hide(); // geselecteerde regel verbergen
                $('#Button_Add').hide(); // toevoegknop verbergen
                $('#Add_Form').show(); // toevoeg formulier tonen
                $('#Button_Delete_Verzoek').show(); // verwijderknop tonen

                // velden moeten gevuld worden
                $('#fidnr').val(j_idnr);
                $('#fwaarde').val(j_waarde);
                $('#fsubvan').val(j_subvan);
                $('#ftekst').val(j_tekst);
                $('#flink').val(j_link);    
            };


Ik roep die aan vanuit de ondersstaande code.

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
<?php
//menu_tabel_tonen.php
$query_menu_beheer =
    "SELECT menu_id, menu_sub_van, menu_waarde, menu_tekst, menu_link
    FROM tabel_menu
    ORDER BY menu_sub_van, menu_waarde"
;

$result_menu_beheer = mysqli_query($connect, $query_menu_beheer);

// *** regels vullen ***
$i = 0;
foreach($result_menu_beheer as $record_menu_beheer)
{

    $i = $i + 1;
    // *** regel maken ***
    
    echo
        "<tr id='regel' class='clickregel' onclick='SelecteerRegel( this, " . $record_menu_beheer['menu_id'] . ", "
        . $record_menu_beheer['menu_waarde'] . ", "
        . $record_menu_beheer['menu_sub_van'] .", \""
        . $record_menu_beheer['menu_tekst'] . "\", \""
        . $record_menu_beheer['menu_link'] . "\" )'>
        <td align = right>"
. $record_menu_beheer['menu_waarde'] . "</td>
        <td align = right>"
. $record_menu_beheer['menu_sub_van'] . "</td>
        <td align = left>"
. $record_menu_beheer['menu_tekst'] . "</td>
        <td align = left>"
. $record_menu_beheer['menu_link'] . "</td>
        </tr>"
;
    // *** einde regel maken ***

}
// *** einde regels vullen ***
?>


Maar eigenlijk zou ik het mooi vinden als ik alleen de id mee neem, en dan met een select query het formulier open waar die alvast ingevuld is.
Ik wil daar het zelfde formulier voor gebruiken als het toevoegen, maar bij het toevoegen is het formulier leeg.
 
Nick Vledder

Nick Vledder

04/04/2020 18:01:34
Quote Anchor link
Persoonlijke smaak: veel te veel "mixing concerns". Ogenschijnlijk heeft dit niets met het beantwoorden van jouw oorspronkelijke vraag te maken, maar daar kom je als je op de ingeslagen weg verder gaat nog wel achter. Namelijk op het moment dat je onderhoud pleegt aan je code en bepaalde zaken "overal" moet wijzigen in plaats van op één plek. Hier heeft Ariën ook al op gezinspeeld.

Terugkerend naar beantwoording oorspronkelijke vraag. Je wilt JS gebruiken voor database-mutaties. Een legitiem argument hiervoor zou kunnen zijn page-(re)loads beperken (SPA?). Een mooie oplossing, zoals reeds aangereikt, AJAX.
 
Frits van Leeuwen

Frits van Leeuwen

04/04/2020 22:50:35
Quote Anchor link
Nick Vledder, bedankt voor je antwoord. Iedere tip is welkom.
Bedoel je met "mixing concerns" dat ik veel soorten code door elkaar gooi? Ik doe al mijn best om het gescheiden te houden.
PHP boven aan en Javascript in de HEAD van HTML en dan de rest van HTML. Maar ik zie ook veel voorbeelden dat Javascript onderaan staat. Ik begin langzaam meer te begrijpen van Jquery en nu probeer ik ook ajax te doorgronden. Maar ik kan niet zeggen dat ik het op dit moment makkelijk vind. Vandaar ook dat ik het een en ander uiteen zet. In de hoop dat iemand weer een goude tip voor me heeft, waardoor ik het weer beter ga begrijpen.
 
Nick Vledder

Nick Vledder

06/04/2020 20:26:21
Quote Anchor link
@Frits
Gouden tip: begin 'ns met routing via index.php en je scripts te ordenen. Je kan afkijken bij PHP microframeworks of vanuit een paradigm (bijvoorbeeld MVC) je scripts onderbrengen in verschillende folders en zelf iets uitwerken.

Persoonlijk vind ik het prettig models, controllers, views, classes en templates in aparte folders onder te brengen. Tevens heb ik een folder met assets, waarin onder andere js, css en image-bestanden zijn ondergebracht (in dito folders).

Gebruik je bijvoorbeeld zelf al een template-engine?
 



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.