41Mag - Confirmer une action en javaScript

Confirmer une action en javaScript

Le Java Script permet de confirmer, ou au contraire de ne pas effectuer, une action. Dans cet exemple, nous utiliserons ce langage pour demander une confirmation après avoir cliqué sur un lien.

Pour ce tutoriel, nous allons prendre un exemple bien précis, mais qui peut s’adapter à toutes les situations. Si nous prenons cet exemple, c’est pour faciliter la compréhension de cette fonction Java Script qui s’avère extrêmement utile.

Dans L’administration, ou BackOffice, de votre site internet de vente en ligne (ou autre …ce n’est qu’un exemple) vous avez une page listant tous les produits affiché et mis en vente. Vous pouvez les modifier à votre guise mais aussi les supprimer. Si pour la première action un clique effectué par inadvertance n’est pas grave, en revanche, pour la suppression, cela peut devenir pus problématique. Imaginez que vous supprimiez un article avec une longue description, il vous faudrait tout recommencer. Le JavaScript va donc vous permettre de confirmer une action, dans cet exemple la suppression d’un article.

La suppression d’un article s’effectue généralement de cette manière :

Un lien hypertext transmettant une variable ajouter à l’adresse de destination (page traitant en PHP l’action, ici la suppression d’un article) :

1
<p><a href="page_de_destination.html?suppresion_article=article_a_supprimer">Supprimer</a></p>

Dans la ligne de code ci-dessus :

  • la balise <p> indique l’ouverture d’un paragraphe
  • la balise <a> indique la présence d’un lien
  • l’attribut href= de la balise <a> indique la destination, ou adresse, du lien

La transmission de variable dans un lien

Notre lien pointe donc vers la page Page_de_destination.html. Comme vous avez pu le constater, cette adresse est suivie d’un point d’interrogation ? qui permet de transmettre une variable en PHP à l’aide de la méthode GET. Ce point sera expliquer un peu plus loin. Suite à ce point d’interrogation, la syntaxe de la transmission de la variable s’ecris le la maniere suivante :

Nom_de_la_variable = Valeur_de_la_variable

Tout ceci se traduirais par :

1
Adresse_du_lien.html ET(?) je transmet NOM_de_la_VARIABLE qui a pour valeur (=) VALEUR_de_la_VARIABLE

Récupération de variable par la méthode $_GET

Le script, tel qu’il est, transmet donc à la page Adresse_du_lien.html la variable NOM_de_la_variable. La méthode $_GET permet en PHP de récupérer cette variable

1
2
3
<?php
$Variable = $_GET['NOM_de_la_VARIABLE'];
?>

En règle général, cette variable va nous permettre de sélectionner dans une base de données quel élément supprimer :

1
2
3
4
mysql_connect("nom_de_l_hôte", "nom_utilisateur", "mot_de_passe");
mysql_select_db("nom_de_la_base");
 
mysql_query('DELETE FROM nom_de_la_base WHERE id='' . $_GET['NOM_de_la_VARIABLE'] . '' ');

Les deux premières lignes du script ci-dessus servent à ce connecté a la base de données de votre site.
La troisième ligne envoie une requête permettant la suppression d’un élément de votre base de données identifier grâce à la variable récupérer.

La fonction ONCLICK

Après avoir vu brièvement comment fonctionnais la transmission de variable, vous devez mieux comprendre le cheminement du clique que vous aurez effectué, volontairement ou involontairement, sur le lien supprimer.

Nous allons donc revenir à cette première ligne de code et lui insérer la fonction ONCLICK pour qu’une boite de dialogue s’ouvre lorsque vous cliqué sur le lien et vous demande de confirmer la suppression ou de ne rien faire.

1
2
3
<p>
 <a href="page_de_destination.html?suppresion_article=article_a_supprimer" onclick="return(confirm('Etes-vous sûr de vouloir supprimer cette entrée'));" >Supprimer</a>
</p>

Voila, notre script est finis, dorénavant, lorsque vous cliquerez sur le lien supprimer, une boite de dialogue s’ouvrira et vous demandera de confirmer votre action. Cela est très pratique pour éviter de supprimer des entrées par erreurs.

Pour tester, cliquez sur ce lien : Test de la boite de confirmation.

Article du même thême : ..

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.