Prototype, Ajax, aide à la saisie et touche ENTREE

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

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