toastr.js

Salut,

Comment ça "le message est aléatoire" ?
Si tu travailles avec PHP, il te faut stocker ton/tes messages dans ta session et, une fois la redirection faite, aller chercher d'une manière ou d'une autre ce que tu as stocké en session.
Essaye de t'inspirer de ce tuto et de l'adapter (ça ne devrait pas être très compliqué) : https://www.grafikart.fr/tutoriels/php/flash-message-286 et celui-ci https://www.grafikart.fr/tutoriels/jquery/notification-jquery-365

En fait le message ce n'est pas vraiment le problème, c'est surtout l'appel toastr.
voici le code que j'ai, ça ne fonctionne pas !

if(isset($_GET['s'])){
            if($_GET['s'] === 'add'){
                echo '<script>Command: toastr["success"]("L\'utilisateur à bien été enregistré !", "Élément enregistré");</script>';
            }elseif($_GET['s'] == 'delete'){
                echo '<script>Command: toastr["error"]("L\'utilisateur à été supprimé !", "Élément supprimé");</script>';
            }
        }

C'est quoi ce 'Command' Ôo
Il te faut stocker le message dans un element HTML caché et le récupérer dynamiquement en JS lorsque le DOM est chargé :

PHP :

if(isset($_GET['s'])){
            if ($_GET['s'] === 'add') {
                echo '<div class="toast-message" style="display:none" data-type="success" data-title="Élément enregistré" data-message="L\'utilisateur à bien été enregistré !"></div>';
            }elseif ($_GET['s'] == 'delete') {
                echo '<div class="toast-message" style="display:none" data-type="error" data-title="Élément supprimé" data-message="L\'utilisateur à été supprimé !"></div>';
            }
        }

JS:

