jQuery DeboungeArgs helps you debounce function call while saving arguments. In an RIA environment it may be useful if you want to group http requests to the database.

Since jQuery has his own way of handling data storage, getting data via jQuery.data() from an iframe child element will always return an empty object if the data was set using the iframe's jQuery.

With jQuery AttributeObserver you can bind a callback that will be triggered when an element's attribute value change, and... that's it.

Or in other words: "How to fire real javascript events". But why? jQuery has already a trigger method for this kind of need ! If you can't get why you have to use this plugin. Try to inject jQuery on this Mootools demo page and run:
jQuery('#v_toggle').click(); //or .trigger('click')
Nothing happens... That's because Mootools & jQuery have their own way to create and fire events. They do this way to support bind namespacing, multiple binding ...

jQuery FireEvent allows you to fire real DOM events. Now, come back to the Mootools page, inject jQuery fireEvent plugin and run:
jQuery('#v_toggle').fireEvent('click');
Even if the v_toggle element was binded with some Mootools magic, because we're firing a real DOM event, all works great ! This plugin is really useful in high conflicted environment where we can't find if an element was binded by one or more javascript libraries.

Fork jQuery FireEvent on GitHub

Sometime (mostly in highly conflicted environement) you may want to know if $ is really a jQuery alias. Because $ can be an alias for Mootools too (and of course other libs).

Here is a way to detect jQuery:

Je développe depuis quelques heures un module web permettant de "monitorer" de manière générique les mouvements et actions d'un visiteur. L'objectif est de reproduire en temps réel via XMPP toutes ces actions dans un autre navigateur (donc DOM différent).

Je devais donc trouver un moyen d'identifier un élément de manière unique sur une page, puis de transférer cet "ID" au navigateur - de l'administrateur par exemple - afin que le module reproduise l'événement.

Il y a 2 ans (déjà!) j'avais développé une fonction permettant de trouver le chemin XPath d'un élément html. Voici une variation afin de trouver un possible sélecteur jQuery pour un unique élément HTML donné (et non à partir d'un $('a.className') car dans ce cas, le selector est simplement un attribut de l'objet jQuery: $('a.className').selector).

You may not have noticed but I've tweeted about jQuery 1.4 new features. Here is my selection of the best jQuery 1.4 brand-new methods:

#jQuery 1.4 .delay( duration, [ queueName ] ) method seems very useful ! http://api.jquery.com/delay/

#jQuery 1.4 .toArray(); //helper
toArray: function() { return slice.call( this, 0 ); }
#jQuery 1.4 .prevUntil() .nextUntil() .parentsUntil() ROCKS! http://bit.ly/5DDcsv //A new way for traversing the DOM :)

#jQuery 1.4 jQuery.noop() ? I Don't get the point... http://api.jquery.com/jQuery.noop/
noop: function(){}
#jQuery 1.4 .isEmptyObject(obj) //helper
isEmptyObject: function( obj ) { for ( var name in obj ) { return false; } return true; }

I've just published my first official (tiny) jQuery plugin: $.bindExist

Usage:
$('#myDiv').bindExist('click');//return false
$('#myDiv').bindExist('click.myNS');//return false

$('#myDiv').bind('click.myNS',function(){alert('Plop!');});

$('#myDiv').bindExist('click');//return true
$('#myDiv').bindExist('click.myNS');//return true

J’ai eu hier une question sur la manipulation des éléments radio en Javascript. La personne voulait vérifier que pour chacun de ses groupes de radio, au moins un radio était sélectionné.

Plusieurs solutions en Javascript “pur” existent sur Internet mais aucune ne semblait simple à appliquer par cette personne. Je propose donc ici quelques snippets jQuery pour exploiter simplement les éléments Radio.

Nous partirons donc d’une page incluant la librairie jQuery et le code XHTML suivant :

<form action="?" method="get" id="monForm">
<input type="radio" name="opt1" value="1" checked="checked" />
<input type="radio" name="opt1" value="2" />
<input type="radio" name="opt1" value="3"/>

<input type="radio" name="opt2" value="1" />
<input type="radio" name="opt2" value="2" checked="checked" />
<input type="radio" name="opt2" value="3" />

<input type="radio" name="opt3" value="1" checked="checked" />
<input type="radio" name="opt3" value="2" />
<input type="radio" name="opt3" value="3"/>
</form>

Accéder aux inputs de type radio en jQuery

Il existe plusieurs façon d’accéder aux inputs de type radio en jQuery, j’ai réalisé quelques tests afin de définir quelles expressions étaient les plus rapides :

Récupérer tous les inputs radios appartenant à un même groupe

