Bonsoir,

J'essaie actuellement de réaliser un système de tri, de "rangement" d'images (qui sont en fait les previews de séries), à l'aide du plugin Sortable de jQueryUI, qui lancera à chaque "update" des listes un appel AJAX pour mettre à jour, dans une base de données mySQL, la position des images.

L'idée est d'avoir une première liste d'image non classées (position = NULL), où le stock d'images est disponible (et où, à chaque ajout d'une image dans cette liste, position_serie passe à NULL) et une deuxième liste, contenant la liste actuelle et définitive des images dans le bon ordre (et à chaque ajout/modification, un appel AJAX met position_serie à jour). On peut donc envoyer des images d'une liste à l'autre.

Malheureusement, après plus de trois jours à chercher de nouvelles méthodes, à essayer de mille façons différentes en modifiant script, php, AJAX, tables et requêtes SQL... Je n'arrive pas à faire mettre à jour correctement ce script, peu importe que ce soit avec une ou deux listes. On peut très bien déplacer les images, mais les changements ne s'enregistrent JAMAIS : il suffit de relancer la page pour avoir nos images dans leur position d'origine.

La connexion se fait en PDO (qui fonctionne, mon formulaire d’ajout d'image et mon éditeur WYSIWYG fonctionnent parfaitement).

Je vous appelle à l'aide, car là je dois avouer qu'après trois jours à ne rien obtenir de concret, je n'ai plus aucune idée. Je vous remercie d'avance pour votre attention.

Le script :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready( function(){ // quand la page a fini de se charger
 $('#list-photos, #list-restant').sortable({ // initialisation de Sortable sur #list-photos et #list-restant
   connectWith:'.connectedList', //On connecte les listes
   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('post_edit_position.php',order);     // appel ajax au fichier post_edition_position.php avec l'ordre des photos
       var orderNull = $('#list-restant').sortable('serialize');
       $.post('post_null.php', orderNull);
   }
 });
 $("#list-photos, #list-restant").disableSelection();
});


Les listes générées par PHP :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
<!--	//////////////////////////////////////LISTE DES IMAGES RESTANTES (= NULL)////////////////////////////////////////////////////////	-->
 
<ul id="list-restant" class="connectedList">
	<li id="restant_1">
		<img src="Dessins/images/90be781f911f9101c46c24b84634c5f1.png" alt="test1" 
			height="150" width="150"/>
	</li>
 
	<li id="restant_4">
		<img src="Dessins/images/4f1c587847c00c0769dcebe5ee0bde42.png" alt="test4" 
			height="150" width="150"/>
	</li>
 
</ul>
<br/>
<!--	//////////////////////////////////////POSITIONS ACTUELLES////////////////////////////////////////////////////////	-->
 
 
<ul id="list-photos" class="connectedList" >
	<li id="photo_2">
		<img src="Dessins/images/632e074a9b09162e93cb0e87b60237b5.png" alt="test2" 
			height="150" width="150"/>
	</li>
 
 
	<li id="photo_3">
		<img src="Dessins/images/fe588a9b86518d423c027d90faf31580.png" alt="test3" 
			height="150" width="150"/>
	</li>
 
 
</ul>


En enfin, la page d'insertion PHP (appel AJAX) :

Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
<?php 
	include("connect.php");
	foreach($_POST['photo'] as $clef => $valeur) {
		$nouvelle_liste=$bdd->prepare('UPDATE `series` SET `position_serie` = ? WHERE `series`.`id_serie` = ?');
		$nouvelle_liste->execute(array($clef,$valeur));
	}
?>

Merci d'avance.