(function () {
  function getToasts () {
    var toasts = document.querySelectorAll('.toast-message');

    if (0 === toast.length) {
        return;
    }

    var type, title, message;

    Array.prototype.forEach.call(toasts, function (toast, index) {
        type = toast.getAttribute('data-type') || 'success';
        title = toast.getAttribute('data-title') || null;
        message = toast.getAttribute('data-message') || null;

        if (null !== message) {
            toastr[type](message, title);

            toast.parentNode.removeChild(toast);
        }
    });

    toasts = null;
  };

  document.addEventListener("DOMContentLoaded", function(event) {
      getToasts();
  });
}();

Tu peux essayer comme ça.

Bon en fait le resultat généré par troastr est :

Command: toastr["success"]("L'utilisateur a bien été créé", "Élément enregistré !")

toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": true,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

il me semblait que le command était l'appel ! en fait je suis un peut perdu sur la partie js (formation en vue) !
En tout cas je vais essayer ce code !

j'ai essayé le code mais en faisant un copier collé, j'avais des erreurs de syntax du coup j'ai corrigé mais ça ne fonctionne pas !

(function () {
    function getToasts () {
        var toasts = document.querySelectorAll('.toast-message');

        if (0 === toasts.length) {
            return;
        }

        var type, title, message;

        Array.prototype.forEach.call(toasts, function (toast, index) {
            type = toast.getAttribute('data-type') || 'success';
            title = toast.getAttribute('data-title') || '';
            message = toast.getAttribute('data-message') || '';

            if (title.length > 0 && message.length > 0) {
                toastr[type](message, title);

                toast.parentNode.removeChild(toast);
            }
        });

        toasts = null;
    };

    document.addEventListener("DOMContentLoaded", function(event) {
        getToasts();
    });
});

c'est possible de m'expliquer un peut les parties du code pour que je comprennes mieux ?
De plus je ne voix pas trop la liaison avec toastr.js

En fait je viens de regarder la doc de toastr.js.
Je ne pense pas qu'il faut mettre du code html puisqu'il est généré en js.
Le prob c'est que je comprends pas comment appeler le message d'alert toastr !

[EDIT]
Si je copie/colle le code généré par toastr, le message s'affiche bien au chargement de ma page.
Du coup comment le faire si j'ai ma variable $_GET ?

Je t'ai donné une solution : stocker dans un élément HTML non visible ce dont tu as besoin, et aller le chercher lorsque ta page est chargée.
Attention : il faut charger le script que je t'ai fourni APRES avoir chargé le plugin toastr. Et dans l'idéal, place l'appel à tes différents scripts juste avant la fermeture de la balise <body>.

Pour ce qui est de toastr je ne vois pas ce qui te pose problème : il suffit d'utiliser la classe toastr et d'appeler la méthode correspondant au type de ton message (success, error ...).

Est-ce que tu as des erreurs dans la console de l'inspecteur ?

Non aucune erreur, les appels sont bien chargé avant

</body>

, j'ai mis le code dans un fichier functions.js que j'appel après toastr.

Tu dis qu'il faut charger la class toast, c'est pas plutôt "toastr" ?

A quoi correspond index dans la ligne :

Array.prototype.forEach.call(toasts, function(toast, index)

En fait index est grisé dans mon ide donc pas utilisé visiblement.
idem pour event a la ligne

document.addEventListener("DOMContentLoaded", function(event) {

Non index n'est pas utilisé.
Array.prototype.forEach.call(toasts, function(toast, index) {}); permet de boucler sur chaque élément HTML trouvé par le querySelectorAll().
document.addEventListener("DOMContentLoaded", function() {}); permet d'appeler la fonction getToasts() une fois que le DOM a bien été chargé.

Tu as pensé à charger le CSS de toastr ?

Oui le fichier css est chargé !
Est ce qu'il y a moyen de voir le comportement de la fonction getToasts() ? (genre var_dump)

tu peux faire des console.log() des variables qui t'intéressent au pire.

bon si je fais un

console.log(type);

dans la console je n'ai rien !
du coup est ce que la fonction getToasts() est bien appelé ?

Euh encore un tout petit prob, lorsque le message s'affiche, j'ai 2 images qui se superposent ?

Ah beh ça, ça vient sûrement de ton code, pas du mien.

euh bah en fait j'ai mit que ton code !
et dans le console.log(type); j'ai 2x le résultat dans la console

Si tu as deux éléments ayant la classe .toast-message, c'est normal. Commente la ligne toast.parentNode.removeChild(toast); && inspecte ton DOM HTML pour voir combien tu as d'éléments 'toastable'.

oui j'ai 2 éléments mais il y en a un où le type est success et l'autre error

<?php if(isset($_GET['s'])){
    if ($_GET['s'] === 'add') {
        echo '<div class="toast-message" style="display:none" data-type="success" data-title="Élément enregistré" data-message="L\'utilisateur à bien été enregistré !"></div>';
    }elseif ($_GET['s'] === 'delete') {
        echo '<div class="toast-message" style="display:none" data-type="error" data-title="Élément supprimé" data-message="L\'utilisateur à été supprimé !"></div>';
    }
}?>

J'ai que ces 2 éléments dans tout le projet !
Dans le DOM, je n'ai qu'un seul élément ! pourtant il y a tjrs 2 appels

Mais il doit normalement d'echo qu'un seul élément en fonction de ton paramètre en GET, et non les deux. Enfin je ne sais pas comment tu as prévu le truc.

Oui c'est exactement ça ! Dans l'inspecteur de code, il y a bien un seul élément à afficher !

Là j'ai fait

console.log(type, titre, message)

j'ai un retour

error Élément supprimé L'utilisateur à été supprimé !
error

donc il y a un élément où le type = error et le reste est vide !
Peut être qu'il faut que je tests si message, titre et titre ne sont pas vide

Bon en fait c'est moi qui suis vraiment très C**, j'ai oublié un autre console.log, donc on a bien un seul appel.
Le prob a mon avis c'est qu'il y a 2 fonts de chargé puisque les icone sont différentes

Là c'est à toi de gérer ;)