come attivare un toast in risposta ad un insert

**omgprova** · 20-03-2021, 18.17.51

salve a tutti spero che qualcuno possa aiutarmi
ho questo codice preso dagli esempi alert di un template bootstrap 5
il problema
è che in rete vedo solo spiegazioni/esempi/tutorial come attivare alert tramite un pulsante..

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

questo sono gli esempi di toast attivabili con un pulsante

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
if(isset($_POST['testo'])){
$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{ 
      come bisogna inserire il js
  }
}
?>

<!-- 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>

**GraphOGLRisorse** · 20-03-2021, 18.48.54

Salve,
in questa guida sono riportati degli esempi di alert con bootstrap 5: https://getbootstrap.com/docs/5.0/components/alerts/

Comunque non era necessario aprire un dupplicato della discussione: visualizzare un alert bootstrap5 dopo un insert

Cordiali saluti.

**omgprova** · 22-03-2021, 12.16.01

Originalmente inviato da GraphOGLRisorse

Salve,
in questa guida sono riportati degli esempi di alert con bootstrap 5: https://getbootstrap.com/docs/5.0/components/alerts/

Comunque non era necessario aprire un dupplicato della discussione: visualizzare un alert bootstrap5 dopo un insert

Cordiali saluti.

Deve esserci qualche incompatibilità in versione mobile avevo fattobmodifica e mi ha eliminato il messaggio in risposta ...
Lo riscrivo

Mi scuso per il doppio post
L ho spostato perché dopo una settimana nella sezione html non scriveva nessuno in nessun altro post...poi nel mio caso visto che si basava su js ho preferito spostarlo..
Tra l altro avevo lasciato anche un messa per gli admin ..
Grazie cancora

Discussione: come attivare un toast in risposta ad un insert

LinkBack

Strumenti discussione

Display

come attivare un toast in risposta ad un insert

Regole di scrittura