toastr.js

Par cid5420, il y a 10 ans

Javascript

Bonjour,

sur un site j'aimerais afficher des notification grace a toastr. Je trouve les messages vraiment simpas.
Etant novice en js, je plante sur l'appel d'un message. Grâce au site de demo toastr, on peut choisir les messages et effets puis le code est généré.

Ce que je souhaiterais faire, suite à la validation d'un formulaire, je fais une redirection vers la page principal, et j'aimerais afficher le message.
Cependant, le message est aléatoire suivant l'action.

Comment appelé la fonction ? je n'ai pas de bouton pour faire un onClick !

26 réponses

cid5420, il y a 10 ans

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>'; } }
betaWeb, il y a 10 ans

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.

cid5420, il y a 10 ans

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 !

cid5420, il y a 10 ans

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

cid5420, il y a 10 ans

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 ?

betaWeb, il y a 10 ans

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 ?

cid5420, il y a 10 ans

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" ?

cid5420, il y a 10 ans

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) {
betaWeb, il y a 10 ans

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 ?

cid5420, il y a 10 ans

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

betaWeb, il y a 10 ans

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

cid5420, il y a 10 ans

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é ?

betaWeb, il y a 10 ans

Essaye ça :

function getToasts () { var toasts = document.querySelectorAll('.toast-message'); if (0 === toast.length) { return; } var type, title, message; [].forEach.call(toasts, function (toast) { 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) { setTimeout(function () { getToasts(); }, 200); // });
cid5420, il y a 10 ans

Bon bah j'ai trouvé, le prob venait du fait que je l'avais mit dans un fichier séparé.
Et j'ai supprimé

(function () {});
cid5420, il y a 10 ans

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

betaWeb, il y a 10 ans

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

cid5420, il y a 10 ans

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

betaWeb, il y a 10 ans

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'.

cid5420, il y a 10 ans

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

betaWeb, il y a 10 ans

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.

cid5420, il y a 10 ans

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

cid5420, il y a 10 ans

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

cid5420, il y a 10 ans

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

betaWeb, il y a 10 ans

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

cid5420, il y a 10 ans

Arffff enfin trouvé, il y avait 2 style différent pour l'élément, stylisé dans mon template et dans le plugin toastr.
En tout cas betaWeb merci à toi !