/ Accueil / English
CakePHP

CakePHP, ajouter l’affichage d’un message Flash

Voici la suite du tutoriel Comment soumettre un formulaire en Ajax et retourner les erreurs de validations

On va maintenant afficher un message flash si l’ajout d’utilisateur a bien réussi

Dans le template Users/index.ctp, on ajoute tout en haut le code pour afficher les messages de succès ou d’erreur.

<div class="message error" style="display: none;"></div>
<div class="message success" style="display: none;"></div>

Dans le javascript, on va créer une petite fonction qui va afficher les messages et les cacher au bout de quelques secondes
Dans webroot/js/script_users.js

function message(what, mess){
 $(what + ".message").text(mess);
 $(what).fadeIn(500);
 setTimeout(function() {
 $(what).fadeOut(500);
 }, 5000);
 }

Explications:
what va contenir le type de message, .error ou .success
mess va contenir le texte du message

(what + ".message").text(mess);

On insère le texte (mess) dans la div qui a les class (what) et (.message

Il faut maintenant appeler cette fonction dans le success de la méthode Ajax 

message("."+a.status, a.message);

Voici le fichier webroot/js/script_users.js au complet

jQuery(document).ready(function($){
 $.noConflict();
 csrf_token = $("input[name='_csrfToken']").val();
 // ------------
 // Création modal Add Category
 // ------------
 $(document).on("click", ".overlay-add-user", function(event){
 event.preventDefault();
 $('.contentWrapAddUsers').load($(this).attr("href"));
 $('#dialogModalAddUsers').modal('show');
 });
 // ------------
 // Validation de la modale d'ajout de nouveau user
 // ------------
 $(document).on('click','#SubmitUserNew', function(event){
 event.preventDefault();
 var formSerialize = $('#formUserAdd').serialize();
 $.ajax({
 beforeSend: function(xhr) {
 xhr.setRequestHeader('X-CSRF-Token', csrf_token);
 $('#SubmitUserNew').text('Saving…');
 $('#SubmitUserNew').attr('disabled', true);
 $(".error-message").remove();
 $(".has-error").removeClass('has-error');
 },
 url: 'users/add/',
 data: formSerialize,
 type: "POST",
 dataType: "JSON",
 async: true,
 success: function (a){
 if (a.status === 'success'){
 $('#SubmitUserNew').text('Submit');
 $('#SubmitUserNew').attr('disabled', false);
 $('#dialogModalAddUsers').modal('hide');
 }
 if (a.status === 'error'){
 $('#SubmitUserNew').text('Submit');
 $('#SubmitUserNew').attr('disabled', false);
 $.each(a.data, function(model, errors) {
 for (var fieldName in this) {
 var element = $("[name='"+fieldName+"']");
 $.each(this[fieldName], function(label, text){
 text_error = text ;
 console.log(text);
 });
 var create = $(document.createElement('span')).insertAfter(element);
 create.addClass('error-message help-block').text(text_error);
 create.parent().addClass('has-error');
 }
 });
 }
 message("."+a.status, a.message);
 }
 });
 });
 // ------------
 // Pour avoir de beaux messages d'alerte qui disparaissent au bout de 5s
 // ------------
 function message(what, mess){
 $(what + ".message").text(mess);
 $(what).fadeIn(500);
 setTimeout(function() {
 $(what).fadeOut(500);
 }, 5000);
 }
 });

Auteur.e de l'article

Gilles Duquerroy

Flexocodeur
Gilles, c’est d’abord et avant tout un parcours hors du commun. Passionné par les ordinateurs depuis sa plus tendre enfance, il devient professeur de technologies et part enseigner dans divers lycées français d’Afrique pendant plus de 15 ans. Autodidacte, il commence à créer des sites Web dès qu’intervient la démocratisation d’internet. En 2013, après avoir complété sa formation universitaire au Conservatoire National des Arts et Métiers d’Amiens, en France, il décide de se consacrer à ses premières amours : les langages de programmation Web!

À découvrir sur notre blogue

2016-12-19

CakePHP : soumettre un formulaire en Ajax et retourner les erreurs de validations

Gilles Duquerroy / Flexocodeur

Exemple de code pour soumettre un formulaire avec CakePHP en utilisant Ajax et avoir un retour des erreurs de validation.

Lire la suite
2017-03-17

SQLite pour vos projets PHP

David Barbier / Shaman programmeur

Nous discuterons spécifiquement de SQLite, ses particularités, ses avantages et quelques cas dans lesquels sont usage est pertinent ou souhaitable.

Lire la suite
2018-07-31

Comment créer un clé d’API Google Maps pour afficher la carte de mon site WordPress ?

Gilles Duquerroy / Flexocodeur

Depuis le 11 juin 2018, il est obligatoire d’activer un compte de facturation afin de pouvoir continuer à utiliser les services de l’API Google Maps.

Lire la suite
2017-05-02

L’ergonomie d’une interface Web

Marie-Michel Tremblay / Intégratrice Web, Graphiste

Lors de la conception d’un site web, il y a plusieurs règles à respecter pour obtenir un site ergonomique. Voici la liste de ces règles.

Lire la suite

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.