Sortable et problème AJAX

Bonjour,

Je suis en train de développer un système de galerie sortable. J'ai bien réussis a faire le classement mais je n'arrive pas à récupérer tous les identifiants et enregistrer le tout en base.

Voici les codes sources :

<form method="post" action="sql/supprPhotos.php">

                        <input type="hidden" value="0" name="carrousel">
                        
                        <div id="sortableCarr">
                        
                        <?php
                        
                            $queryCarr = "SELECT id_carrousel, nom_image, position FROM carrousel ORDER BY position ASC";
                            $resultCarr = mysql_query($queryCarr);
                            
                            while($dataCarr = mysql_fetch_assoc($resultCarr)) {
                                echo '<div class="imagesCarr"><center>';
                                echo '<a href="../images/slide/'.$dataCarr['nom_image'].'" class="zoombox"><img width="350px" src="../images/slide/'.$dataCarr['nom_image'].'"></a><br>';
                                echo '<div class="input"><input type="checkbox" name="images[]" value="'.$dataCarr['id_carrousel'].'|'.$dataCarr['nom_image'].'"></div>';
                                echo '<input type="hidden" class="positionInputCarr" name="pos" value="'.$dataCarr['position'].'">';
                                echo '<input type="hidden" class="idInputCarr" name="id_carr" value="'.$dataCarr['id_carrousel'].'">';
                                echo "</center></div>";
                            }
                        
                        ?>
                            
                        </div>
                        
                        <div style="clear: both;"></div>
                        
                        <br><br>
                        
                        <div class="submit">
                            <input type="button" value="Enregistrer les positions" id="sortCarr">
                            <input type="submit" value="Supprimer les images" onClick="return confirm('Voulez vous vraiment supprimer les images ?');">
                        </div>

                    </form>

$(function() {
                    $( "#sortableCarr" ).sortable({
                        update : function(event,ui){
                            var list = ui.item.parent("div#sortableCarr");
                            var pos = 0;
                            $(list.find("div.imagesCarr")).each(function(){
                                pos++;
                                $(this).find("input.positionInputCarr").val(pos);
                            });
                        }
                    });
                    $( "#sortableCarr" ).disableSelection();
                    
                $('#sortCarr').click(function() {
                    $("#sortableCarr").find(".imagesCarr").each(function(){
                        $.ajax({
                            type: "POST",
                            url: "sql/sortCarrousel.php",
                            data: "pos="+$('.positionInputCarr').val()+'&id='+$('.idInputCarr').val()+'',
                            success: function(msg){
                                if(msg == "success") {
                                    alert('Positions enregistrées');
                                } else {
                                    alert('Erreur lors de l\'enregistrement des positions');
                                }
                            }
                        });
                    });
                });

Si vous avez des idées je suis preneur.

Merci d'avance

Hello !

Pour récupérer l'ordre et les identifiant tu peux utiliser la méthode serialize de sortable.

A+

Ok merci je vais regarder ça. Mais tu as des exemples concret à me montrer ? Comme ça je comprendrai sans doute mieux la marche à suivre

J'ai un bout de code que j'ai utilisé sur un de mes projets, mais il est en Java.

Tu trouveras ici un tutorial en PHP.

En espérant que ça t’aidera.

Merci c'est exactement ce que j'avais trouvé mais ya des trucs que je ne comprends pas. J'ai le même code que lui et dans mon $_POST['photo'] on me dit qu'il est vide et je ne comprends pas trop son PHP car il ne passe a aucun moment ses positions ...

Je suis perdu là

Tu dois ajouter un id (qui doivent toujours commencer par le même nom, ex : photo_) sur les objets que tu as rendu "sortable".

Par exemple :

<div id="sortableCarr">
     <div id="photo_2">...</div>
     <div id="photo_1">...</div>
     <div id="photo_3">...</div>
</div>

En faisant

var order = $('#sortableCarr').sortable('serialize');

Tu va obtenir une chaîne de caractère : photo[]=2&photo[]=1&photo[]=3
Elle indique que la photo 2 est en position 1, la photo 1est en position 2 et la photo 3 est en position 3.

Du coup tu peux passer cette chaîne en paramètre de ta requête Ajax et la traiter (la je ne peux pas t'aider, je fais du java) pour sauvegarder les positions en DB.
Modifié par Oken (08 Oct 2013 - 11:41)

D'accord merci je vais me plonger dessus avec plus de force ^_^, j'espère trouver rapidement