Exemples d’utilisation de Prototype

Connaissez-vous Prototype ? Si oui, tant mieux, si non il faut absolument que vous lisiez ce post jusqu’au bout.

Pour faire simple, la librairie Prototype permet de simplifier nombre de fonctionnalités que l’on souhaite faire via JavaScript / Ajax.

Exemple 1 : en une ligne de code, vous envoyez le contenu d’un formulaire vers un fichier distant, récupérez le contenu généré par ce fichier distant et l’insérez dans le conteneur de votre choix.
var recupererInfo = function(quelForm){
Params = Form.serialize(quelForm);
new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {parameters:Params});
}

pour aller plus loin, on peut mettre plus de paramètres entre les accolades. exemple : {method: 'post', parameters: Form.serialize(form), asynchronous:false, evalScripts:true}
On peut aussi définir de ne pas remplacer le contenu du conteneur souhaité et plutôt mettre à la suite de ce qu’il contient déjà, il suffit de rajouter “,insertion: Insertion.Bottom” . exemple : new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {parameters:Params},insertion: Insertion.Bottom);

Exemple 1bis : suite à la demande d’Abid, voici un exemple complet pour la soumission d’un formulaire en Ajax :
<script type="text/javascript">
/*
* personnellement, je déconseille désormais
* l'utilisation des commentaires HTML dans
* les balises JS qui n'ont plus vraiment
* d'incidence sur les navigateurs et qui
* peuvent poser des problèmes avec Prototype
*/
var lancerRecherche = function(infosForm) {
new Ajax.Updater('resultatsRecherche','exeRecherche.php', {parameters:infosForm});
}
</script>
<form method="post">
<fieldset>
<legend>Recherche</legend>
<select name="typeRecherche"> <option value="societe">Société</option> <option value="numCommande">Numéro de commande</option> <option value="nomParticipant">Nom de participant</option> </select>
<input name="recherche" type="text" />
<input value="Chercher" onclick="lancerRecherche(Form.serialize(this.form)); return false;" type="submit" />
</fieldset>
</form>

Pour cet exemple, le fichier exeRecherche.php reçoit les variables $_POST envoyées par le formulaire (sauf envoi de fichier en multipart/postdata) et renvoie son rendu HTML dans le conteneur resultatsRecherche.

Exemple 2 : version simplifiée du premier exemple. Via une ligne de code, envoyez un paramètre en GET ou en POST à un fichier et récupérez son contenu dans le contenur de votre choix.
var recupererInfo = function(param1,param2){
Params = 'monParam1='+param1+'&monParam2='+param2;
new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {method: 'get',parameters:Params});
}

Exemple 3 : vous pouvez récupérer le contenu de n’importe quel champ de formulaire, que ce soit une liste déroulante, des boutons radio, ou une champ de texte : alert( $F(’idDeMonChamp’) );

Exemple 4 : vous pouvez oublier les document.getElementById(’idDeMonConteneur’) et autres document.all(’idDeMonConteneur’) et tout remplacer par le très simple $(’idDeMonConteneur’)

• Bookmark
  
  • Subscribe
  • Bloglines
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • Technorati

Proposé par Rom's novembre 2007

4 Réponses à l'article “Exemples d’utilisation de Prototype”

Laisser un commentaire