Utiliser Bootstrap pour remplacer la fenêtre de confirmation Javascript

Changer l’aspect de la fenêtre de confirmation Javascript avec une modal Bootstrap.

Souvent dans une application lorsqu’on a une fonction qui va supprimer quelque chose, on demande confirmation par sécurité. Dans le développement web, cela peut se faire par exemple avec confirm() de Javascript, déclenché par le clic sur un lien avec l’attribut onclick de la balise a. Ceci est bien old-school pour plusieurs raisons que je ne parlerai pas ici.

Confirmation dans Google Chrome
Confirmation dans Google Chrome

Ce court billet met en place une boîte de dialogue de confirmation utilisant Bootstrap, apportant un aspect un peu plus joli que la fenêtre système de confirmation.

$(function() {
	$('a[data-confirm]').click(function(ev) {
		var href = $(this).attr('href');
		
		if (!$('#dataConfirmModal').length) {
			$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Merci de confirmer</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Non</button><a class="btn btn-danger" id="dataConfirmOK">Oui</a></div></div></div></div>');
		}
		$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
		$('#dataConfirmOK').attr('href', href);
		$('#dataConfirmModal').modal({show:true});
		
		return false;
	});
});

Comme on le voit dans le code jQuery, cette action est déclenchée lors d’un clic sur un élément a possédant un attribut data-confirm qui par ailleurs servira de titre à la fenêtre modale. Voici un exemple de lien qui ouvre la modale :

<a href="" data-confirm="Etes-vous certain de vouloir supprimer?">Suppression</a>
Confirmation modale avec Bootstrap
Confirmation modale avec Bootstrap

Testez vous-même avec l’exemple ci-contre : bootstrap-modal.zip

Laravel 4 et Ajax

Dans cet article, voyons comment implémenter une requête Ajax (XHR) avec le framework Laravel.

Implémenter une requête Ajax au sein d’un projet Laravel n’est pas bien compliqué. Dans ce bref exemple, j’ai un tableau de données (non présent dans le billet), un des champs est une icône de statut de l’enregistrement qui peut-être actif ou non, et lorsque l’on clique sur ce bouton, l’état bascule en faisant une requête XHR.

La partie javascript va se trouver dans la vue en question (celle qui affiche le tableau). Lorsque le bouton est cliqué, jQuery.ajax() va déclencher l’exécution de l’action getToggleVisibility() du controlleur courrant, DasboardController dans notre exemple, celui-ci va retourner une réponse JSON qui est utilisée pour intéragir sur la vue. Et le tour est joué.

Continuer la lecture de « Laravel 4 et Ajax »

Elément de formulaire à la volée avec Zend Framework

Dans ce tutoriel nous allons voir comment gérer l’ajout d’un élément de formulaire à la volée, à savoir en utilisant Ajax/jQuery dans un projet Zend Framework. En PHP vanilla, c’est plutôt simple, mais avec ZF, cela se complique un peu.

Le tutoriel pré-suppose avoir les connaissances de base de ZF, si vous débutez, je vous conseille de lire le billet relatif à la mise en place d’un premier projet ZF.

Continuer la lecture de « Elément de formulaire à la volée avec Zend Framework »