Utiliser jQuery et Ajax

Contenu

• Utiliser jQuery et Ajax

  • À propos de jQuery

    • Le $ de jQuery

    • Les fonctions dans jQuery

    • Sélecteurs

    • Méthodes et méthodes de rappel

    • Plugins disponibles pour PrestaShop

    • Quelques autres fonctions

  • Lancer des requêtes Ajax avec jQuery

    • À propos d'Ajax

    • Les méthodes Ajax de jQuery

Utiliser jQuery et Ajax

À propos de jQuery

jQuery est une bibliothèque JavaScript solide. Parmi ses nombreux avantages :

• fonctionne de manière prévisible sur de nombreux navigateurs web/

• propose une architecture claire, concise et intuitive.

• dispose de nombreux plugins.

Vous pouvez en apprendre plus sur jQuery sur le site officiel : http://jquery.com/

Le $ de jQuery

jQuery dispose d'une fonction $(), et d'un espace de nom $ qui contient de nombreuses autres fonctions.

La fonction $() peut être utilisée de différentes façons :

• En utilisant une fonction en paramètre, $() exécutera la fonction une fois que le DOM de la page sera totalement chargé. Par exemple : $(function(){ /* votre code */ });

• En utilisant une chaîne contenant un sélecteur CSS, $() renverra tous les noeuds HTML correspondant à ce sélecteur. Par exemple : $('ul#nav'); Cet ensemble de noeuds peut ensuite être assigné à n'importe laquelle des méthodes de jQuery. Par exemple, si vous souhaitez cacher l'élément de navigation renvoyé par le sélecteur ci-dessus : $('ul#nav').slideUp('fast');

• En utilisant du code HTML brut en paramètre, $() créera le noeud (élément DOM). Ce noeud peut, ici encore, être utilisé par n'importe laquelle des méthodes de jQuery : $("<li>Sign Off</li>").appendTo("ul#nav");

$() est tout au plus un raccourci vers la fonction jQuery(), propre à la bibliothèque. Elle existe dans le but d'accélérer la saisie. De nombreuses bibliothèques JavaScript utilisent également $() comme raccourci.

Si vous mélangez les bibliothèques dans votre thème, il serait préférable d'indiquer à jQuery de ne pas utiliser $(). Appelez simplement $.noConflict(), et de là, n'importe quel appel jQuery nécessitera que vous utilisiez jQuery() au lieu de $().

Vous pouvez en apprendre plus sur jQuery() and $() sur le site officiel : http://api.jquery.com/jQuery/

Les fonctions dans jQuery

L'espace de nom $ de jQuery contient toutes les fonctions qui ne sont pas attachées à un noeud spécifique.

Parmi ceux-ci se trouvent quelques fonctions Ajax ou utilitaires. Par exemple :

$.post('/handler.php', {'action': 'purchase', 'product': 434}, function(data){/* do something */} );

Vous pouvez attacher des évènements à un jeu de noeuds renvoyé par $(). L'un des avantages d'utiliser jQuery, une fois de plus, est de ne pas devoir adapter son code en fonction des spécificités de chaque navigateur lorsque l'on doit gérer les évènements.

Pour associer une fonction à un évènement de clic, ajoutez simplement .click(function).

Pour générer un évènement de clic, vous pouvez également utiliser .click() avec n'importe quel paramètre. Par exemple : $('#button').click(function(){/* do something */});

Vous pouvez en apprendre plus sur les fonctions Ajax et utilitaires de jQuery sur le site officiel :

• http://api.jquery.com/category/ajax/ (par exemple, http://api.jquery.com/jQuery.post/)
• http://api.jquery.com/category/utilities/

Sélecteurs

jQuery propose deux méthodes de sélectionner des éléments de la page :

• Combiner des sélecteurs CSS et XPath dans une chaîne, qui sera utilisée avec la fonction $(). Par exemple : $("div > ul a")

• Utiliser l'une des nombreuses méthodes déjà disponibles dans l'espace de nom de jQuery.

Ceux deux méthodes peuvent être combinées :

var my_jQuery_object = $("#my_image");
var my_jQuery_object = $("#menu a");
var my_jQuery_object = $("#id > .classe, #id td:last-child"); 
    
/* renvoie les elements 'td' contenus dans un 'tr' impair	. */
var my_jQuery_object = $('tr:odd td');
    
/* renvoie le 4e paragraphe. */
var my_jQuery_object = $("p:eq(4)");
    
/* renvoie les 7 premiers paragraphes. */
var my_jQuery_object = $("p:lt(8)");

