visualizzare un alert(bootstrap5) dopo un insert
salve a tutti spero che qualcuno possa aiutarmi
ho questo codice preso dagli esempi alert di un template bootstrap 5
il problema ... a parte io non sia un programmatore :tongue
è che in rete vedo solo spiegazioni/esempi/tutorial come attivare alert tramite un pulsante..
edit
sono dei toastr
vorrei attivare questi tipi di alert postati nel codice al posto del vecchio
Codice PHP:
echo "<script type='text/javascript'>alert('Nome squadra già presente! Cambia nome.'); history.go(-1)</script>";
dopo l avvenuto insert o check di un record
Codice HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE 3 | Modals & Alerts</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- SweetAlert2 -->
<link rel="stylesheet" href="plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
<!-- Toastr -->
<link rel="stylesheet" href="plugins/toastr/toastr.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body>
<div class="card card-warning card-outline">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-edit"></i>
aaaaaaaa
</h3>
</div>
<div class="card-body">
<button type="button" class="btn btn-success toastrDefaultSuccess">
Launch Success Toast
</button>
<button type="button" class="btn btn-info toastrDefaultInfo">
Launch Info Toast
</button>
<button type="button" class="btn btn-danger toastrDefaultError">
Launch Error Toast
</button>
<button type="button" class="btn btn-warning toastrDefaultWarning">
Launch Warning Toast
</button>
</div>
<!-- /.card -->
</div>
</div>
<?php ?>
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- SweetAlert2 -->
<script src="plugins/sweetalert2/sweetalert2.min.js"></script>
<!-- Toastr -->
<script src="plugins/toastr/toastr.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- Page specific script -->
<script>
$(function() {
var Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1000
});
$('.toastrDefaultSuccess').click(function() {
toastr.success('messaggio 1.')
});
$('.toastrDefaultInfo').click(function() {
toastr.info('messaggio 2.')
});
$('.toastrDefaultError').click(function() {
toastr.error('messaggio 3.')
});
$('.toastrDefaultWarning').click(function() {
toastr.warning('messaggi 4.')
});
});
</script>
</body>
</html>
ho creato un file per fare delle prove con un semplice form e un select ma gli alert non funzionano..
nel file postato sopra ho provato a sostituire click(function) con ready ma niente..
potete illuminarmi?
questo è il file di prova che ho creato
Codice PHP:
<?php
include('inc/config.php');?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AdminLTE 3 | Modals & Alerts</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- SweetAlert2 -->
<link rel="stylesheet" href="plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
<!-- Toastr -->
<link rel="stylesheet" href="plugins/toastr/toastr.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body>
<form action="" method="post">
<input type ="text" class="form-control" name="testo">
<button type="submit" class="btn btn-primary">invia</button>
</form>
<?php
$testo = $_POST['testo'];
echo $testo;
$a = "SELECT * FROM utenti WHERE nome = '$testo'";
$result = mysqli_query($conn , $a);
if(mysqli_num_rows($result) > 0){
echo "<script type='function/javascript'>toastrDefaultWarning</script>";
}else{
cosa bisogna inserire
}
?>
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- SweetAlert2 -->
<script src="plugins/sweetalert2/sweetalert2.min.js"></script>
<!-- Toastr -->
<script src="plugins/toastr/toastr.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- Page specific script -->
<script>
$(function() {
var Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1000
});
$('.toastrDefaultSuccess').ready(function() {
toastr.success('mess 1')
});
$('.toastrDefaultInfo').click(function() {
toastr.info('mess 2')
});
$('.toastrDefaultError').click(function() {
toastr.error('mess 3')
});
$('.toastrDefaultWarning').ready(function() {
toastr.warning('mess 4')
});
});
</script>
</body>
</html>