$('input[type=radio][name=opt1]');//ici retourne 3 éléments input

Connaître si un groupe de radio à une valeur

$('input[type=radio][name=opt1]:checked').length; // Doit être égal à 1 si un radio à été sélectionné dans le groupe de opt1.

Vérifier que tous les radios ont été sélectionnés

$('input[type=radio]:checked').length; // Si au moins un radio est sélectionné pour chaque groupe, ce snippet retourne 3 (dans notre exemple)

Récupérer la valeur d’un groupe de radio

$('input[type=radio][name=opt1]:checked').attr('value'); //Retourne la valeur du radio sélectionné dans le groupe opt1. Retourne vide si aucun radio sélectionné

Un des problèmes récurrent avec Javascript est qu’il est difficile de savoir si une variable passée par référence ou par valeur.

En VB (VB6, VB.NET) il est possible de déclarer dans l’entête de la fonction by val ou by ref pour préciser le mode de passage mais ce n’est pas le cas en Javascript.

//Création de l'objet monObjet
var monObjet = new Object();

// monDeuxiemeObjet réfère à l'objet monObjet
var monDeuxiemeObjet = monObjet;

// On modifie une propriété du premier objet
monObjet.unePropriete = true;

// Les changements sont aussi appliqué sur le second objet
// (Le deuxième objet réfère au premier objet)
alert( monObjet.unePropriete === monDeuxiemeObjet.unePropriete );//affiche true

 

Dans cette exemple, la copie de monObjet dans monDeuxiemeObjet à été effectuée par référence, ce qui signifie que monDeuxiemeObjet pointe vers l’adresse de monObjet (même si la réalité est un peu plus complexe que cela…monDeuxiemeObjet pointe sur la référence de l’objet final monObjet mais c’est une autre histoire).

 

Seulement dans certains cas, il arrive que nous ayons besoin de réaliser une vrai copie. Par exemple sauvegarder monObjet dans une variable temporaire et effectuer des traitements uniquement sur cette variable sans que cela n’affecte monObjet. Dans certains cas là méthode que je vous propose n’est pas indispensable notamment dans le cas où l’objet à copier n’est pas complexe.

 

Heureusement jQuery intègre la méthode extend. Basiquement elle permet de gérer l’héritage d’un objet vers un à plusieurs autres objets. Mais elle permet aussi la copie profonde (deep copy) d’un objet vers un autre et donc une copie par valeur (et non plus par référence) via son paramètre optionnel “deep”.

 

jQuery.extend( [deep], target, object1, [objectN] )

 

//Création de l'objet monObjet
var monObjet = new Object();

var monDeuxiemeObjet = {};
$.extend(true,monObjet,monDeuxiemeObjet);//deep copy

// On modifie une propriété du premier objet
monObjet.unePropriete = true;

// Les changements ne sont pas appliqué sur le second objet
// monDeuxiemeObjet.unePropriete est indéfini
alert( monObjet.unePropriete === monDeuxiemeObjet.unePropriete );//affiche false

Ici, monDeuxiemeObjet ne réfère plus à monObjet. Ces deux objets possèdent chacun leurs propres adresses mémoires, il est ainsi possible de travailler sur l’un sans modifier l’autre.

Si vous développez et débuggez votre application sous Firefox et utilisez les méthodes de l’objet console de Firebug, tel que :

console.debug(maVariable);
console.info('Hello World :', monApplication.version);
console.log('Logged in');

Il vous est alors impossible de tester votre code en parallèle sous Internet Explorer, Opera et Chrome^[1] sans voir apparaitre un de ces messages :

/* IE */
Erreur : 'console' est indéfini

/* Opera */
Error:
name: ReferenceError
message: Statement on line 437: Undefined variable: console

/* Chrome (v1.x.xxx.x) */
Uncaught TypeError: Object #<a console="console"> has no method 'debug'

 

Commençons donc par un petit rappel sur les moyens de débug offert par ces différents navigateurs :

 

Internet Explorer

Il n’existe pas de console en natif qui propose les mêmes fonctionnalités que celles offertes par Firebug. Cependant des plugins tel que DebugBar devraient permettre cela.

 

Opera

Opera possède sa propre méthode postError() mais son utilisation est limitée car elle n’affiche pas le contenu des objets

opera.postError([1,2,3,4,5]);//Affiche: 1,2,3,4,5
opera.postError('Mon tableau',[1,2,3,4,5]);//Affiche: Mon tableau,1,2,3,4,5
opera.postError({maPropriete: 'Hello', maMethode : function(){return 'World';}});//Affiche: [object Object]

Google Chrome

