Anthor.Net » jQuery

Ajax Queue avec jQuery

Anthor — Sun, 18 Oct 2009 09:19:54 +0000

En travaillant sur un nouvel outil ce week-end, je me suis rendu compte que l’utilisation des queues en Ajax avec jQuery n’était pas natif.
Il existe quelques pistes à ces adresses, mais rien de vraiment pratique :

Puis j’ai trouvé une version plus intéressante de celui-ci dans le plugin [jQuery Autocomplete|http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/|en], néanmoins, même si la fonction ABORT fonctionne correctement, mes appels en queue ne fonctionnaient pas.
J’en ai donc légèrement modifié les sources, en ajoutant un mode DEQUEUE me permettant de lancer la liste d’attente en fin de boucle par exemple.

Grâce à l’utilisation de la variable PORT, on peux ainsi contrôler indépendamment plusieurs queues, ou annuler des requêtes spécifiques, le tout en utilisant la fonction Ajax de jQuery.

Le plugin

/**
 * Ajax Queue Plugin
 */
(function($) {
    var ajax = $.ajax;
    var pendingRequests = {};
 
    $.ajax = function(settings) {
        settings = jQuery.extend(
            settings, 
            jQuery.extend(
                {}, 
                jQuery.ajaxSettings, 
                settings
            )
        );	
        var port = settings.port;
 
        switch(settings.mode) {
            case "abort": 
                if ( pendingRequests[port] ) {
                    pendingRequests[port].abort();
                }
                return pendingRequests[port] = ajax.apply(this, arguments);
 
            case "queue": 
                var _old = settings.complete;
                settings.complete = function(){
                    if ( _old )
                        _old.apply( this, arguments );
                    jQuery([ajax]).dequeue("ajax" + port );
                };
 
                jQuery([ ajax ]).queue("ajax" + port, function(){
                    ajax( settings );
                });
                return;
 
            case "dequeue": 
                jQuery([ajax]).dequeue("ajax" + port );
 
                if(jQuery.isFunction(settings.complete))
                    settings.complete(settings);
 
                return;
        }
 
        return ajax.apply(this, arguments);
    };
})(jQuery);

Utilisation de la méthode ABORT

$input.bind('keyup', function(event) {
    if($searchTimeout != undefined) {
        clearTimeout($searchTimeout);
    }
 
    $searchTimeout = setTimeout(function() {
        $searchTimeout = undefined;
 
        var inputVal = $input.val().replace(/^\s+/g,'').replace(/\s+$/g,'');
 
        $.ajax({
            mode    : 'abort',
            port    : 'ajaxSuggestions',
            type    : 'POST',
            url     : 'test.php',
            data    : { 'keywords': inputVal },
            success : function(msg) {
                alert(msg);
            }
        });
    }, 500);
});

Cette méthode est plus qu’intéressante dans le cas par exemple ou l’on souhaite afficher des informations au fur et à mesure que l’utilisateur écrit une information. Les requêtes précédentes utilisant le même port sont annulées au profit de la nouvelle requête, évitant un engorgement des informations et des erreurs dans le cas ou une requête ultérieure soit plus rapide que les précédentes.

Utilisation de la méthode QUEUE

for( i = 0 ; i <= 10 ; i++ ) {
    $.ajax({
        mode: 'queue',
        port: 'ajaxWhois',
        type: 'POST',
        url: 'test.php',
        data: { 'increment': i },
        success: function(msg){
            alert(msg);
        }
    });
}
 
$.ajax({ mode: 'dequeue', port: 'ajaxWhois' });

La méthode queue permet de boucler facilement sur plusieurs requêtes et ne les lancer qu’au moment choisit. Les requêtes ainsi lancées, le sont les unes à la suite des autres, évitant un engorgement des données reçues.

Jeu de bataille en Javascript, pour le fun !

Anthor — Sat, 10 May 2008 16:00:58 +0000

Juste pour le fun, une simulation d’une partie de jeu de carte, la bataille.
Version plugin pour jQuery, pas forcement optimisé, ni complet !

J’ai réalisé le test, en 1h30, une nuit d’insomnie, suite à une question sur JeuWeb

Le tout est visible ici : jQuery PlayCards

jQuery Progression 1.2.1

Anthor — Sun, 10 Feb 2008 08:45:54 +0000

Une nouvelle version de jQuery Progression ajoutant le support du plugin Easing pour jQuery, ainsi que l’animation du texte, permettant ainsi d’avoir une progression réelle de la barre de progression.

L’appel se fait toujours de la même manière. Une nouvelle démonstration vous permet de voir le rendu de ces deux nouvelles options.

Le temps d’animation correspond maintenant au temps total de l’animation pour parcourir la totalité de la barre de progression, ainsi l’animation garde une vitesse constante quel que soit la modification de valeur effectuée.

jQuery Progression

Anthor — Sun, 20 Jan 2008 11:00:40 +0000

Créé à la base lors de recherches pour un moteur de jeu de rôles par navigateur, jQuery Progression est maintenant disponible de façon indépendante.
Il nécessite l’utilisation de la librairie javascript jQuery.

Il dispose de nombreuse options de personnalisations, ainsi que d’une compatibilité avec le plugin MetaData.
Il est bien sûr totalement non obstrusif et fonctionne donc sur n’importe quel configuration.

Voir la page dédiée pour plus d’informations.

Moteur d’animations dynamiques avec jQuery et MySQL

Anthor — Mon, 16 Jul 2007 13:45:54 +0000

J’ai eu l’occasion de travailler sur une animation devant tourner au MEDPI 2007.
N’ayant pas les connaissances nécessaires pour le faire en utilisant Flash et MySQL, je me suis penché sur un moteur d’animation en Javascript.

J’utilise jQuery, un back-office interne pour le traitement de la base de données, et le tout se recompose aléatoirement en suivant l’ordre des produits !
3 modèles d’animations sont proposées.