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);
}
});
Exemple de code pour soumettre un formulaire avec CakePHP en utilisant Ajax et avoir un retour des erreurs de validation.
Nous discuterons spécifiquement de SQLite, ses particularités, ses avantages et quelques cas dans lesquels sont usage est pertinent ou souhaitable.
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.
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.