Dans ses dernières versions (testé sous 2.0.156.1) Chrome supporte partiellement, via sa Console Javascript (Ctrl+Maj+J) les méthodes suivantes :

console.debug();
console.info();
console.log();

Partiellement car il est actuellement impossible de passer plusieurs objets/tableaux via un seul appel

monTableau = [1,2,3,4,5,6];
monObjet = {maPropriete : 'Hello', maMethode : function(){return 'World';}};
console.debug(monTableau,monObjet);//Affiche: [1, 2, 3, 4, 5, 6] Object
console.debug(monObjet);//Affiche le contenu de l'objet monObjet

La solution

Voici un bout de code (snippet) à placer avant tout appel aux méthodes console.debug, console.info et console.log.

//On créé l’objet console s’il n’existe pas (sous d’autre navigateur que Firebox & Chrome)
if(typeof console !== 'object')
     console = {};
if((typeof console.debug) !== 'function')//On pourrait aussi vérifier pour console.info et console.log
{
     if(typeof opera === 'object')//On redirige les appels vers opera.postError();
         console = {debug : function(){return opera.postError(arguments);}, info : function(){this.debug('[INFO] ',arguments);}, log :
function(){this.debug('[LOG] ',arguments);}};
     else//Ne rien afficher sur les autres navigateurs
         console = {debug : function(){return true;},info : function(){return true;}, log : function(){return true;}};
}

Il vous est maintenant possible de tester (voir même de debugger si vous êtes sous Chrome et/ou Opera) votre application sans vous soucier de supprimer les lignes de debug pour Firebug. Je vous conseille toutefois de placer ce bout de code dans l’événement DomReady afin d’éviter tout problème de chargement.

DomReady avec jQuery :

$(document).ready(function(){ /* bout de code à copier ici */ });

DomReady avec MooTools:

window.addEvent('domready', function() { /* bout de code à copier ici */ });

[1] Versions 1.x.xxx.x de Chrome

Voici plusieurs bouts de code qui vous permettrons de savoir si tel ou tel libraire est présente (mais pas forcément initialisées) dans une page web. Très utile lorsque vous devez réaliser un script reposant sur l'une de ces librairies, il vous est alors possible d'éviter de ré-inclure la librairie. Pour cela il suffit d'utiliser un bootstrap (Facebook appelle cela un bootloader).

bootstrap : petit programme d'amorçage qui permet d'en lancer un plus gros. (Wikipedia)

 

JQuery :

var JQuery_estPresent = (typeof jQuery != "undefined")?true:false;

Prototype :

var Prototype_estPresent = (typeof Prototype != "undefined")?true:false;

Mootools :

var MooTools_estPresent = (typeof MooTools != "undefined")?true:false;

YUI :

var YahooUI_estPresent = (typeof YAHOO != "undefined")?true:false;

Dojo :

var Dojo_estPresent = (typeof dojo != "undefined")?true:false;

 

Exemple d'utilisation via un BootStrap depuis une page web

var hasJQuery = (typeof jQuery != "undefined")?true:false;//retourne un booléen selon la présence de jQuery sur la page
var scrpt = document.createElement('script');
scrpt.src = 'http://monsite.com/script/monscript.js.php?' + (hasJQuery?'besoinDeJquery=true':'');//préparation de l'URL
document.body.appendChild(scrpt);//ajout du script


Le fichier monscript.js.php se chargera d'inclure ou non la librairie jQuery en fonction de la variable besoinDeJquery.

 

De nombreuses autres utilisations de ces informations sont bien entendu possible.

En "triffouillant" un peu sur le site de JQuery, j'ai découvert ces quelques lignes :

// Hehe.
if ( window.addEventListener ) {
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
window.addEventListener("keydown", function(e){
kkeys.push( e.keyCode );
if ( kkeys.toString().indexOf( konami ) >= 0 )
window.location = "http://ejohn.org/apps/hero/";
}, true);
}

On voit donc que :

1. Le script enregistre toutes les touches pressées au clavier dans un tableau kkeys 
2. Il vérifie à chaque fois si la combinaison de touche contenu dans konami à été saisie ou non, et si c'est le cas, la page est redirigée vers le jeu.

Si vous êtes de ceux qui préfère tester ce easter-egg plutôt que d'entrer directement l'adresse dans votre navigateur, il vous suffit d'appuyer sur les touches de votre clavier dans cet ordre depuis le site de JQuery :

• 2x flèche haut
• 2x flèche bas
• flèche gauche
• flèche droite
• flèche gauche
• flèche droite
• b
• a

Et voila !

