Passage variable post

Version imprimable

bonjour à tous ,

étant débutant en ajax, je tente d'enregistrer dans ma base les positions de mes images , mais cela ne fonctionne pas ....

j'ai fais plusieurs tentative , mais je n'arrive pas à résoudre se problème du à ma méconnaissance ....

ce petit fichier permet d'afficher des photos et de pouvoir les déplacer en drag dans l'ordre que l'on souhaite .

voilà ce que j'ai essayé de faire mais sans succès :( merci d'avance pour votre aide :-) )

formulaire :

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
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
 
<!-- Styles de votre liste -->        
<style type="text/css" media="all">
 
     li{
  display: inline-block;
  margin-left: 10px;
  width: 10%;
}
</style>
 
</head>
 
<body>
<ul id="sortable" > 
<?php
include('connect.php');
$Id_bien = ('14');
 
$resultat=$pdo->query("SELECT * FROM photo_bien WHERE Id_bien = '".$Id_bien."'");
$resultat->setFetchMode(PDO::FETCH_OBJ);
while($result_bien = $resultat->fetch() )
{
 
?>
 
    <li  id="<?php echo $result_bien->Id_photo; ?>"><img width="150" src="<?php echo $result_bien->photo_bien; ?>"></li>
 <?php
}
?>
 
</ul>
<script type="text/javascript">
$(document).ready(function () {
    $('ul').sortable({
        axis: 'x',
        stop: function (event, ui) {
                var data = $(this).sortable('serialize');
            $.ajax({
                data: oData,
                type: 'POST',
                url: 'set_position.php'
            });
        }
    });
});
</script>  
 
</body>
</html>

et le fichier d'enregistrement dans la base :

Code:

1
2
3
4
5
6
7
8
<?
	include('connect.php');
	$sortable = $_POST['sortlist'];
	for ($i = 0; $i < count($sortable); $i++) {
			// SQL :
			$pdo->exec("update photo_bien set position ='".($i + 1)."' where Id_photo = '".$sortable[$i]."'");
	}
?>

Salut,
-Pourquoi tu mets le $Id_bien entre parenthèse ?
Code:

1 2 $Id_bien = ('14');
-Tu as déclaré une variable "data" mais tu envoies une autre variable "oData" qui est indéfinie dans le script.
Code:

