Mémoriser l'ordre des 'li' [Résolu]

[ndmsp]

Bonjour,
Depuis un moment, je cherche à faire quelque chose, mais je n'y arrive pas. Je place tout de suite le contexte: je ne connais pas le javascript (ca viendra !!).
J'utilise le plugin sortable en Jquery, que j'applique avec une liste.
Je modifie comme je veux, mais après, je voudrais enregistrer dans ma base de donnée. J'ai trouvé ce sujet sur le même forum.
J'ai très bien compris la logique, mais je ne sais pas comment envoyer le bon ordre à mon script php. En fait, il ne me manque que la partie JS, puisque je n'ai pas de problèmes avec le php pour l'instant.
Si quelqu'un avait 5mn à m'accorder, ca m'aiderait énormément !!!
Merci et bonne année !!

[danielhagnoul]

Envoyé par ndmsp

Je place tout de suite le contexte: je ne connais pas le javascript (ca viendra !!).

Je place tout de suite le contexte, vous devez apprendre dans l'ordre :

• le CSS
• le HTML
• le DOM
• le JavaScript
• le jQuery
• le plug-in sortable

Revenez ensuite poser une question, accompagnée d'un code, sur le point qui vous bloque.

[ndmsp]

Vous devez apprendre dans l'ordre:

• La politesse: un bonjour est toujours agréable

• L'accueil: c'est la première fois que je viens sur le forum, c'est super agréable

Et après vous pourrez vous pourrez vous considérer comme "modérateur"
Si quelqu'un ayant un esprit un petit peu plus ouvert connait une solution, je suis preneur !
Merci !

[Bovino]

ndmsp : étonnament, Daniel Hagnoul n'est pas "que" modérateur, il est aussi l'un des membres qui aide le plus sur le forum jQuery.
Donc que sa réponse ne te convienne pas est une chose, mais relis ta question et demandes-toi quelle aide on peut te donner ! Tu ne montre aucun code ni aucune base sur laquelle commencer à t'apporter un début de réponse.

[ndmsp]

Bonjour
Je suis persuadé que Daniel est une des personnes aidant le plus sur ce forum, mais il faut reconnaître que sa réponse n'a pas grand chose de constructif.
J'ai bien relu mon premier message, et puisque tu ne l'as pas compris, je le reformule en d'autres termes:
Je voudrais utiliser le plugin Sortable en Jquery. En html, je crée une liste, rien de bien sorcier. Je vous met le code:

Code :

1
2
3
4
5
6
 
<ul id="sortable">
 <li>élément 1</li>
 <li>élément 2</li>
 ...
</ul>

Et le javascript:

Code :

1
2
3
4
5
6
7
 
