skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

vendredi 23 juillet 2010

Classer des éléments du DOM avec jQuery

Publié par Infinite Loop, à 18 h 05 0 commentaire

Pourquoi des éléments du DOM ? Le besoin vient généralement du fait que des éléments doivent être classés dans un ordre précis et qu'il n'y a pas mieux que de pouvoir le faire dans l'interface en les faisant glisser à l'aide de la souris. C'est convivial et tellement mieux que d'essayer de maintenir un ordre avec n'importe quelle autre technique.

J'avais expérimenté l'effet sortable avec Prototype et Scriptaculous mais depuis le virage vers jQuery, c'était mon premier essai avec la librairie. Je mets à votre disposition un exemple fonctionnel en guise de snippet de départ qui utilise jQuery UI sortable.

La première chose à faire est de lier à la page les librairies jQuery et jQuery UI :

<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.2.custom.min.js"></script>
J'ajoute un peu de CSS pour créer un visuel plus attrayant pour la liste à classer :
<style type="text/css" media="screen">
#list{
/* annuler l'indentation */
marign-left: 0;
padding-left: 0;

list-style: none;
}

.item{
/* annuler l'indentation */
marign-left: 0;
padding-left: 0;

padding:5px;
margin:5px;
border:1px solid black;
background-color: #ececec;
width: 300px;

/* curseur de la souris lorsqu'on se trouve sur un item déplaçable */
cursor: move;
}
</style>
Je génère dynamiquement des éléments de la liste pour le HTML à l'intérieur du formulaire (l'index numérique pourrait correspondre à une clé primaire de la base de données) :
<form id="frmList" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post">

<ul id="list">
<?php for($i=1; $i<=5; $i++){ ?>
<li class="item" id="li_<?php echo $i; ?>">
<input type="text" id="input_<?php echo $i; ?>" name="input_<?php echo $i; ?>" value="Bloc <?php echo $i; ?>" />
</li>
<?php } ?>
</ul>

<input type="button" id="btnSubmit" name="btnSubmit" value="Enregistrer" />
</form>
Remarquez ici, ce sont les conteneurs LI qui seront réordonnés. Comme ils contiennent des champs de saisie portant le même index, ce sont les noms de ces champs qui seront postés au script PHP.

Au chargement de la page, j'ajoute le JavaScript d'initialisation. Pour suivre la trace de ce qui se passe dans Firebug, je définis une fonction optionnelle onDrop() qui sera appelée lorsque l'item sera déposé à sa nouvelle position.
var $j = jQuery.noConflict();

$j(document).ready(onLoad);

function onLoad(){
$j('#list').sortable({ 'update': onDrop });
$j('#btnSubmit').click( onSubmit );
}

function onDrop(){
console.log('order has changed');
}

function onSubmit(){
$j('#frmList').submit();
}
En appelant toArray sur sortable() on récupérera côté client les ID des LI (li_[1-n]) :
var arr = $j('#list').sortable('toArray');
Dans ce cas, onSubmit pourrait d'abord récupérer les ID des LI selon l'ordre affiché, extraire l'index (la portion numérique) et composer une liste CSV du type "1,3,5,4,2" qui pourrait être stockée dans un champ caché du formulaire :

HTML
<input type="hidden" id="items_order" name="items_order" value="">
JavaScript
function onSubmit(){
var arr = $j('#list').sortable('toArray');

$j(arr).each(
function(i, e){
// arr est utilisé en "closure"
arr[i] = e.replace('li_', '');
}
);

$j('#items_order').val( arr );
$j('#frmList').submit();
}
La fonction ci-dessus utilise each() de jQuery pour boucler sur les éléments. On aurait aussi pu l'écrire avec cette fonction équivalente qui utilise map() de jQuery :
function onSubmit(){
var arr = $j('#list').sortable('toArray');

arr = $j(arr).map(
function(){
return this.replace('li_', '');
}
);

$j('#items_order').val( arr.get().join(',') );
$j('#frmList').submit();
}
Dans les deux cas, PHP recevra la valeur CSV sous la variable $_POST['items_order']. Vous pourrez convertir la string en array avec explode().

Par contre, si ce qui vous intéresse est d'obtenir par PHP les valeurs des champs de saisie selon le classement, les clés reçues seront placées dans l'ordre à l'intérieur de la variable $_POST. Il suffira de boucler sur la liste pour les récupérer dans l'ordre (pour faire simple, vous pourrez par exemple passer les clés une par une et vous assurer que son nom commence par "input_" avant de récupérer la valeur). Peu importe comment vous l'implémenterez, ça ouvre la porte à une panoplie de solutions originales. Laissez aller votre créativité !


Tags: JavaScript

0 réponse à "Classer des éléments du DOM avec jQuery"


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (55)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ▼  juillet 2010 (35)
        • Les Inuits débarquent sur le web
        • Boucler sur des propriétés JSON
        • Nettoie tes oreilles ou articule quand tu parles!
        • Redémarrer l'univers
        • En quête de la tablette Android
        • Fabriquer un coin-coin en papier
        • Citation no. 92 sur l'Amazonie
        • Règlement de la route farfelu en Ontario
        • Classer des éléments du DOM avec jQuery
        • Grrrrr, bark, woof !
        • Lister les champs d'une table PostgreSQL par SQL
        • Séparés à la naissance : Georges Laraque et Vigo
        • Évaluation des variables en PHP
        • Corona glacée instantanément
        • Linux : pourquoi locate est plus rapide que find
        • Citation no. 91 sur l'appartement
        • Autres références à Hitchhiker's Guide to the Galaxy
        • Dictionnaire Français - Francine
        • Performance de Zend_ACL
        • Quand j'étais petit, j'étais con
        • L'âne de Sam Loyd
        • Super Mario Bros et la réalité augmentée
        • Origine du Babel Fish
        • Citation no. 90 sur les fesses
        • Ouvrir un PDF à la bonne page par le shell
        • La 9ème vie d'Internet Explorer
        • Tap Tap Revolution sur la guitare
        • Redirection .htaccess ASP vers PHP
        • Comme une odeur de Milliblatts
        • Un peu de simplicité volontaire
        • Installer XDebug pour PHP
        • Citation no. 89 sur les fonctionnaires
        • Performance de Zend Framework
        • Réinventer la roue en programmation
        • Pourquoi il y a si peu de femmes ingénieures
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (429)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (36)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft