Sortable - UPDATE sur BDD non fonctionnel
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:
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:
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:
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.