<script>
	$(function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
	</script>

Je voudrais connaitre la marche à suivre pour envoyer l'ordre des éléments à ma page php. Je ne peux pas la construire tant que je ne connais pas la partie JS.
Quelqu'un peut-il m'aider ?
Merci

[SpaceFrog]

Le moyen le plus simple serait de coller au depart des id à tes li avec un incrément

Code :

1
2
3
4
5
6
 
    <ul id="sortable">
            <li id="li_0" class="li_item"> Item 1</li>
            <li id="li_1" class="li_item"> Item 2</li>
            <li id="li_2" class="li_item"> Item 3</li>
    </ul>

et de créer ta propre fonction de reset

Code :

1
2
3
4
5
   function resetOrder(){
        for(i=0;i<$('.li_item').size();i++){
            $('#sortable').appendChild($('li_' + i));
        }
     }

Il est possible egalement de stocker la position d'origine non pas dans un id incrémenté mais dans le data() du li, le reset se fera alors sur le data...

[ndmsp]

Bonjour,
Pour moi, c'est un peu du chinois... Comme je le disais avant, je ne connais pas du tout le JS, donc je ne sais pas me servir d'une fonction...
J'ai encore chercher, et j'ai enfin trouver une piste: ici.
Pour les intéressés, la solution que je cherchais était là:

Code :

1
2
3
4
5
6
7
8
9
10
$(document).ready( function(){ // quand la page a fini de se charger
  $("#list-photos").sortable({ // initialisation de Sortable sur #list-photos
	placeholder: 'highlight', // classe à ajouter à l'élément fantome
	update: function() {  // callback quand l'ordre de la liste est changé
		var order = $('#list-photos').sortable('serialize'); // récupération des données à envoyer
		$.post('ajax.php',order); // appel ajax au fichier ajax.php avec l'ordre des photos
	}
  });
  $("#list-photos").disableSelection(); // on désactive la possibilité au navigateur de faire des sélections
});

Ce code sert à envoyer les données à chaque fois que la page est modifier. J'adapterais le code php en fonction de mes besoins. Une fois fini, je le posterai ici.
Cependant, je ne le développerais pas maintenant, pcq comme je le disais à Daniel, je n'ai que 15 ans, et demain...
Merci de votre aide à tous !!

[SpaceFrog]

au demarrage tes mlis n'ont pas d'id ?

ben donne leurs en un avec une boucle each()

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
$(function(){
		var increment=1
		$('#sortable li').each(function(){$(this).attr('id','li_'+increment++)})
		$('#sortable li').click(function(){ alert($(this).attr("id"))})
	});
	</script>
</head>
<body >
<ul id="sortable">
 <li>élément 1</li>
 <li>élément 2</li>
 
</ul>

[ndmsp]

Bonjour,
Si des personnes sont intéressés pour faire la même chose, j'explique comment faire ici.
Merci à vous de m'avoir aider.
a+

[Remus91]

et pourquoi tu explique pas ici directement ?

[ndmsp]

Bonjour,
Suite à la demande de Daniel, je propose ma solution directement:

Bonjour !
Aujourd’hui, je vous propose de voir comment faire pour modifier l’ordre des éléments dans une page le plus intuitivement possible. Si vous voulez voir un exemple, c’est par ici: http://jqueryui.com/demos/sortable/.
Concrètement, comment faire ?
C’est assez simple: les informations que l’on affiche sont dans une base de donnée. Et bien il va suffire de rajouter un champ dans cette base, que l’on appellera position. A chaque fois que l’élément sera changé de place, le numéro de position changera.
Lorsque l’on ré-affichera les éléments, il faudra trier par ordre de position (ORDER BY position ASC).
Voilà, il ne faut rien de plus.
On va mettre tout ca en pratique. Commencez par télécharger le fichier jquery.js, et le fichier jquery.droopy.js.
Dans une nouvelle page, codée en html, commencez par insérer les deux fichiers javascript. Pour faire fonctionner le script Sortable, qui fera bouger les blocs, il faut l’initialiser:

Code :

1
2
3
4
5
6
7
8
9
10
11
<script type=’text/javascript’>
 $(document).ready( function(){
 $(« #sortable »).sortable({
 placeholder: ‘highlight’,
 update: function() {
 var order = $(‘#sortable’).sortable(‘serialize’); // On sérialise les données à envoyer au script
 $.post(‘sortable.php’,order); // Puis on les envoi au script nommé sortable.php
 }});
 $(« #sortable »).disableSelection();
 });
 </script>

Ensuite, on récupère toutes les données de la base:

Code :

1
2
// Récupération des donnéees
 $reponse = $bdd->query(‘SELECT * FROM demo ORDER BY position ASC’);

Puis on les affiche dans une liste:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<?php
// Passage dans une boucle while
while($reponse = $reponse->fetch()){
?>
<li id= »numero_<?php echo $reponse['id']; ?> »>
 <img src= »<?php echo $reponse['image']; ?> » />
 <p>Image n° <?php echo $reponse['id']; ?></p>
</li>
<?php
 }
 $reponse->CloseCursor();
 ?>

Vous remarquerez que j’ai donné à chaque élément de la liste un attribut suivi d’un chiffre: il servira pour le script qui enregistre la page.
Maintenant que la page pour choisir l’ordre est crée, on peut faire la page qui enregistre les données. On se connecte à la base de donnée, on passe le paramètre reçu dans un tableau, on modifie, puis on ferme la connexion.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Page: sortable.php
<?php
// Connexion à la base de donnée
 try{
 // Dans l’ordre: l’adresse du serveur, le nom de la base, le nom d’utilisateur, le mot de passe
 $bdd = new PDO(‘mysql:host=localhost;dbname=nom_base’, ‘nom_utilisateur’, ‘mot_passe’);}
 catch(Exception $e){
 die(‘Erreur : ‘ . $e->getMessage());}
 
// changement de l’ordre des photos dans la base de données, photo par photo
foreach($_POST['numero'] as $ordre => $id ){
$req = $bdd->prepare(‘UPDATE demo SET position = :ordre WHERE id = :id’);
 $req->execute(array(‘ordre’ => $ordre, ‘id’ => $id));
 $req->closeCursor();}
 
?>

Voici le script entier de la première page:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr » lang= »fr »>
<head>
 <meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8&#8243; />
 <script type= »text/javascript » src= »jquery.js »></script>
 <script type= »text/javascript » src= »jquery.droopy.js »></script>
 <title>Changer l’ordre des éléments en Jquery, et le mémoriser dans une base de donnée</title>
 <script type=’text/javascript’>
 $(document).ready( function(){
 $(« #sortable »).sortable({
 placeholder: ‘highlight’,
 update: function() {
 var order = $(‘#sortable’).sortable(‘serialize’); // On sérialise les données à envoyer au script
 $.post(‘sortable.php’,order); // Puis on les envoi au script nommé sortable.php
 }});
 $(« #sortable »).disableSelection();
 });
 </script>
</head>
<body>
 <ul id= »sortable »>
 <?php
 // Connexion à la base de donnée
 try{
 // Dans l’ordre: l’adresse du serveur, le nom de la base, le nom d’utilisateur, le mot de passe
 $bdd = new PDO(‘mysql:host=localhost;dbname=nom_base’, ‘nom_utilisateur’, ‘mot_passe’);}
 catch(Exception $e){
 die(‘Erreur : ‘ . $e->getMessage());}
 
 // Récupération des donnéees
 $reponse = $bdd->query(‘SELECT * FROM demo ORDER BY position ASC’);
 
 // Passage dans une boucle while
 while($reponse = $reponse->fetch()){
 ?>
 
 <li id= »numero_<?php echo $reponse['id']; ?> »>
 <img src= »<?php echo $reponse['image']; ?> » />
 <p>Image n° <?php echo $reponse['id']; ?></p>
 </li>
 <?php
 }
 $reponse->CloseCursor();
 ?>
 </ul>
</body>
</html>

Si vous le souhaitez, vous pouvez créer une base de donnée ‘demo’ avec ce script, pour l’exemple:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Structure de la table `demo`
CREATE TABLE `demo` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(255) collate latin1_german2_ci NOT NULL,
`position` int(11) NOT NULL,
PRIMARY KEY  (`id`),
KEY `order` (`position`)
) AUTO_INCREMENT=6 ;
– Contenu de la table `demo`
INSERT INTO `demo` VALUES (1, ’1.jpg’, 2);
INSERT INTO `demo` VALUES (2, ’2.jpg’, 3);
INSERT INTO `demo` VALUES (3, ’3.jpg’, 4);
INSERT INTO `demo` VALUES (4, ’4.jpg’, 1);
INSERT INTO `demo` VALUES (5, ’5.jpg’, 0);

Il ne vous reste qu’à le personnaliser avec du css, et le tour sera joué !
A bientôt !!