Vous pouvez en apprendre plus sur les électeurs de jQuery sur le site officiel : http://api.jquery.com/category/selectors/

Méthodes et méthodes de rappel

Un grand nombre de méthodes sont disponibles dans l'API standard : manipulation du DOM, manipulation des CSS, gestion des évènements, effets visuels, etc.

Par exemple, si vous souhaitez que tous les paragraphes disparaissent petit à petit, utilisez ceci :

$("p").fadeOut();

Certaines méthodes (telle que fadeOut()) acceptent de prendre une méthode en paramètre. Une telle méthode sera executée une fois que la première méthode aura terminé son exécution. C'est ce qu'on appelle une méthode de rappel.

Par exemple :

$(".test").fadeOut("slow",function(){ 
  $(this).fadeIn("slow"); 
});

Toutes les méthodes de jQuery renvoient un objet jQuery. Cela permet d'enchaîner les méthodes, sans limite. Vous pouvez même écrire votre code de telle manière qu'il se lise comme un bloc de fonction.

Par exemple, ce code fonctionne parfaitement bien, et est aussi facile à lire qu'à mettre à jour :

$(".emptyContent").append("This is a test")
  .css("border", "1px solid red")
  .addClass("fullContent")
  .removeClass("emptyContent");

Plugins disponibles pour PrestaShop

Voici une liste des plugins jQuery disponibles dans l'installation par défaut de PrestaShop :

Nom du fichier du plugin	Description du plugin
jquery.colorpicker	Sélecteur de couleur de type Photoshop.
jquery.cookie-plugin	Pour lire, écrire et supprimer des cookies.
jquery.dimensions	Pour gérer la dimension d'un élément.
jquery.easing	Pour gérer la vitesse des animations.
jquery.excanvas	Pour modifier le canvas d'un élément (coins arrondis / dégradés / opacité / dessin de ligne, etc.).
jquery.fieldselection	Pour lire et remplacer un texte sélectionné dans une zone.
jquery.flip	Pour retourner un élément.
jquery.flot	Pour créer des graphiques représentants des données en abscisses et en ordonnées, en courbes, en barres, etc.
jquery.highlight	Pour ajouter un effet de coloration syntaxique.
jquery.hoverIntent	Pour ajouter un effet de prédiction sur l'événement hover de jquery.
jquery.idTabs	Gestionnaire d'onglets.
jquery.ifxtransfer	Animation d'un élément avec transfert (déplacement) d'un container à un autre.
jquery.jqminmax	Permet d'ajouter min-width, max-width, min-height and max-height sur tous les navigateurs.
jquery.pngFix	Pour gérer la transparence sur IE 5.5 et IE 6.
jquery.scrollTo	Pour les animations de type défilement (scroll) d'un élément.
jquery.serialScroll	Pour les animations de type défilement (scroll) d'une série d'élément.
jquery.tablednd	Pour le Drag and Drop des lignes d'un tableau.
jquery.typewatch	Pour exécuter une fonction lorsque l'utilisateur a tapé du texte dans une zone et a cessé de taper pendant un certain laps de temps.
jquery.validate-creditcard	Pour vérifier un numéro de carte en fonction de son type.

Quelques autres fonctions

L'API de jQuery est incroyablement complète, et vous passerez de nombreuses heures à en explorer les possibilités.

Voici deux fonctions qui peuvent se révéler très utiles lors de la création d'un thème.

Tout d'abord, each(), qui vous permet de boucler dans une liste d'éléments :

$("img").each(function(){ console.log($(this).attr("src")); });

Ensuite, browser, qui est un objet qui vous aide à savoir le navigateur auquel vous avez affaire :

if($.browser.msie) {
  if($.browser.version == 6) {
    // Votre code spécifique à IE6.
  } else {
    // Votre code pour les autres versions d'Internet Explorer.
  }
}

Lancer des requêtes Ajax avec jQuery

À propos d'Ajax

Le terme "Ajax" est en fait un acronyme pour Asynchronous JavaScript and XML – JavaScript et XML non synchronisés. Il décrit l'utilisation de JavaScipt pour changer du nouveau contenu dans la page en cours sans devoir recharger la page en entier. Le processus est asynchrone parce qu'une fois que la requête Ajax a été envoyée au serveur web, le navigateur n'a pas à attendre le retour pour pouvoir lancer d'autres tâches. Le contenu transféré n'a pas à être au format XML : il peut utiliser du JSON, du HTML ou du texte brut.

Dans les faits, Ajax permet de créer des sites très dynamiques.

