i solved it by doing this.
if (isset($_POST['kopen'])) {
// hier check ik eerst als de sessie gezet is, als het zo is dan de gebruiker zou wel kunnen kopen
if ($_SESSION) {
$id = $_POST['menu'];
$Userid = $_SESSION['user_id'];
$Username = $_SESSION['username'];
$db_conn->query("INSERT INTO `menulijst`(`user_id`, `menu_id`, `username`) VALUES ('$Userid', '$id', '$Username')"); ?>
<div class="alert2">
<span class="closebtn2" onclick="this.parentElement.style.display='none';">×</span>
<strong>Succes!</strong> Toegevoegd aan winkelmand.
</div>
<?php
} else { ?>
<!-- maar als de sessie niet gezet is dan de klant zou een melding ktijgen
en er zou verteld worden dat ie eerst ingelogd moet zijn om iets te kunnen kopen. -->
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>Danger!</strong> Om een prodcut te kunnen kopen moet je eerst ingelogd zijn.
<a style="color: black" href="login/pdo_login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a>
</div>
<?php }
} ?>```
And putting it in the body
My problem is that whenever my confirm() appears, the alert box appears without problem but then the background goes all blank, I tried a lot of different things, like putting the whole if statement at the bottom of the page, at the bottom of the body. But nothing has worked so far. Here is my code. I use a combination of php and JS. Btw this is a school project.
Here is a screen shoot of how it looks:
<?php
// hier start ik de sessie
session_start();
// met deze maak ik db conectie
include_once("database_conn.php");
if (isset($_POST['kopen'])) {
// hier check ik eerst als de sessie gezet is, als het zo is dan de gebruiker zou wel kunnen kopen
if ($_SESSION) {
$id = $_POST['menu'];
$Userid = $_SESSION['user_id'];
$Username = $_SESSION['username'];
$db_conn->query("INSERT INTO `menulijst`(`user_id`, `menu_id`, `username`) VALUES ('$Userid', '$id', '$Username')")
or die($db_conn->error);
} else { ?>
<!-- maar als de sessie niet gezet is dan de klant zou een melding ktijgen
en er zou verteld worden dat ie eerst ingelogd moet zijn om iets te kunnen kopen. Daarvoor heb ik JS voor gebruikt -->
<script type="text/javascript">
var txt;
if (confirm("Je moet eerst ingelogd zijn om iets te kunnen kopen! Druk op Ok om naar de inlog pagina te gaan!")) {
txt = location.replace("login/pdo_login.php");
} else {
txt = "";
}
</script>
<?php }
} ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Excellent Taste Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Excellent Taste</a>
</div>
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="tafels.php">Tafels</a></li>
<li class="active"><a href="menu.php">Menu</a></li>
<li class="display-1"><a href="contact.php">Contact</a></li>
<?php
// hier doe ik twee checks eentje is of de sessie gezet is
// als sessie een admin is, hij krijgt toegaan tot de admin panel
if ($_SESSION) {
if ($_SESSION['user_type'] == 'admin') { ?>
<li><a href="admin/index.php">Admin Panel</a></li>
<?php }
} ?>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<?php
// hier check ik als de sessie gezet is, en als het gezet is dan krijg de buttons Winkelmand en log uit te zien
if (isset($_SESSION['username'])) {
?>
<li><a href="basket/"><span class="iconify" data-icon="fa-shopping-basket" data-inline="false"></span> Winkelmand</a></li>
<li><a href="login/logout.php"><span class="glyphicon glyphicon-log-out"></span> Log uit</a></li>
<?php
} else {
// anders krijg je log in button of registreren
?>
<li><a href="login/pdo_login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="login/registreren.php"><span class="glyphicon glyphicon-user"></span> Registreren</a></li>
<?php
}
?>
</ul>
</div>
</nav>
<div class="container">
<h2 class="align-content-center">Menu</h2>
<!-- Hier maak ik gebruik van JQuery zodat de klant door de verschillende type gerechten en / of dranken kan sorteren -->
<!-- Als de gebruiker de select bar heeft gebruikt de informatie wordt versturd naar de pagina fetch.php -->
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#fetchval").on('change', function() {
var keyword = $(this).val();
$.ajax({
url: 'fetch.php',
type: 'POST',
data: 'request=' + keyword,
beforeSend: function() {
$("#table-container").fadeOut(10);
},
success: function(data) {
$("#table-container").html(data).fadeIn(3000);
},
});
});
});
</script>
<div style="display: inline-block">Sorteren op type gerecht en/of drank :</div>
<!-- Deze is de select bar alles wat hier gekozen is gaat naar de functie van boven en wordt naar andere pagina verstuurd -->
<select id="fetchval" name="fetchby" style="display: inline-block">
<option value="">---Kies---</option>
<option value="1">Koude eten</option>
<option value="2">Warme eten</option>
<option value="3">Drank</option>
</select>
<button onclick='window.location.reload();'>Hele menu</button>
<br>
<div id="table-container">
<table class="table">
<thead>
<tr>
<th></th>
<th width="200">Gerecht Naam</th>
<th>Parijs</th>
<th>Omschrijving</th>
<th></th>
</tr>
</thead>
<?php
// hier maak ik gebruik van sql statment om alles te selecteren van het tabel `menu`
$sql = "SELECT * FROM `menu`";
$statement = $db_conn->prepare($sql);
$statement->execute();
$menu = $statement->fetchAll(PDO::FETCH_ASSOC);
// bij deze loop ik er om heen om alles op de scherm te tonen
foreach ($menu as $row) : ?>
<tr>
<td>
<img src="eten/<?php echo $row['gerecht_afbeelding']; ?>" class="card-img-top" style="width: 100px;">
</td>
<td>
<?php echo $row['gerecht_naam']; ?>
</td>
<td>
€<?php echo $row['gerecht_prijs']; ?>
</td>
<td style="word-break: break-all;">
<?php echo $row['gerecht_omschrijving']; ?>
</td>
<td>
<div style="display:flex">
<?php
// er wordt een check gedaan voor de sessie en als de sessie admin of mdw is dan krijgt ie de volgende buttons te zien (Edit en Verwijderen)
if ($_SESSION) {
if ($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'mdw') { ?>
<a href="CRUDmenu/edit.php?id=<?= $row['menu_id'] ?>" class="buttonSpace btn btn-info">Edit
</a>
<a href="CRUDmenu/proces.php?verwijder=<?php echo $row['menu_id']; ?>" class="buttonSpace btn btn-danger">Verwijderen
</a>
<?php }
} ?>
<!-- Met deze button kunnen de klanten de product kopen -->
<form method="post">
<input type="hidden" name="menu" value='<?php echo $row["menu_id"] ?>'>
<input type="submit" class="glyphicon glyphicon-shopping-cart button button4" name="kopen" value="Kopen">
</form>
</div>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
<?php
// er wordt een check gedaan voor de sessie en als de sessie admin of mdw is dan krijgt ie de volgende button te zien (Toevoege)
if ($_SESSION) {
if ($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'mdw') { ?>
<a type=" button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="margin-bottom: 20px">
Voeg een nieuwe gerecht toe
</a>
<?php }
} ?>
</div>
<!-- Deze is een modal (van bootstrap), daarin zijn alle input fields -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Toevoegen</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div>
<!-- Deze form is verbonden an de bestand proces.php zodat de informatie dat je hier vult direct naar de database gaat -->
<form action="CRUDmenu/proces.php" method="post" class="col-xs-3">
<label>Gerecht Naam</label>
<input type="text" name="gerecht_naam" class="form-control" required />
<br />
<label>Gerecht Prijs</label>
<input type="number" name="gerecht_prijs" class="form-control" required />
<br />
<label>Omschrijving</label>
<input type="text" name="omschrijving" class="form-control" required />
<br />
<label>Type eten</label>
<select name="type_eten" required>
<option>-Selecteer-</option>
<option value="1">Koude eten</option>
<option value="2">Warme eten</option>
<option value="3">Drank</option>
</select>
<br />
<label>Afbeelding</label>
<input type="file" name="afbeelding" class="form-control" required />
<br />
<input type="submit" name="toevoegen" class="btn btn-info" value="Save" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
These native browser dialogs are “blocking” – the browser stops further processing of the document at the point where you call them, until the user has dealt with them. If you don’t want this effect – then you need to place these calls further down in the document you send back to the client,
Thx for the reply, i already placed it in de html but the backround still blank.
I tryed putting it in the head, body, even after the body but still happening the same.
