Ajax avec jQuery en 1 ligne. Les sites en Ajax, permettent de modifier le contenu d'une page sans la recharger entièrement. jQuery permet de faire ce genre de requêtes Ajax très simplement. Sommaire de l'article : Le script le plus court pour faire une requête ajax avec jQuery.Le code jQuery pour AJAX avec Loader.Côté serveur : jQuery Ajax et PHP. Le script le plus court pour faire une requête ajax avec jQuery. Dans l'exemple qui suit, en cliquant sur un lien ou sur un bouton un texte et une image seront chargés dans une partie de la page délimitée par le cadre : 1. Pour ce faire, le plus simple est d'insérer le lien Google suivant : Ce liens est disponible à cette adresse : Sous WordPress, vous pouvez utiliser le plugins Post Layout ou une des méthodes précisée dans : Comment installer jQuery sous WordPress ? 2.
La fonction jQuery peut s'écrire sur une ligne :). En étalant le code jQuery, pour mieux différencier les parties, cela donne : 3. 4. . - Par un bouton 1. 2. Script Junkie | HTML5 Datalists: What They Are They and When to Use Them. Autocompletion is a pattern that all Web users are familiar with. When you do a search, your search engine suggests terms. When you type a new e-mail message, your mail client suggest recipients. This functionality, however, has not been available to Web developers without a nontrivial amount of JavaScript.
One of the new HTML5 elements, the <datalist>, brings this autocomplete functionality to the Web natively. In this article, I'll describe what datalists are, when it's appropriate to use them, their limitations and what to do for browsers that don't support them. Let's get started. Creating Datalists To show how a datalist works, let's start with a traditional text input: <label for="favorite_team">Favorite Team:</label><input type="text" name="team" id="favorite_team"> This field asks a user to provide his or her favorite sports team. <datalist> <option>Detroit Lions</option> <option>Detroit Pistons</option> <option>Detroit Red Wings</option> <option>Detroit Tigers</option> <! Figure 1. Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes.
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country... ") by reading the select element's data-placeholder value.
Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right-to-Left Support. HTML5 : L'élément <datalist> Avec l'annonce d'HTML5, de grandes nouveautés accompagnent les formulaires. Ils peuvent enfin s'enrichir afin de s'adapter au plus près des nouveaux besoins. Ainsi l'élément <datalist> fait son entrée. Des suggestions de choix Inauguré avec la vague HTML5, <datalist> est un élément de formulaire permettant de lier une liste de choix à un élément input. Par défaut, <datalist> demeure invisible. Compatibilité navigateur de l'élément <datalist> Un navigateur ne supportant pas l'élément n'affichera aucune suggestion.
Utilisation classique Dans la majorité des situations, il sera utile d'associer un champ d'entrée texte <input type="text"> à une liste de suggestions. <label for="choix_bieres">Indiquez votre bière préférée :</label><input list="bieres" type="text" id="choix_bieres"><datalist id="bieres"><option value="Meteor"><option value="Pils"><option value="Kronenbourg"><option value="Grimbergen"></datalist> Démonstration Aperçu sous Internet Explorer 10 Utilisation multiple Démonstration.
Example of a dynamic HTML5 datalist control. I've made no secret of being a huge fan of the updates to forms within HTML5. One of the more interesting updates is the datalist control. This control gives you basic autocomplete support for an input field. At its simplest, you create the datalist control options, tie it to a control, and when the user types, they see items that match your initial list.
Consider this example. Note that the input field, search, has a list attribute that points to the datalist control below it. So - that's cool I think - but most folks are not going to have a static list of options. For my example, I make use of jQuery, although that is certainly not required. One interesting tidbit. I'm not sure if I like that so for my examples I've simply disabled it. As I mentioned above, if you run this in a browser that doesn't support datalist, it fails nicely.
You can try this version by hitting the giant demo button below. Example of a dynamic HTML5 datalist control. Javascript : réaliser un champ de texte avec auto-suggestions. Vous aimeriez pouvoir réaliser une barre de recherche avec des propositions dynamiques à la manière de Google, mais vous ne savez pas comment vous y prendre ? Alors suivez-moi ! Nous allons voir ensemble tout du long de ce tutoriel comment réaliser ce type de champ de texte ! Sommaire Présentation Le principe est simple : nous voulons réaliser un champ de texte qui, lorsque le visiteur saisira une lettre, ira chercher dans une liste de mots clés ceux qui commencent (ou contiennent) ces lettres, pour les afficher au visiteur.
Voir la démo (essayez avec "K","k", "B", "S"...) Préparation Bon, nous n'allons pas du tout nous occuper du design du champ de texte dans ce tutoriel, donc je vous donne la structure HTML qu'aura le champ de texte avec les suggestions, et un design que j'ai intégré à partir de ce PSD : le CSS : Afficher le CSS Fermer ce cadre #auto-suggest .suggestions li {height:25px;padding:0 10px;line-height:25px;cursor et les images placées dans un dossier "images" : tick.png noise.png Bien ! Web 2.0, allez plus loin avec AJAX et XMLHttpRequest. Qu'est ce qu'AJAX ? Vous trouverez certainement plusieurs définitions différentes à cet acronyme.
En voici une : Asynchronous JavaScript And XML. AJAX n'est donc pas une technologie mais plutôt un concept qui permet donc de faire des appels asynchrones au serveur depuis le client. Lors de ces appels, le serveur retournera du XML qui sera "récupéré" par javascript et traité. Nous verrons que nous pouvons tout aussi bien faire transiter du texte et faire des appels synchrone si l'on veut. Vous saisissez une adresse dans votre navigateur. Donc, quand vous cliquez sur un lien, vous recommencez ce processus en entier avec une nouvelle page. Ajouter des éléments a la page Modifier le contenu d'un "bout de la page" Insérer des données dans une base. Les applications sont donc très nombreuses : Champs qui s'auto-complètent (comme google suggest).
Mais comment faire pour l'utiliser ? AJAX se base sur l'utilisation d'un composant embarqué dans presque tous les navigateurs récents. Sélectionnez <? Scriptaculous Ajax.Autocompleter : Mettre en place un champ de saisie avec suggestions dynamiques. Vous avez tous déjà développé une application Web contenant un formulaire au sein duquel vous avez inséré une liste de choix, en utilisant la balise HTML <select> . Mais une liste déroulante n’est réellement utilisable que si elle ne contient que peu d’entrées ; pas plus d’une trentaine, dirais-je, au grand maximum. Et une liste <select> force l’utilisateur à choisir une des valeurs que vous lui proposez. Dans certains cas, vous pouvez vouloir : aider votre utilisateur, en lui une liste de choix tout en lui permettant d’effectuer une saisie libre.
Par exemple, pensons à la saisie d’une adresse E-Mail lors de la rédaction d’un courier électronique [ 1 ] : l’utilisateur peut commencer à saisir une adresse vous pouvez lui proposer une liste issue de son carnet d’adresses, filtrée par sa saisie il peut : soit sélectionner l’une des adresses proposées, soit en saisir une autre. Script.aculo.us :: Ajax.Autocompleter Cette bibliothèque propose un composant qui vous permettra : un formulaire HTML, <?