CakePHP, la suite - Wenovio
1-844-WENOVIO English

CakePHP, la suite

Lecture de 2 minutes

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

Laisser un commentaire