Vous pouvez en apprendre plus sur la techniques Ajax avec les sites suivants :

• Wikipedia: http://fr.wikipedia.org/wiki/Ajax_%28informatique%29
• Mozilla Developer Network: https://developer.mozilla.org/en/docs/AJAX

À propos de JSON

Acronyme de JavaScript Object Notation (notation Objet JavaScript), JSON est le format d'échange le plus utilisé avec la technique Ajax, principalement pour deux raisons : il est considéré comme plus léger que XML, et il peut très facilement s'intégrer dans du code JavaScript, étant donné qu'il ressemble à un sous-ensemble de ce langage. Vous pouvez en apprendre plus sur JSON sur les sites suivants :

• http://json.org/json-fr.html
• http://fr.wikipedia.org/wiki/JavaScript_Object_Notation
• https://developer.mozilla.org/en-US/docs/JSON.

Comment utiliser Ajax au sein de PrestaShop

Par défaut, les contrôleurs de PrestaShop rechargent toute la page lors de leurs traitements.

Une fois que PrestaShop a détecté le paramètre "ajax" dans une requête GET ou POST, la propriété ajax du contrôleur est passée à true : $this->ajax = true;.

Par exemple, si votre code déclenche une adresse comme : http://...&ajax&action=updatelist ...le contrôleur exécutera alors la méthode displayAjaxUpdateList() si elle existe. Si elle n'existe pas, il exécutera la méthode displayAjax() (par défaut).

Vous devez alors inclure le code qui prendra l'appel Ajax en compte. Voici comment écrire une simple requête Ajax utilisant jQuery :

var query = $.ajax({
  type: 'POST',
  url: baseDir + 'modules/mymodule/ajax.php',
  data: 'method=myMethod&id_data=' + $('#id_data').val(),
  dataType: 'json',
  success: function(json) {
    // ....
  }
});

Et voici comment le script ajax.php doit fonctionner :

// Located in /modules/mymodule/ajax.php
require_once(dirname(__FILE__).'../../../config/config.inc.php');
require_once(dirname(__FILE__).'../../../init.php');
switch (Tools::getValue('method')) {
  case 'myMethod' :
    die( Tools::jsonEncode( array('result'=>'my_value'));
    break;
  default:
    exit;
}
exit;

Comme vous pouvez le voir dans le code ci-dessus, l'objet Tools de PrestaShop contient la méthode jsonEncode(), qui facilite la transformation d'un tableau PHP en objet JSON :

public function displayAjax() {
  $return = array(
    'hasError' => true,
    'errors' => 'Ceci est le message'
  );
  die(Tools::jsonEncode($return));
}

Les méthodes Ajax de jQuery

jQuery.ajax(url [, settings ] )

Paramètres :

• url : l'adresse à laquelle la requête doit être envoyée

• settings : options et fonctions

Quelques options :

• async (booléen) : true par défaut

• type : 'GET' par défaut

• cache (booléen) : true par défaut

• data : tableau GET envoyé au serveur

• dataType : au choix, xml, json, script ou html

Quelques fonctions :

• beforeSend : déclenché par l'appel Ajax

• error : en cas d'erreur

• success : en cas de succès

• timeout : en cas d'abandon

• complete : déclenché après un succès ou une erreur, quel que soit le résultat

Vous pouvez en apprendre plus sur ajax() ici : http://api.jquery.com/jQuery.ajax/

Alternative : jQuery.load(url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

Cette méthode est utilisée pour charger directement le résultat HTML d'un appel Ajax, et le placer directement dans l'élément ciblé de la page en cours.

Par exemple :

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

Alternative : jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

Cette méthode vous permet d'appeler un script Ajax avec une requête HTTP GET. C'est l'équivalent de l'appel Ajax suivant :

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Valeurs de retour d'un appel Ajax

Toutes les méthodes jQuery renvoient un objet jqHXR, qui est une extension de l'objet XMLHTTPRequest. Cet objet permet de déclencher diverses fonctions selon le résultat de l'appel :

• Succès : jqXHR.done(function(data, textStatus, jqXHR) {});

• Erreur : jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});

• Succès ou Erreur: jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown){ });

• Succès ET Erreur: jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {});

Voici l'exemple d'appels de fonction dépendant du résultat de la requête :

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.get("example.php", function() {
  alert("success");
})
.done(function() { alert("second success"); })
.fail(function() { alert("error"); })
.always(function() { alert("finished"); });

// perform other work here ...
// Set another completion function for the request above
jqxhr.always(function(){ alert("second finished"); });