Classement avec JQuery et Ajax

Classement avec JQuery et Ajax

Un nouveau tutoriel pour vous expliquer comment classer des données issues d’une base MySQL avec un enregistrement à la volée grâce à Ajax.

Pour commencer, on a besoin de JQuery UI, que l’on télécharge ici.

Pensez à sélectionner votre thème en haut de la colonne de droite. Pour ma part, j’ai choisi le thème Redmond. Après avoir dézippé le dossier, copier les dossiers js et css dans votre dossier de travail.

Ensuite il va falloir créer 2 fichiers supplémentaires : index.php qui contiendra la majorité du script et ajax.php pour l’enregistrement dans la base de données.

Dans un premier temps, vous devez créer une table :

CREATE TABLE IF NOT EXISTS `classement_items` (`id` int(11) NOT NULL auto_increment, `titre` varchar(100) NOT NULL,`ordre` tinyint(4) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;
INSERT INTO `classement_items` (`id`, `titre`, `ordre`) VALUES(1, 'Item 1', ''), (2, 'Item 2', ''),(3, 'Item 3', ''),(4, 'Item 3', ''),(5, 'Item 3', ''),(6, 'Item 3', '');

Une fois cette opération effectuée, on va pouvoir s’occuper du fichier index.php.

Avant :

<html>

Ajouter les informations de connexion à la base de données :

<?php
$bdd = "nom_bdd";
$hote = "nom_hote";
$user = "nom_user";
$password = "mot_de_passe";
$connect = mysql_connect ($hote, $user, $password);
mysql_select_db($bdd);
?>

Dans le head, ajouter :

<link type="text/css" rel="stylesheet"href="css/redmond/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>

Nous venons d’ajouter le css pour le thème Redmond, le script de JQuery, ainsi que les composants UI qui nous permetront d’effectuer notre classement.

Nous allons maintenant afficher nos items en exécutant une requête.

Après :

<body>

Ajouter :

<?php
$req = "SELECT id, titre, ordre FROM classement_items ORDER BY ordre";
$rep = mysql_query($req);
while ($row = mysql_fetch_array($rep)) {
   echo $row['titre'];
}
?>

Voir le résultat

Comme vous pouvez le notez, ce n’est pas très esthétique. On va styliser l’ensemble pour rendre les items plus présentables.

Avant :

</head>

Ajouter la fonction qui nous permettra d’utiliser de classer les éléments :

<script type="text/javascript">$(function() {
    $("#sortable").sortable({
        placeholder: "fond",
    })    
    $("#sortable").disableSelection();
});
</script>

Remplacer :

while ($row = mysql_fetch_array($rep)) {
   echo $row['titre'];
}

Par :

echo "<ul id=\"sortable\">\n";
while ($row = mysql_fetch_array($rep)) {
     echo "<li>".$row['titre']."</li>\n";
}
echo "</ul>\n";

Ouvrir le fichier jquery-ui-1.8.2.custom.css dans le dossier css/redmond/ et ajouter tout en bas :

ul#sortable { list-style: none; padding: 0; margin: 0 }
ul#sortable li, ul#sortable li.fond { padding: 5px; border: 1px solid #666;margin: 1px 1px 5px; font: normal 14px verdana; width: 100px; height: 20px;color: #666; background: #f0f0f0; cursor: move }
ul#sortable li.fond { background: #fbec88; }

Voir le résultat

C’est déjà bien plus sympa :-)

Vous noterez qu’au passage, il devient possible de déplacer les items pour les classer. Le fond jaune en arrière plan est obtenu grace à la classe fond. De ce fait, nous avons ajouté le paramètre placeholder dans la fonction sortable afin d’indiquer la classe utilisée pour le fond.

Maintenant si vous classez les items et que vous actualisez la page, vous noterez que ces derniers retrouveront leur place d’origine.

En contrôlant la base de données on s’aperçoit que tous les ordres sont à 0.

Nous allons remédier au classement des items en ajoutant une fonction ajax à la fonction sortable et créer le fichier ajax.php qui se chargera d’effectuer l’enregistrement dans la base de données. Cela nous évitera de cliquer sur un bouton pour enregistrer les données.

Après :

placeholder: "fond",

Ajouter :

update : function(){
    var order = $("#sortable").sortable("serialize");

    $("#maj").load("ajax.php?"+order);
}

Avant :

echo "<ul id=\"sortable\">\n";

Ajouter la div maj :

echo "<div id=\"maj\"></div>\n";

Remplacer :

echo "<li>".$row['titre']."</li>\n";

En ajoutant l’identifiant de chaque enregistrement de la BDD :

echo "<li id=\"item_".$row['id']."\">".$row['titre']."</li>\n";

Après :

echo "</ul>\n";

Ajouter :

