update BDD avec Drag 'n Drop

**IceP42** · 06/05/2009, 20h14

Bonjour,

j'ai un probleme avec l'utilisation du drag'n drop sur une liste de jeux. Je
récupère la liste des jeux à partir d'une base de donnée sql et j'arrive à
rendre cette liste de jeux draggable, jusque là tout vas bien. Mais ce que je
n'arrive pas à faire c'est mettre à jour ma table dans ma base de donnée.
J'utilise la Framework JQUERY pour le drag'n drop. D'après les tutos que j'ai
pu trouver sur le net, il faut utiliser de l'ajax pour envoyer une requête vers
la base de donnée et c'est là que je coince, chez moi ça ne marche pas.

je vous donne un bout de mon code :

Code :

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
34
35
36
37
38
39
40
41
42
<div id="sortlist" class="sortlist">';
while($data=mysql_fetch_assoc($req)){
echo'
 
 
<li id='.$data['titre'].' class="sortable_item"
style="background:#8080FF;">'.$data['titre'].'</li>
</ul>';
 
}
 
echo'
 
<script type="text/javascript">
 
$(document).ready (
function() {
$( "#sortlist" ).Sortable( {
accept : "sortable_item",
axis : "vertically",
opacity : 0.6,
onchange : function (sorted) {
serial = $.SortSerialize("sortlist");
$.ajax ( {
type: "POST",
url: "set_position.php",
data: serial.hash,
complete: function(data){alert(data);}
 
 
});
 
 
}
 
});
});
 
</script>
</body>
</html>';
?>

Voila, j'espère que quelqu'un peut me donner un coup de main.
Merci d'avance

**Kerod** · 06/05/2009, 20h37

Salut,

Alors une bonne chose pour qu'on puisse t'aider serait de mettre le code affiché par le navigateur et donc pas de PHP, ensuite le code PHP appelé par la fonction Sortable

**IceP42** · 07/05/2009, 14h40