1 2 3 4 5 6 7 8 9 10 var data = $(this).sortable('serialize'); $.ajax({ data: data,//ici c'est data au lieu de oData type: 'POST', url: 'set_position.php' }) .fail(function(err){//en cas d'erreur alert("Erreur ajax :"+err);//une alerte s'affichera });

bonsoir toufik83 et merci pour ton aide ..

j'ai donc fais la modification qui paraissait évidente ....

malheureusement cela ne fonctionne pas ....et je n'ai pas d alert erreur ..

et la je bloque ....

j'ai essayé ça , mais sans succès et le query string est vide ....

je comprend plus
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script type="text/javascript"> $(document).ready(function () { $('#sortable').sortable({ accept : 'sortable_item', axis: 'x', onchange : function ( sorted ) { serial = $.SortSerialize ('sortable'); $('span').text(serial); $.ajax({ url : "set_position.php", type : "post", data : serial.hash, }) } }); }); </script> Query string: <span></span>

Si tu ajoutes la fonction done d'ajax

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$.ajax({
    data: data,
    type: 'POST',
    url: 'set_position.php'
})
.done(function(data){
    console.log('success, data :',data);//tu vois cette ligne dans la console ?
})
.fail(function(err){//en cas d'erreur
     alert("Erreur ajax :"+err);//une alerte s'affichera 
});

Puis tu mets un echo de la variable $sortable dans set_position.php

Code:

1
2
 
echo "sortable :".$sortable;

ça donne quoi dans la console ?

13/06/2019, 00h15
anti91

j'ai fais les modification que tu m'as donné , j'ai été dans la console mais rien ne s'affiche ....
13/06/2019, 00h21
Toufik83
Je n'ai pas vu qu'il manque un "php" au début de set_position.php :
Code:

1 2 3 4 <?php //ton code php... ?>

bonjour toufik,

je l'ai modifié , mais cela ne marche pas , ce qui est bizarre c'est qu'il ne se passe rien , je test quelque chose ce matin et je reviens vers toi .

merci

J'ai trouvé cela en fouinant , lé déplacement fonctionne seulement en vertical , et dès que j'essaie de la mettre en horizontal , cela bug , mais il enregistre bien la position de l'image dans la bdd .....

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
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>WAKDEV - Interface plugin for jQuery</title>
 
	<!-- Importation JQuery et Interface.js -->
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
 
	<!-- Styles des listes -->		
	<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>
 
<br />
 
<blockquote>
 
	<ul id="sortlist" class="ul_style"> 
 
    <?php
include('connect.php');
$Id_bien = '14';
 
$resultat=$pdo->query("SELECT * FROM photo_bien WHERE Id_bien = '".$Id_bien."'");
$resultat->setFetchMode(PDO::FETCH_OBJ);
while($result_bien = $resultat->fetch() )
{
 
?>
 
		<li  id="<?php echo $result_bien->Id_photo; ?>" class="sortable_item"><img width="150" height="150" src="../<?php echo $result_bien->photo_bien; ?>"></li>
 
		 <?php
}
?>
	</ul>
 
</blockquote>
 
<!-- Script Avec m�morisation des positions via SQL -->
<!-- 
	Votre base SQL doit �tre cr�e
	avec au minimum un champs id et un champs position
-->
 
<script type="text/javascript">
        $(document).ready (
        function () {
            $( "#sortlist" ).sortable ( {
            accept : 'sortable_item',
            axis : 'x',
            opacity : 0.6,
            onchange : function ( sorted ) {
            serial = $.SortSerialize ( 'sortlist' ); 
            // requète Ajax pour l'enregistrement des positions
            $.ajax ( {
                url : "set_position.php",
                type : "post",
                data : serial.hash,
 
                                //complete: function(data){alert(data);},
                                //success: function(feedback){ $('#data').html(feedback); }
                                //error: function(){alert('Erreur lors du d�placement ');}
 
                                });
                        }
 
                });
        });
</script>
 
 
	</body>
</html>

13/06/2019, 19h20
Toufik83

Je pense que c'est l'alignement vertical des <li class="sortable_item"> qui pose problème.

Si tu veux les déplacer horizontalement et verticalement tu as deux possibilités :

:arrow: soit supprimer le paramètre "axis" de l'initialisation de $.sortable
:arrow: soit garder le paramètre "axis" et appliquer un display:inline-block; aux <li class="sortable_item">, et il faut supprimer la propriété width:100%;.

bonjour toufik,

j'ai déjà tout essayé, mais des que le met en inline-block et avec un width à 20% , les images se mettent bien en ligne mais quand tu veux les déplacer , il ne laisse pas l'espace entre les images horizontalement , mais toujours verticalement , du coup il place toujours l'image en début de liste . j'ai essayé avec juste un axis x , et y et les deux , et sans ..... sans résultat concluant .....

j'ai trouver en terme de fonctionnement ce que je souhaite , mais je n'arrive pas à enregistrer la position , voici l'exemple trouver sur ce site ( http://jqueryui.com/sortable/#display-grid ) :

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Display as grid</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
  <li class="ui-state-default">4</li>
  <li class="ui-state-default">5</li>
  <li class="ui-state-default">6</li>
  <li class="ui-state-default">7</li>
  <li class="ui-state-default">8</li>
  <li class="ui-state-default">9</li>
  <li class="ui-state-default">10</li>
  <li class="ui-state-default">11</li>
  <li class="ui-state-default">12</li>
</ul>
 
 
</body>
</html>

et ma version qui ne fonctionne pas lol :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Display as grid</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 800px; }
  #sortable li { margin: 3px ; padding: 1px; float: left; width: 150px; height: 150px; font-size: 4em; text-align: center; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable({
                accept : 'ui-state-default',
                onchange : function ( sorted ) {
            serial = $.SortSerialize ( 'sortable' ); 
            // requète Ajax pour l'enregistrement des positions
            $.ajax ( {
                url : "position.php",
                type : "post",
                data : serial.hash,
                                })
                 .done(function(data){
    console.log('success, data :',data);//tu vois cette ligne dans la console ?
})
.fail(function(err){//en cas d'erreur
     alert("Erreur ajax :"+err);//une alerte s'affichera 
});             
            
                }
    });
});
  </script>
