Magazine

Prototype, Ajax, aide à la saisie et touche ENTREE

Publié le 17 décembre 2007 par Olivier Duval

Introduction

Le billet suivant souhaite démontrer l’utilisation des événements javascript, notamment avec Prototype, sur un cas d’utilisation d’apparence simple : l’utilisation de la touche ENTREE sans déclencher le post du formulaire, mais uniquement une requête Ajax.

L’exemple se base sur du code ASP.NET et Prototype.

Contexte

Imaginons dans un formulaire la possibilité de rechercher une ou des personnes (par le début du nom par exemple), sous forme d’aide à la saisie, par un appel Ajax qui retourne une liste correspondante à la recherche :

L’utilisateur a le choix : cliquer sur Rechercher ou …valider sa saisie par la touche ENTREE. Dans ce dernier cas, si on ne fait rien, le formulaire entier sera envoyé, ce que l’on ne souhaite pas : on veut envoyer une requête Ajax au serveur, pour avoir une liste de personnes, en sélectionner une puis continuer la saisie du formulaire

Evènements & Prototype

Avec Prototype, nous allons utiliser l’évènement key_press sur le champ de saisie : déclencher une méthode lors de la pression de la touche ENTREE, celle-ci désactivera tous les autres évènements (notamment la validation du formulaire), et exécutera notre fonction Ajax.

Dans la mesure du possible, le javascript se voudra non intrusif (recherche Google) : au lieu de mettre les appels de fonctions sur chaque attribut d’évènement (par exemple onkeypress=”mafonction()” pour un input text, ou un onclick=”mafonction()” sur un href), on les mettra en fin de formulaire et on les chargera tout en une fois. Cela a le mérite de pouvoir le désactiver très facilement, et dans la méthode de développement, de se concentrer sur le formulaire, pour ensuite (une fois que cela fonctionne), s’attaquer à l’ajout du javascript sur le code fonctionnel.

Extrait de code

L’extrait suivant est composé de code ASP.NET, et de code Javascript (Prototype).

<fieldset style="border: 1px solid grey;">
<asp:TextBox runat="server" ID="TxtLibelle"></asp:TextBox>
<asp:HyperLink ID="LinkRecherche" runat="server" Text="Rechercher" NavigateUrl="javascript:void(0);" CssClass="normal"/>

<div id="dSearchresult" style="position: absolute; background-color:White;" class="start"> 
    <div id="dClosed" style="width:100%; text-align:right; margin-bottom: 5px;"><a id="lnkFermer" class="normal"><img src="/images/pict_close.gif" title="fermer" alt="fermer"/></a></div>                                                                    
    <div id="dValues"></div>
    <div id="dLoading">
     <img src="/images/spinner_bleu.gif" alt="Loading"/> 
            <span class="normal">Recherche en cours...</span>                       
     </div>      
</div>
</fieldset>

<script type="text/javascript">  
  function recherche()
  {        
     new Ajax.Request('recherche.ashx'
        { method: 'get', parameters: 
          {searchString:$F('<%=TxtLibelle.ClientID %>'), 
           action: 'findIndividu'}, 
           onComplete:onSearchComplete 
        });               
  }

  function initialize () {
      Event.observe ('<%=LinkRecherche.ClientID%>','click',recherche);

      Event.observe ('<%=TtxtLibelle.ClientID%>','keypress',
            function(evt){
            if(evt.keyCode==Event.KEY_RETURN) 
                {            
                Event.stop(evt);
                recherche();
                }
            }
        );
  } // initialisation des évènements après que la page est chargée

  Event.observe(window, 'load', initialize, false);

</script>

Conclusion

Ce petit exemple montre simplement l’usage du javascript à l’aide de Prototype, qui, généralement est boudé par les développeurs. Avec l’avènement d’Ajax, le JS est revenu au gout du jour, même si quelques bonnes pratiques sont conseillées pour sa mise en place :

  • utilisation de frameworks/libraires : Prototype, jQuery, ...ou d’avatars tel que Prototip
  • que le code soit non intrusif
  • installer Firebug pour le débuggage

1 avouons que la maintenance se révéle souvent hasardeuse


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Prototype : MusicPen MP3 Player

    Chris Williams a imaginé un baladeur MP3 qui dénote dans la forêt de carrés plastiques qu'est le marché. Le MusicPen a l'allur... Lire la suite

    Par  Greg
    AUDIO , CONSO, HIGH TECH, IMAGE & SON , UNE DE LA HOME
  • iSearch: AJAX Search API pour iPhone

    Google vient de sortir une interface de démonstration (et donc à l’attention des développeurs) de son API AJAX Search pour iPhone. L’interface permet d’effectue... Lire la suite

    Par  Jay
    BLOG, HIGH TECH, INTERNET, MARKETING & PUBLICITÉ, MOBILES, PROGRAMMATION
  • Des images pour Prototype

    Prototype passe nous dire bonjour avec trois petites nouvelles captures ! Dans ce jeu, vous incarnez Alex Mercer, un anti-héros cherchant à se... Lire la suite

    Par  Axime
    HIGH TECH, JEUX VIDÉO, SONY PLAYSTATION
  • Web2.0 : Dailylit, Moodboard, Ajax, Jooce

    Web2.0 Dailylit, Moodboard, Ajax, Jooce

    L’idée est géniale, et parfaitement présentée sur le blog BiblioTek 2.0 : “Dailylit est un site web anglophone qui permetde recevoir gratuitement des oeuvres... Lire la suite

    Par  Jerome S.
    BLOG, INTERNET
  • [MAJ] Trois artworks pour Prototype

    Sierra diffuse de nouveaux clichés, pour être plus précis, trois artworks de Prototype, leur prochain titre à venir sur PS3.Incarnant Alex Mercer, un homme ayan... Lire la suite

    Par  Axime
    HIGH TECH, JEUX VIDÉO, SONY PLAYSTATION
  • Fancy Upload : envoi massif de fichiers en Ajax

    Basé sur le Framework Javascript Mootools, Fancy Upload est un outil particulièrement pratique et efficace permettant l’upload massif de fichiers sur un... Lire la suite

    Par  Tonylepsie
    INTERNET, PROGRAMMATION
  • [GC 07] Premier trailer pour Prototype !

    Sierra et Radical Entertainment nous proposent en ce mardi 21 août de visionner le premier trailer de leur prochain bébé, j’ai nommé Prototype ! Lire la suite

    Par  Axime
    HIGH TECH, JEUX VIDÉO, SONY PLAYSTATION

A propos de l’auteur


Olivier Duval 4 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog