JQuery vous permet d’effectuer facilement des requêtes AJAX. Par exemple:

$.ajax({
 type : "POST",
 url : "URL_A_APPELER",
 data : {
  param1: val_param1,
  param2: val_param2,
  // ...
 }
})
.done(function(data)
{
})
.fail(function(jqXHR, responseHtml, url)
{
});

Dans l’exemple on spécifie le type de requête, l’URL appelée, et les données envoyées. La fonction done() est exécutée lorsque la réponse est positive. L’objet « data » est alors un objet qui peut contenir du HTML notamment. La fonction fail() est exécutée quand la réponse du serveur est une erreur ou quand l’appel a échoué.

Dans JQuery 3, il ne faut plus utiliser les méthodes callback suivantes : error(), success() et complete().

La documentation officielle décrit les paramètres supplémentaires et l’utilisation des méthodes callback. Par exemple, on peut passer un objet dans « data » à la place des différents paramètres. Au niveau des options, on peut notamment spécifier async: false, pour forcer l’attente de la réponse. Les possibilités sont nombreuses.

Tooltipster est un script permettant d’afficher des infobulles modernes, bien plus « user-friendly » que ce que proposent les navigateurs. Il nécessite JQuery pour fonctionner (attention que sous Internet Explorer 9 avec JQuery version 1.8, cela ne fonctionnera tout simplement pas!)

Poursuivre la lecture « [JS] Des infobulles avec Tooltipster 4 »

Coché et sélectionné

On utilisera le sélecteur « :checked« . Exemple :

if($('#monChampId').is(':checked')) 
{ 
  ... 
}

A noter qu’on pourra utiliser « :selected » pour des listes déroulantes, dans la méthode find par exemple, ou directement comme sélecteur.

$("#maComboId option:selected").text();

Récupération du parent (méthode)

$('#formTest').parent()

Récupère le parent du niveau direct inférieur. On peut aussi spécifier un filtre en tant que paramètre de la fonction, pour s’assurer de la nature du parent choisi.

Sélection par classe

var champ = $('.classe1');

Sélection par ID

var champ = $('#idChamp');

Sélection de champs sur l’attribut name

$('element[name="VALUE"]')

On peut notamment utiliser :

• ^= : commence par.
• $= : termine par.
• *= : contient.

La recherche peut être effectuée sur d’autres attributs (ex : id, type).

Traitement appliqué à X éléments

Utiliser la fonction find sur le parent (par exemple, un formulaire).

$('#formTest').find(
	'input[type=text].classe1, select.classe2'
)
.each(function() 
{ 
	// Traitement des champs 
	// (utiliser $(this) pour le champ parcouru). 
});

On peut envisager d’utiliser des sélecteurs qui contrôlent l’état.

$('#formTest').find(
	'select.classe2:visible:disabled, 
	input[type=radio]:not(:disabled)'
)
.each(function() { ... });

Ou même recherche sur un enfant…

$('#formTest').find(
	'div.classe1 > input[type=text]'
)
.each(function() { ... });

En savoir plus…

Les sélecteurs