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);
 }
 });