Demander une confirmation en Jquery lors du clique sur un lien
Parce qu'il est parfois utile de demander une confirmation lorsque l'on clique sur un lien avant d'être redirigé - lorsque ce lien permet la suppression de quelque chose par exemple - et qu'il est assez lourd de devoir le faire en PHP, voici un petit code Jquery permettant de le faire simplement.
Ce code permet simplement d'afficher une fenêtre demandant si l'on souhaite continuer ou non l'action. Si l'on clique sur "Oui" on est redirigé, sinon non.
<a href="http://votrelien.com/" class="lienAConfirmer">Cliquez ici</a> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $('.lienAConfirmer').click(function(e){ //Annule l'action par défaut qui est la redirection e.preventDefault(); //Demande une confirmation if(window.confirm('Êtes-vous sûr de vouloir supprimer cet article ?')){ //Si la confirmation est donnée, on redirige var url = $(this).attr('href'); window.location.href = url; }; }); </script>
Pour que ce code fonctionne, il vous suffit d'ajouter une classe avec le nom que vous souhaitez (ici ".lienAConfirmer") sur vos liens ainsi que dans le code jquery permettant de détecter le clique.
Le code permet simplement d'annuler l'action effectuée par défaut par un lien html classique, donc la redirection. Il permet de demander une confirmation avec le texte de son choix (ici "Êtes-vous sûr de vouloir supprimer cet article ?" par exemple) et si l'utilisateur clique sur "Oui" il est redirigé vers le lien présent dans la balise a html. Sinon il ne se passe rien.
Tout simplement.
C'est une version volontairement minimaliste, à vous ensuite de passer par Ajax si vous souhaitez que la page soit exécutée dynamiquement ...
Petite précision, si l'utilisateur désactive javascript sur son navigateur alors il sera redirigé comme si il s'agissait d'un lien normal, sans confirmation.
Catégories : Javascript, JQuery
Par Guillaume le 18/09/2016 à 11:22