</head>
<body>
 
<ul id="sortable">
<?php
include('connect.php');
 $resultat=$pdo->query("SELECT * FROM photo_bien WHERE Id_bien = 14");
                        $resultat->setFetchMode(PDO::FETCH_OBJ);
                    while($result = $resultat->fetch() )
                        
                        {
                                $dossier = $result->photo;
                                $file = $result->photo_bien;
                                $Id_bien = $result->Id_bien;
                                $Id_photo = $result->Id_photo;
                                ?>
  <li id="<?php echo $Id_photo; ?>" class="ui-state-default"><img width="150" height="150" src="<?php echo $file; ?>"></li>
 
  <?php
                        }
                        ?>
</ul>
 
 
</body>
</html>

Salut,

J'ai copié collé ton exemple en modifiant quelques instructions de jQuery, et j'ai compris qu'il fallait ajouter soit des underscore "_" ou des tirets "-" dans les id des <li> pour que serialize récupère les bonnes valeurs, sinon ça ne fonctionnera pas.

Code:

1
2
 
<li id="photo-<?php echo $Id_photo; ?>"  class="ui-state-default"><!-- On ajoute le tiret "-"  ( ou underscore "_", comme tu veux..) dans le id -->

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
 
$( function() {
    $("#sortable").sortable({
		//accept : 'ui-state-default', "accept n'existe pas dans le documentation, c'est ça qui provoquait le bug..."
                placeholder: "highlight", // l’espace réservé apparaîtra à un emplacement disponible, ajoutes la class .highlight en css
		stop: function ( event,ui ) {//ici c'est "stop"au lieu de "onchange", d'ailleurs onchange n'existe pas.
			var serial = $(this).sortable('serialize'); //Je ne sais pas ou t'as trouvé $.SortSerialize() ! elle n'existe plus dans la documentation !
			console.log("stop, serial :",serial);//regarde si tu vois cette ligne dans la console !
                      // requète Ajax pour l'enregistrement des positions
                      $.ajax ( {
                           url : "position.php",
                           type : "post",
                           data : serial,
		     })
   		     .done(function(data){
			   console.log('success, data :',data);//tu vois cette ligne dans la console ?
		    })
		    .fail(function(err){//en cas d'erreur
			 alert("Erreur ajax :"+err);//une alerte s'affichera 
		    });		
 
	       }
    });
});

Code:

1
2
3
4
5
6
7
 
.highlight {
    border: 1px solid red;
    font-weight: bold;
    font-size: 45px;
    background-color: lightblue;
}

Le résultat renvoyé par position.php est un tableau qui contient un index "photo" avec les index (0,1,2) et les id des <li>: 1,3,2.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
array(1) {
  ["photo"]=>
  array(3) {
    [0]=>
    string(1) "1"
    [1]=>
    string(1) "3"
    [2]=>
    string(1) "2"
  }
}

Maintenant c'est à toi de gérer les données en php pour enregistrer les positions selon les indexes et id.

Et n'oublis surtout pas de mettre un order by "asc" ou "desc" dans la requête qui charge les photos en fonction de leur position.

bonjour toufik ,

et encore merci pour ton aide ..... tu es au top :D, j'ai également trouvé une solution ....qui fonctionne enfin ....mais je regarde quand même la tienne ... :P à très bientôt toufik , porte toi bien ...

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
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0;  }
  #sortable li {
    margin: 3px;
    padding: 1px;
    float: left;
    width: 190px;
    height: 225px;
    font-size: 4em;
    text-align: center;
    display: block;
    background-color: #fff;
}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(document).ready( function(){ 
    $( "#sortable" ).sortable({
        update: function() { 
        sortlist = $("#sortable").sortable('serialize');
                
                         $("#info").load("position.php?"+sortlist);
 
    }
  });
  $("#sortable").disableSelection(); // on désactive la possibilité au navigateur de faire des sélections
});
 
  </script>
	</head>