Voici le code complet comme tu le souhaite et je te donne aussi le script de la page php (qui est appelé
par l'ajax).

Le probleme vient du fait que je n'arrive pas à
passer la variable 'sortlist' dans la page php, quand j'ouvre la page
'set_position2.php' j'ai le message d'erreur suivant : index indefini :
sortlist in c:....donc les données ne sont pas transmisse à la page
'set_position2.php'!!

voici le code complet de newdrag.php :

Code :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<?php
include("openbase.php");
connectMaBase();
$sql = 'SELECT id,titre FROM classement';
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br
/>'.mysql_error());
echo'
<html>
<head>
 
<!-- Importation JQuery et Interface.js -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
 
<!-- Styles de votre liste -->
<style type="text/css" media="all">
 
    .sortable_item {
        cursor : move;
        width : 100%;
        list-style : none;
    }
 
    .ul_style {
 
          list-style-type : none;
          margin : 0;
          padding : 0;
    }
 
</style>';
echo '
</head>
<body>
 
<div id="sortlist" class="sortlist">';
while($data=mysql_fetch_assoc($req)){
        echo'
 
 
<li id='.$data['id'].' class="sortable_item"
style="background:#8080FF;">'.$data['titre'].'</li>
</ul>';
 
   }
 
echo'
 
<script type="text/javascript">
 
    $(document).ready (
        function() {
            $( "#sortlist" ).Sortable( {
            accept : "sortable_item",
            axis : "vertically",
            opacity : 0.6,
            onchange : function (sorted) {
            serial = $.SortSerialize("sortlist");
                        $.ajax ( {
                          type: "POST",
   url: "set_position2.php",
   data: serial.hash,
   complete: function(data){alert(data);}
 
 
 
 
 });
 
 
 
 
            }
 
        });
    });
 
 
 
</script>
</body>
</html>';
?>

et voile le code de la page 'set_position.php' :

Code :

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
 
<?php
include("openbase.php");
 
connectMaBase();
 
 
    // Récupération des valeurs post envoyé par la requête Ajax
    $sortlist = $_POST [ 'sortlist' ];
 
    // On update la table avec les nouvelles positions
 
    for ($i = 0 ; $i < count ( $sortlist ) ; $i++) {
 
            // SQL Query :
            $query = ( "update classement set position='".($i + 1)."' where id =
$sortlist [ $i ] " );
            $ajout = mysql_query ($query) or die ( mysql_error() );
 
    }
 
 
?>

Voila, j'espere que ces elements suffiront pour pouvoir éclaircir mon problème.
Merci

**Kerod** · 07/05/2009, 14h42

Quand je dis code HTML c'est pas code PHP + HTML mais bel et bien le code HTML généré et affiché par le navigateur à l'aide de Afficher le code source.

On peut rien faire avec un code en l'état on a pas la même configuration et encore les BDD

**IceP42** · 09/05/2009, 12h55

Ooops, désolé.
Voici le code html.

Code :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<html>
<head>
 
<!-- Importation JQuery et Interface.js -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
 
<!-- Styles de votre liste -->
<style type="text/css" media="all">
 
    .sortable_item {
        cursor : move;
        width : 100%;
        list-style : none;
    }
 
    .ul_style {
 
          list-style-type : none;
          margin : 0;
          padding : 0;
    }
 
</style>
</head>
<body>
 
<div id="sortlist" class="sortlist">
 
 
<li id=2 class="sortable_item" style="background:#8080FF;">Tekken 5 </li>
</ul>
 
 
<li id=3 class="sortable_item" style="background:#8080FF;">Dark Miror </li>
</ul>
 
 
<li id=4 class="sortable_item" style="background:#8080FF;">Medal of honnor </li>
</ul>
 
 
<li id=5 class="sortable_item" style="background:#8080FF;">Call of duty </li>
</ul>
 
<script type="text/javascript">
 
    $(document).ready (
        function() {
            $( "#sortlist" ).Sortable( {
            accept : "sortable_item",
            axis : "vertically",
            opacity : 0.6,
            onchange : function (sorted) {
            serial = $.SortSerialize("sortlist");
			$.ajax ( {
			  type: "POST",
   url: "set_position2.php",
   data: serial.hash,
   complete: function(data){alert(data);}
 
 
 
 
 });
 
 
 
 
            }
 
        });
    });
 
 
 
</script>
</body>
</html>

**IceP42** · 11/05/2009, 21h20

Quelqu'un a des suggestions.
N'hésitez pas a demander si il y a besoin de details supplémentaires.

**Kerod** · 13/05/2009, 11h37

J'ai un petit souci avec ton code...

Quel UI utilises-tu ? Parce que l'évènement onchange est inconnu de mon côté. cf : http://docs.jquery.com/UI/API/1.7/Sortable

**IceP42** · 13/05/2009, 17h29

j'utilise Wamp et Notepad++
effectivement d'après le lien que tu m'as fourni OnChange devrait être remplacé
par Change. j'ai essayé mais ça ne change rien!!

**Kerod** · 13/05/2009, 19h58

Quand je dis UI c'est pas ton Environnement de travail mais le jQuery UI que tu utilises pour rendre ta liste sortable.

**IceP42** · 14/05/2009, 11h50

Désolé j'avais mal interpreté ta demande, j'espère que cette fois ci je ne me
trompe pas, j'utilise Jquery library v1.3.2

**Kerod** · 14/05/2009, 12h01

Toujours à côté. Bon c'est peut-être moi qui suis pas trop explicite.

Quel plugin utilises-tu ? Celui de base jQuery ou un autre ?

**IceP42** · 14/05/2009, 14h22

j'utilise le plugin interface.js

Cette fois c'est la bonne

**Kerod** · 14/05/2009, 15h37

Bon j'ai testé de mon côté mais avec le vrai plugin sortable (lien donné plus haut) et voici mon code (donc la plus grosse partie vient de la démo jQuery) :

Code xhtml :

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
34
35
36
37
38
39
40
41
42
 
<html>
    <head>
        <title>jQuery UI Sortable - Default functionality</title>
        <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
        <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
        <script type="text/javascript" src="../../ui/jquery-ui-1.7.1.custom.js"></script>
        <link type="text/css" href="../demos.css" rel="stylesheet" />
        <style type="text/css">
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        #sortable li span { position: absolute; margin-left: -1.3em; }
        </style>
        <script type="text/javascript">
        $(function() {
            $( "#sortable" ).sortable( {
                    update : function() {
                        serial = $( "#sortable" ).sortable('serialize');
                        $.ajax ( { type: "POST", url: "test.php", data: serial, complete: function(data){alert(data);}});
                    }
            });
            $("#sortable").disableSelection();
        });
 
        </script>
    </head>
    <body>
        <div class="demo">
 
        <ul id="sortable">
            <li id="listItem_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
            <li id="listItem_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
            <li id="listItem_3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
            <li id="listItem_4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
            <li id="listItem_5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
            <li id="listItem_6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
            <li id="listItem_7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
        </ul>
 
        </div><!-- End demo -->
    </body>
</html>

**IceP42** · 15/05/2009, 11h08

Salut Kerod,

peux tu me dire ce dernier code que tu m'as fournit fonctionne chez
toi, j'entends par la, savoir tu arrives à faire la liaison avec le bdd ??

J'ai repris le code d'exemple du plugin sortable, au niveau du code de la
framework c'est donc nickel. Mais je n'arrive toujours pas à passer les
variables vers la page php!!!!!!!

**Kerod** · 15/05/2009, 11h13

Le code donné ici fonction avec AJAX. Envoi et Réception des données tous deux effectifs.

S'il y a un souci ça vient plus de ton code PHP alors

**IceP42** · 15/05/2009, 13h53

voici le code de la page php test.php qui est appelé par la method ajax
j'ai essayé de passer pleins de paramètres à POST mais rien n'y fait!!

Code :

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
<?php
include("openbase.php");
 
connectMaBase();
 
 
    // Récupération des valeurs post envoyé par la requête Ajax
    if (isset($_POST['sortable']) ) {
 
$sortlist = $_POST ['sortable'];
 
    // On update la table avec les nouvelles positions
 
    for ($i = 0 ; $i < count ( $sortable ) ; $i++) {
 
            // SQL Query :
            $query =  "UPDATE classement SET position='".($i + 1)."' WHERE id =
$sortable [ $i ] " ;
            $ajout = mysql_query ($query) or die ( mysql_error() );
 
    }
        }
else {
print_r($sortable);
}
 
?>

**Kerod** · 15/05/2009, 13h58

Je ne crois pas que le nom soit le même que la liste...Il faudrait apprendre à vérifier sois même les variables qui sont passées par cette fonction. Un simple print_r($_POST) permet de le faire.

Pour infos, et à mon avis c'est la même chose quelque soit l'id de la liste, c'est :

Envoyé par reçu par AJAX en utilisant le print_r

Array
(

[listItem] => Array
(
[0] => 1
[1] => 2
[2] => 3
[3] => 5
[4] => 6
[5] => 7
[6] => 4
)

)

**IceP42** · 15/05/2009, 14h48

Je ne crois pas que le nom soit le même que la liste

Que veux tu dire par là?

J'ai déjà essayé le print_r($_POST) mais mon souci est que l'array que j'obtiens est vide.
J'obtiens Array () avec un tableau vide.
As tu une idée la dessus?