Nous sommes souvent confrontés à d’interminables scripts pour mettre à jour des données p.ex. dans des fonctionnalités de CRM, ERP, CMS, etc.
La fonction ajax() de JQuery vous permet de vous faciliter la vie tout en créant une interface utilisateur beaucoup plus attrayante.
Pour notre exemple, voici le formulaire :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mettre à jour des données avec la fonction ajax() de JQuery</title>
</head>
<body>
<form action="userdata.asp" method="post">
<input id="ID" type="hidden" value="10" />
<label for="Nom">Nom:</label><input type="text" id="Nom" class="formelt" /><br />
<label for="Prenom">Prénom:</label><input type="text" id="Prenom" class="formelt" />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/actions.js"></script>
</body>
</html>
Vous remarquerez qu’il y a un champ caché et 2 champs texte, le champ caché contient l’ID de l’élément à modifier, les 2 champs sont les champs à updater.
Le code html reste valide W3C
Les actions JQuery sont toutes placées dans un fichier nommé « actions.js » que voici
$(document).ready(function() {
$(".formelt").click(function() { $(this).css('background-color', '#F3F781') }); //changer la couleur pour indiquer que le champ est actif
$(".formelt").blur(function() {
var ID = $("#ID").val(); // l'id de l'élément à modifier
var FieldName = $(this).attr("id"); // le nom du champ
var FieldValue = $(this).val(); // la valeur du champ
var datastr = "{ID:" + ID + ",FieldName:" + FieldName + ",FieldValue:" + FieldValue + "}"
$.ajax({
type: "POST", //post ou get
url: "savedata.asp", // le nom du fichier contenant l'update DB
data: datastr // les données sous forme {ID:10,FieldName:Nom,FieldValue:contenu+de+mon+champ}
});
$(this).css('background-color', '#fff'); // changer la couleur du champ pour montrer que c'est enregistré
return false; // n'oubliez pas cette ligne afin de ne pas charger la page
});
});
Pour finir il vous faut un fichier ASP, PHP ou autre pour mettre à jour la table, récupérez simplement vos éléments comme suit:
En ASP par exemple:
Dim myDBID, myFieldName, myFieldValue
myDBID = Request.Form("ID")
myFieldName = Request.Form("FieldName")
myFieldValue = Request.Form("FieldValue")L’avantage de ce script est qu’il suffit de rajouter des champs DB et dans l’html pour que tout ce mette à jour automatiquement (attention cependant : pour des raisons de sécurité, je vous recommande de ne pas utiliser le nom du champ DB dans l’html, ce qui nécessitera également de mettre à jour le fichier ASP ou PHP)