Pour ma part je connaissais déjà ce Guitar Hero Like de John Resig (qui est le fondateur de JQuery) mais je dois avouer que j'ai été surpris par ces quelques lignes de code.

Ce tutorial est pour les utilisateurs intensifs de Gmail. Comme vous l'avez sans doute remarqué, il vous est possible, depuis Gmail, de spécifier une signature à inclure à tout vos emails (Options > Général > Signature) malheureusement Gmail refuse l'ajout de code html depuis cette méthode (même en créant soit même la requête de type POST que Gmail effectue lors de la sauvegarde de vos préférences). Voici donc comment créer un bookmarklet qui ajoutera directement dans votre message votre signature.

Avant de commencer sachez que des extensions Firefox (Better Gmail 2) et script Grease Monkey permettent déjà cela. Mais si vous êtes un utilisateur nomade utilisant plusieurs navigateurs sur différentes machines la solution du bookmarklet est beaucoup plus rapide à mettre en place et simple d'utilisation.

Nous utiliserons JQuery afin de pouvoir travailler très simplement avec Gmail. Le lanceur de notre bookmarklet est basé sur l'article de WebInventif. Une fois Jquery chargé, il ne reste plus qu'à placer notre code dans la fonction "code()" (voir le code final de l'article WebInventif).

Google utilise des iframes avec des id et des class changeantes à chaque rechargement de page pour éviter toute tentative de piratage automatisé (envoi d'email automatique par exemple). Nous ne pouvons pas directement accéder à un élément par son id ou sa class mais nous pouvons y accéder en fonction de ses éléments parents qui eux ne changeront pas ! De plus, après avoir parcouru le code html de la page d'édition d'email, on observe que le conteneur du texte de l'email est un élément body avec la class editable. Notre page Gmail contient 4 iframes la dernière appelée par un id canvas_frame (qui lui ne change pas) et qui contient l'iframe qui nous intéresse.

Pour accéder au contenu d'une iframe avec Jquery, nous devons utiliser le code suivant :

$('iframe').contents()

Ensuite pour recherche un élement à l'intérieur de cette iframe (par exemple une autre iframe) on ajoute la propriété "find" :

$('iframe').contents().find('iframe')

Ainsi pour accéder directement au contenu de notre email, il suffit de faire :

$('iframe#canvas_frame').contents().find('iframe').contents().find('body.editable')

Ou d'une manière plus générale

$('iframe').contents().find('iframe').contents().find('body')

Il ne nous reste plus qu'à ajouter notre signature après le dernier élément de body.

$('iframe').contents().find('iframe').contents().find('body').append('<a href="http://feeds.feedburner.com/%7Er/geekfg/%7E6/2"><img src="http://feeds.feedburner.com/geekfg.2.gif" alt="GeekFG Blog Rss Feed" style="border: 0pt none ;"></a>);

Le code final de notre bookmarklet est alors :

void ((function(){
if (!document.getElementById("Ijquery")) {
var noeud_js = document.createElement("script");
noeud_js.setAttribute("type", "text/javascript");
noeud_js.setAttribute("id", "Ijquery");
noeud_js.setAttribute("src", "http://code.jquery.com/jquery-latest.pack.js");
document.getElementsByTagName("head")[0].appendChild(noeud_js);
}
function jquery_loaded(){
var tmp = "false";
try {tmp = $("body").text();}catch (erreur) {tmp = "false";}
return tmp;}
function verif_loaded(){
var temp = jquery_loaded();
if (temp != "false") {
clearInterval(interval);
code();
}
}
var interval = window.setInterval(verif_loaded, 100);
function code()
{
$("iframe").contents().find("iframe").contents().find("body.editable").append('<a href="http://feeds.feedburner.com/%7Er/geekfg/%7E6/2"><img src="http://feeds.feedburner.com/geekfg.2.gif" alt="GeekFG Blog Rss Feed" style="border: 0pt none ;"></a>');
}
}
)())

Une fois que vous avez modifier votre signature dans le code ci-dessus, effectuez les étapes suivantes :

1. Allez ici, copier/coller y votre code, cliquez sur Encode
2. Copier le code généré
3. Créez un marque-page dans votre navigateur, allez dessus, supprimez l'ancienne adresse
4. Ajoutez javascript:, puis coller le code javascript qui vient d'être encodé
5. Enregistrez votre marque-page
6. Rendez-vous sur Gmail, créez un nouvelle email
7. Cliquez sur votre marque-page
8. Après quelques secondes votre signature doit s'ajouter

Voici le bookmarklet de l'exemple glissez-déposez-le (drag & drop) dans votre barre de lien puis allez sur Gmail pour tester.

#old