<body>
<div class="insere_photo_bien">
<h1><svg class="icomoon icon-table-bien w20"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icomoon.svg?time=1541523988#icon-key"></use></svg>Photo du bien </h1>
<div class="photo_bien">
 
			<form action="index.php?page=Modif_photo_bien&Id_bien=<?php echo $Id_bien;?>" enctype="multipart/form-data" method="POST">
			<input type="hidden" name="AddFiles" id="AddFiles" value="1">
 
			<input type="file" name="upload_file[]" class="hidden" id="upload_file" multiple /><br><br>
 
			<div id="selectedFiles"></div><br><br> 
            <?php
include('connect.php');
$resultat=$pdo->query("SELECT * FROM Users_cardo WHERE email_users = '".$_SESSION['login']."'");
$resultat->setFetchMode(PDO::FETCH_OBJ);
$result_users = $resultat->fetch();
 
if(($result_users->fonction_users) == Super_admin || ($result_users->Id_Users_cardo) == ($result_biens->Id_Users_cardo)  || ($result_users->fonction_users) == Secretaire) 
{
?>   
			<input type="submit" value="Télécharger" id="uploadimages" />
            <?php
}
?>
		   </form>
</div>
<div class="affiche_photo">
 
<div id="info"></div>
<ul id="sortable">
<?php
include('connect.php');
 $resultat=$pdo->query("SELECT * FROM photo_bien INNER JOIN bien ON bien.Id_bien = photo_bien.Id_bien  WHERE photo_bien.Id_bien = '".$Id_bien."' ORDER BY position ASC");
                        $resultat->setFetchMode(PDO::FETCH_OBJ);
                    while($result = $resultat->fetch() )
                        
                        {
                                $dossier = $result->photo;
                                $file = $result->photo_bien;
                                $Id_bien = $result->Id_bien;
                                $Id_photo = $result->Id_photo;
                                ?>
 
 
  				<li id="item-<?php echo $Id_photo; ?>"   class="ui-state-default" ><img width="175" height="175" style="margin-top: 5px;" src="<?php echo $file; ?>">
  				<form class="photo_avant" id="valid_photo_avant_<?php echo $file;?>" method="post"  action="valid_photo_avant.php" enctype="multipart/form-data">
 
                <input type="hidden" name="Id_bien"  value="<?php echo $Id_bien;?>">
                <input type="hidden" name="photo"  value="<?php echo $file;?>">
                <input type="hidden" name="Id_photo"  value="<?php echo $Id_photo;?>">
 
                <label class="favori" ><input class="favori" title="favori" width="52%" type="image" src="<?php if(($result->photo_en_avant) == $file) { echo 'images/favori_vert.png';}else { echo 'images/favori.png'; } ?>"   onchange="document.getElementById('valid_photo_avant').submit()">  </label>
		 		</form>
 
                <form class="supp_photo" id="valid_supp_photo_<?php echo $file;?>" method="post"  action="valid_supp_photo.php" enctype="multipart/form-data">
 
                <input type="hidden" name="Id_bien"  value="<?php echo $Id_bien;?>">
                <input type="hidden" name="photo"  value="<?php echo $file;?>">
                <input type="hidden" name="Id_photo"  value="<?php echo $Id_photo;?>">
 
                <label class="corbeille" ><input class="corbeille" title="Supprimer" width="70%" type="image" src="images/corbeille.jpg" onchange="document.getElementById('valid_supp_photo').submit()"></label>
 
 
                </form></li>
 
  <?php
                        }
                        ?>
</ul>
 
 <form action="" method="post">
  <input type="hidden"  name="sortable"/>
</form>
</div>
 
<div style="text-align:center;margin-top:20px;">
        <form method="post" action="index.php?page=Modif_criteres_bien&Id_bien=<?php echo $Id_bien;?>" enctype="multipart/form-data">
        <input type="submit" name"suivant" value="Suivant ">
        </form>
        </div>
</div>
</body>
</html>

et le fichier position.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
 
 
 
	include('connect.php');
 
 
 
$tableau=array();
 
	foreach ($_GET['item'] as $position => $item) {
 
    $tableau[$item]=$position;
 
    $pdo->exec("update photo_bien set position ='".$position."' where Id_photo = '".$item."'");
}
 
 
 
?>