echo "<form action=\"\" method=\"post\">\n";
echo "<input type=\"hidden\" name=\"sortable\" />\n";
echo "</form>\n";

Créez à présent le fichier ajax.php qui va contenir la requête de mise à jour des ordres, item par item.

Ajouter dans le fichier ajax.php :

<?php 
// Connexion a la BDD
$bdd = 'nom_bdd';
$hote = '
nom_hote';
$user = 'nom_user';
$password = 'mot_de_passe';
$connect = mysql_connect ($hote, $user, $password);
mysql_select_db($bdd);

// Requete de mise a jour
foreach ($_GET['item'] as $position => $item) {
    $req = "UPDATE classement_items SET ordre=".mysql_real_escape_string($position)." WHERE id=".mysql_real_escape_string($item);
    $rep = mysql_query($req);
}
?>

Voir le résultat

Si vous actualisez votre page, vous constaterez que les items restent classés :-)

On vérifie que tout est OK côté BDD :

Les items sont maintenant classés par ordre.

Je vous laisse digérer ce tuto et n’hésitez à envoyer vos commentaires :-)

EDIT : MAJ du 3/12/2013

Attention, le classement expliqué dans ce tutoriel ne fonctionne plus avec la dernière version de JQuery.

0 0 0 0

11 réflexions sur ce billet

Bonjour,

J'ai suivi avec grand intérêt votre tutoriel.
Je l'ai un peu adapté à mon besoin car j'avais besoin de pouvoir classer plusieurs

donc, j'ai remplacé vos id par des class.

La première partie fonctionne bien, cependant, je n'arrive pas à mettre à jour l'ordre des items en base de donnée.

J'utilise CakePHP donc, je ne sais pas trop comment manipuler de l'AJAX avec ce framework car je ne l'ai jamais fait.

Auriez vous une idée pour solutionner mon problème ?

N'hésitez pas à me contacter par mail au besoin pour davantage d'informations.

Félicitations au passage pour votre blog, ce tuto est excellent :)

Jean

Bonsoir Jean

Je n'utilise pas du tout CakePHP donc je ne vais pas vous être d'une grande utilité ;)

Écrit par Etienne
Le 29/05/2011 à 23h58

Bonsoir,

Je ne comprends pas d'où vient le name "item" passé en get dans le foreach. Et comment traduire ce get en tableau. Pourrais tu m'éclairer ?

Merci et encore bravo pour ton travail.

Écrit par Hervé
Le 30/05/2011 à 00h13

On récupère l'item dans l'id du li.

Pourquoi cherches-tu à le traduire en tableau et quel est l'intérêt dans ce cas ?

Écrit par colrypem
Le 19/10/2013 à 20h21

J'arrive meme pas à l'étape 2. Ça me drag que la 1ère div, et pas la totalité de celle ci, mais que des éléments dedans. Bizarre.

Écrit par colrypem
Le 19/10/2013 à 21h26

Alors j'ai bien suivi le tuto (très bien expliqué), MAIS (et oui), j'ai une erreur lors de la modification d'un item :

Warning: Invalid argument supplied for foreach() in ***ajout40maj.php on line 9

Je ne comprends pas ce que $position est en fait ? Il sort d'où ?

Merci

Écrit par Hervé
Le 19/10/2013 à 21h30

Colrypem

$position est la récupération du GET['item'] dans le foreach. Voir ci-dessous :

foreach ($_GET['item'] as $position => $item) {

Sans voir le contenu du fichier ajout40maj.php, difficile de t'aider davantage.

Écrit par colrypem
Le 19/10/2013 à 22h11

Re bonsoir,

Je viens de vérifier, votre fichier ajax.php dans les exemples-démos a le même problème, et cependant, votre version fonctionne... Comment faites vous ?

Merci encore

Écrit par Hervé
Le 19/10/2013 à 22h15

Je viens de tester et cela fonctionne.

Écrit par colrypem
Le 19/10/2013 à 22h17

Je suis chez OVH en hébergement mutualisé, est ce que ça peut etre lié ?

J'ai toujours cette erreur pourtant : Warning: Invalid argument supplied for foreach() in ***/ajoutop40maj.php on line 9

Écrit par colrypem
Le 20/10/2013 à 11h47

Bonjour,

Ça fonctionne ! Alors en fait j'avais fais 2 erreurs. La 1ère, je fermais la div maj dans ce tuto, après le while de la requête SQL, au lieu de la fermer juste après. La 2nde est une erreur dans votre tuto.

Franchement merci beaucoup pour ce magnifique tuto ! Très bon travail !

Écrire un commentaire

Pseudo

E-mail (non publié)

Votre commentaire

Recevoir une notification par e-mail lorsqu'une réponse est postée

Veuillez recopier le code de sécurité : 5ctu8tjbt9

Haut de page