Catégorie : jQuery

  • Remplir une liste déroulante à l’aide de jQuery.ajax()

    Voici une figure de cas intéressante : une page Web écrite en PHP affiche un formulaire qui contient, entre autres, une liste déroulante. Les valeurs de cette liste sont tirées de la base de données.

    On pourra faire appel à jQuery.ajax() pour remplir cette liste déroulante dès que le DOM sera chargé en mémoire. De cette façon, le code HTML de la page sera affiché le plus rapidement possible. La lecture dans la base de données pour remplir la liste déroulante sera donc effectuée dans un deuxième temps, sans ralentir l'affichage initial.

    (suite…)
  • Écrire le code PHP qui sera exécuté par AJAX

    Les appels AJAX ouvrent la porte à une meilleure expérience utilisateur en permettant d'exécuter une fonction serveur à partir du client. Le code serveur est donc exécuté (ex : une lecture ou une écriture dans la base de données) sans que la page ne subisse un postback.

    En PHP, le code qui sera appelé par AJAX sera placé dans son propre fichier .php.

    (suite…)
  • Fonctionnement de jQuery.ajax()

    Grâce à AJAX, il est possible d'exécuter du code serveur (ex : PHP ou C#) à partir d'un appel JavaScript. Ce code peut effectuer n'importe quelle tâche côté serveur pour répondre à nos besoins : valider des informations, effectuer une lecture dans la base de données, ajouter un enregistrement dans une table, manipuler des variables de session, etc.

    (suite…)
  • Créer des raccourcis-clavier avec jQuery

    jQuery nous permet de réagir à une touche au clavier grâce aux fonctions keyup(), keydown() et keypress(). Il est même possible de réagir différemment à une touche en fonction de l'endroit où le focus est donné.

    L'utilisation la plus courante consiste utiliser la touche Entrée pour soumettre le formulaire qui détient le focus. Il est cependant possible d'aller plus loin en utilisant ces fonctions pour définir des raccourcis-clavier.

    (suite…)
  • Liste déroulante <select> en lecture seule

    Dans un formulaire HTML, il est possible de placer certains contrôles en lecture seule afin d'éviter qu'ils soient modifiés par l'usager. Par exemple, les boîtes de saisie textuelle (<input type="text"> et <textarea>) peuvent être mises en lecture seule grâce à l'attribut readonly. Ceci permet au contrôle de recevoir le focus et ne modifie pas son apparence, tout en empêchant la modification de son contenu.

    Malheureusement, l'attribut readonly n'est pas disponible pour les listes déroulantes (<select>).

    Je vous présente dans cet article une astuce pour simuler un readonly sur une liste déroulante.

    (suite…)
  • Où placer les instructions JavaScript ?

    Les instructions JavaScript, avec ou sans jQuery, peuvent être écrites directement dans la page Web. Elles peuvent également être placées dans un fichier .js..

    Quelle approche est préférable ? Il y a différentes écoles de pensées à ce sujet. Une chose est certaine : si le code JavaScript doit être utilisé sur plus d'une page Web, l'utilisation d'un fichier .js permettra de ne l'écrire qu'une seule fois.

    Dans tous les cas, ce sont les balises <script> et </script> qui indiqueront au navigateur que le code qu'elles contiennent est un script. 

    Mais où doit-on placer ces balises ? C'est ce que nous allons voir.

    (suite…)
  • Popup avec jQuery : .dialog()

    Avec jQuery, la méthode .dialog() permet de transformer une simple division en boîte de dialogue, aussi appelée popup.

    La boîte de dialogue peut se décliner en différentes versions :

    • boîte avec un bouton OK;
    • boîte avec des boutons qui mèneront à différentes actions, comme par exemple une boîte de confirmation avec un bouton Oui qui mène à la suppression d'un enregistrement et un bouton Non qui annule l'opération;
    • boîte qui s'affiche pendant quelques secondes avant de disparaître;
    • boîte qui apparaît quand on passe la souris sur un élément et qui disparaît quand la souris quitte cet élément;
    • etc.
    (suite…)
  • Contrôle de calendrier avec jQuery

    Lorsqu'un site Web doit saisir une date, le travail des internautes et le travail de validation du formulaire seront facilités par l'affichage d'un calendrier. 

    En attendant que tous les navigateurs supportent le contrôle de calendrier de HTML 5, jQuery offre un datepicker qui s'occupe de ce travail.

    Voyons comment intégrer ce contrôle dans un formulaire Web.

    (suite…)
  • Les sélecteurs jQuery

    Dans mon article précédent sur le DOM (Document Object Model), j'ai expliqué comment le DOM permet de manipuler les éléments HTML dynamiquement à l'aide de Javascript. jQuery permet lui aussi d'effectuer de telles manipulations. Et souvent, la syntaxe sera plus intuitive avec jQuery, pour autant que l'on comprenne bien le fonctionnement des sélecteurs jQuery.

    Voici donc ce que vous devez savoir pour bien travailler avec jQuery.

    (suite…)