Astuces de Webmaster

Exemples d’utilisation de Prototype

par Rom's le 15 nov 2007 (Développement Web)

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’)

:, , ,

Follow RomainBOYER on Twitter
» Flux RSS du blog

6 Commentaires pour cet article

  • Abid
    décembre 1st, 2007 on 20:12

    Bonsoir,

    merci pour votre article, intéressant.

    auriez-vous un code exemple du 4éme Exemple :

    soumision des params d’un formulaire avec Ajax Updater.

    Je vous remercie d’avance

    Abid

  • Rom's
    décembre 2nd, 2007 on 11:57

    Bonjour Abid,

    j’ai mis à jour l’article par l’exemple 1bis pour répondre à ta question.

  • Xavier
    mai 19th, 2008 on 18:01

    Bonjour, merci pour cet exemple. J’ai un peu de mal avec Ajax,pourriez vous m’indiquer comment récupérer le résultat de l’exemple 1 bis ?

  • Rom's
    mai 19th, 2008 on 23:12

    Bonjour,

    dans ce cas, vous pourrez récupérer les variables $_POST['typeRecherche'] et $_POST['recherche'] dans le fichier exeRecherche.php lorsqu’il sera appelé.

  • Reda Makhchan
    juin 25th, 2008 on 17:12

    Sujet très intéressante Merci :)
    Bon continuation …

  • kyz
    août 8th, 2008 on 14:00

    Bonjours,

    Merci pour les exemples ils sont très bien expliqué, par contre en ce qui concerne les textarea et les input files qui se trouve dans le formulaire, cela marche-t-il aussi ?

Laisser un commentaire

Vous cherchiez ?

Recherche rapide :

Vous ne trouvez toujours pas ? Laissez un petit commentaire sur un article, qu'on puisse regarder ça de plus près !

Quelques amis !

A visiter...

Archives

Tous les articles, chronologiquement...