fbpx
/ 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 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
2017-04-25

Post-Mortem : XHTML – Une rétrospective

David Barbier / Shaman programmeur

À l’issue du conflit, le W3C a abandonné la norme XHTML au profit du raffinement et la promotion de HTML5.

Lire la suite
2016-12-01

Amazon Web Services : les bases de la conversion de médias via AWS

David Barbier / Shaman programmeur

Cet article est une introduction aux notions de base qui sont impliqués dans l’usage d’Amazon Web Services (AWS) dans le cadre d’un projet Web.

Lire la suite

Laisser un commentaire

Votre adresse e-mail 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.