De aanroep werkt. Zo open ik de volgende Javascript functies:
// 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?
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?
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.
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.
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.
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.
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:
<?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&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>
<?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>
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:
$('#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.
- 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?
