Blog ArobaseErreur 404 – Ou pas !

Hier est sortie la dernière version du Framework jQuery. Pour ceux ne connaissant pas, je vous invite à vous rendre sur le site officiel ! Et selon le blog, ce ne sont pas moins de 83 bugs qui ont été fixés !

Voici une petite liste des changements les plus importants :

Réécriture du module Ajax

Le plus gros changement de cette mise à jour, qui corrige un grand nombre de lacunes qui existaient dans les versions précédentes.
Maintenant lors d’un appel à jQuery.ajax ( ou jquery.get, … ), la fonction ne se contente plus de faire un appel Ajax avec un callback prédéfinit. Elle fait sa requête Ajax, et retourne un objet jXHR.

L’objet jXHR bénéficie de toutes les propriétés / méthodes d’un objet XHR standard, et surtout l’objet Deferred.

Objets Différés

Grande nouveauté de jQuery 1.5, les objets différés ( deferred ). Le principe n’est pas des plus évidents à comprendre.
Cette API vous permet de travailler avec des valeurs de retour qui ne sont pas encore définies ( comme le résultat d’un appel Ajax asynchrone  ).

Elle permet aussi d’attacher plusieurs évènements à l’appel Ajax. Vous pourrez donc avoir plusieurs évènements qui se déclenchent lorsque l’appel Ajax aura terminé.

Voici un exemple avec le nouveau module Ajax et le deferred :

Avant on faisait notre appel Ajax, qui lançait son callback une fois terminé

$.ajax({
    url: 'exemple.php',
    success: function(results) {},
    error: function(xmlError) {}
}) ;

Maintenant, on configure l’appel Ajax et on le place dans l’objet jXHR.
Ce dernier possède des fonctions success, error, complete, que l’on peux appeler lorsque l’on veut, et plusieurs fois dans la page !

var jxhr = $.ajax({ url: "example.php" })
    .success(function() { alert("Succès !") ; })
    .error(function() { alert("Erreur") ; })
    .complete(function() { alert("Complet") ; }) ;
// Un peu de code
jxhr.complete(function() { alert('Deuxième exécution !") ; }) ;

Prenons maintenant un autre exemple. Nous avons deux fonctions, qui font chacune un appel Ajax. Nous voulons déclencher un évènement seulement quand les deux appels Ajax seront terminés. Nous allons donc implémenter le code suivant :

function fonction1() {
   return $.get('exemple1.html') ;
}

function fonction2() {
   return $.get('exemple2.html') ;
}

$.when(fonction1(), fonction2())
    .then(function() {
        console.log( 'Les deux requêtes sont terminées !' ) ;
    })
   .fail(function() {
      console.log( 'Une ou plusieurs requêtes ont échoué.' ) ;
   }) ;

Je vous renvoi sur l’excellent blog de Eric Hynds ( en Anglais ) qui a fait un tutoriel très complet.

jQuery.sub()

Cette nouvelle fonction permet de créer une nouvelle instance de jQuery pour y implémenter ses propres fonctions, tout en gardant l’instance principale de jQuery qui n’aura pas ces fonctions.

Cela permet aussi de modifier une fonction existante de jQuery sans toucher à l’originale.

Vu qu’un exemple vaut mieux qu’un long discours, en voici un tiré de la documentation officielle :

(function() {
    var myjQuery = jQuery.sub() ;

    myjQuery.fn.remove = function() {
        // Nouvelle fonctionnalité: Déclencher un évènement 'remove'
        this.trigger("remove");

        // Soyez sûr de lancer le 'remove' original !
        return jQuery.fn.remove.apply( this, arguments ) ;
    } ;

    myjQuery(function($) {
        $(".menu").click(function() {
            $(this).find(".submenu").remove() ;
        }) ;

        // Un nouvel évènement 'remove' est maintenant lancé depuis cette copie de jQuery
        $(document).bind("remove", function(e) {
            $(e.target).parent().hide() ;
        }) ;
    }) ;
})() ;

Je vous invite maintenant à aller voir l’annonce sur le blog officiel et surtout lire la doc des nouveautés.

Ce qui est sûr, c’est que j’ai hâte de pouvoir tester tout ça !

Cette entrée a été posté dans Développement, Javascript, jQuery, News et taggé , , . Enregistrer le permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Recherche par catégorie