Charger des formulaires de manière générique avec jQuery
Dans ce billet, nous allons voir comment charger dynamiquement en ajax des formulaires et les afficher à l’utilisateur.
Nous allons utiliser une structure générique afin de pouvoir ajouter des formulaires simplement en ajoutant quelques fichiers. Cette technique à l’avantage d’offrir maintenance et une évolution aisées.
De plus, cela permet de ne charger que les fichiers nécessaires, ainsi votre page principale gardera une rapidité élevée, et le navigateur de votre visiteur ne sera pas surchargé de fichiers inutiles. Il chargera au fur et à mesure les fichiers uniquement nécessaire à l’utilisation qu’il fait de votre site.
Nous allons utiliser simplement du javascript et du html, ainsi il faudra vous procurer jQuery, jQuery UI et un éditeur pour développer votre solution.
Commencons par créer notre arborescence de fichier.
Comme vous pouvez le voir sur l’image, nous allons placer chacun de nos formulaires dans le dossier forms de notre projet. Chaque sous dossier portera le nom du formulaire que nous voulons charger.
Ainsi sur l’image nous voyons que nous avons un formulaire ‘register’, qui contient plusieurs fichiers:
form.css : le fichier de style de notre formulaire
form.js : le fichier javascript de notre formulaire, là où nous allons binder tous nos evenements et toutes nos actions au sein du formulaire
form.php: notre fichier de ‘template’, là où nous allons placer notre code html. C’est un fichier php car il se peut que nous nécessitions dans notre formulaire quelques variables de sessions, ou un traitement spécifique qui devra être réalisé en php.
La dossier img quand à lui contiendra toutes les images nécessaires à notre formulaire, si besoin est.
A la racine de notre projet, nous pouvons voir un dossier js, qui contiendra nos objets pour initialiser le menu et lancer notre appel de formulaire.
Ouvrons maintenant notre fichier index.php qui se trouve à la racine de notre projet:
Dans notre balise <head>, nous allons d’abord inclure jQuery et jQuery UI avec le style associé:
<link type="text/css" href="css/redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet"></link> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
Remplacez ici les chemins par les votres.
Ensuite, nous allons construire notre bouton déclencheur, et inclure les quelques fichiers nécessaire pour la suite de notre projet, afin de ne plus avoir à revenir sur cette page.
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
$(document).ready(function() {
tools.init();
menu.init();
});
</script>
<input type="button" id="menu_register" name="menu_register" value="register"></input>
<div id="dialog"></div>
Le div avec l’id dialog servira à recevoir notre formulaire et sera transformé en dialog.
Comme vous pouvez le voir, nous avons inclus deux fichiers: tools.js et menu.js. Occupons nous d’abord du menu.js
Ce fichier va comprendre une méthode init qui bindera les évenements du menu lors de son initialisation. Voici son contenu:
var menu = {
init: function(){
$('#menu_register').bind('click', function(){
tools.forms.load('register');
});
}
};
Nous venons de lui dire que lorsque nous appellerons menu.init();, le javascript devra binder l’événement onclick sur l’élément dom avec l’id ‘menu_register’. Cet événement déclenchera la fonction tools.forms.load(‘register’);
Maintenant que l’initialisation du menu est faire, et que notre bouton est prêt à délancher l’évenement qui nous interesse, essayons de créer le contenu de cet évenement pour charger notre formulaire, décrit dans le fichier tools.js:
var tools = {
init: function(){
$('#dialog').dialog({ autoOpen: false });
},
forms:{
location : 'forms/',
html : 'form.php',
css : 'form.css',
js : 'form.js',
current: 'none',
load: function(form_name){
if(tools.forms.current != form_name){
tools.forms.current = form_name;
$.post(tools.forms.location+form_name+'/'+tools.forms.html,
null,
function(data){
$('#dialog').html(data);
}, "html");
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
id: "css"+form_name,
href: tools.forms.location+form_name+'/'+tools.forms.css
});
$.getScript(tools.forms.location+form_name+'/'+tools.forms.js, function(){
form.init();
$('#dialog').dialog('option', 'title', form.name).dialog('open');
});
}else{
form.init();
$('#dialog').dialog('open');
}
}
}
};
tools.init() se charge de transformer le div avec l’id ‘dialog’ en dialog grâce à la bibliothèque jquery ui. Puis la méthode tools.form.load() qui va se charger d’appeler avec une requête post la page qui nous intéresse, ainsi que de charger le fichier javascript et css associés, puis lancer les fonctions d’initialisation du formulaire, avant enfin de l’afficher. Si le fichier est déjà chargé, il ne réalise pas de nouvel appel ajax mais réouvre simplement le dialog qui a été précédemment créer. Nottez que vous pouvez changer le nom de vos fichiers, si form.js par exemple ne vous plait pas, il suffit alors de le spécifier dans les attributs tools.form.css/js/html . (Il faudra alors penser à modifier vos noms de fichiers dans le dossier forms)
Maintenant, nous sommes prêts à créer notre formulaire dans les fichiers necessaires:
Commençons par créer le dom dans le fichier form.php:
<label for="user_name">Pseudonyme:</label> <input type="text" id="user_name" name="user_name"></input> <br/> <label for="user_mail">Adresse mail:</label> <input type="text" id="user_mail" name="user_mail"></input> <br/> <label for="user_pwd">Mot de passe:</label> <input type="password" id="user_pwd" name="user_pwd"></input> <br/> <label for="user_check">Entrez le à nouveau:</label> <input type="password" id="user_check" name="user_check"></input> <br/> <div id="register_info"></div>
Ceci va définir la structure de notre formulaire, maintenant, remplissons le fichier form.js pour binder les événements à notre formulaire.
var form = {
name: 'Inscription à daGame',
module: "register",
modal: true,
resizable: false,
init: function(){
$('#dialog')
.dialog('option', 'resizable', form.resizable)
.dialog('option', 'modal', form.modal)
.dialog('option', 'buttons', { "M'inscrire": function(){form.actions.submit();}, "Annuler": function(){form.actions.close();}});
},
render:{
},
actions:{
submit: function(){
//action à réaliser lorsque le formulaire est envoyé
},
close: function(){
//action à réaliser lorsque l'on clique sur cancel
//destruction du css chargé pour ne pas avoir de conflit par la suite
$("#css"+form.module).destroy();
$('#dialog').dialog('close');
}
}
};
Nous définissions ici le chargement de la modale via la méthode init(), qui va être automatiquement appelée par tools.form.load, puis nous définissons les fonctions submit et cancel qui vont être executés lorsque l’utilisateur cliquera sur les boutons associés.
Et voilà, c’était aussi simple que cela. Maintenant vous pouvez ajouter des formulaires très simplement en modifiant votre dossier forms, sans que votre page principale soit surchargée. En quelques minutes vous pourrez construire tous vos formulaires à présent.
Pingback: Les tweets qui mentionnent Charger des formulaires de manière générique avec jQuery « Ghaundan Dév Lab -- Topsy.com