Passage variable post

**anti91** · 12/06/2019, 17h07

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 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
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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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]."'");
	}
?>

**Toufik83** · 12/06/2019, 17h47

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

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 
});

**anti91** · 12/06/2019, 21h41

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 :

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
<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>

**Toufik83** · 12/06/2019, 21h56

Si tu ajoutes la fonction done d'ajax

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
echo "sortable :".$sortable;

ça donne quoi dans la console ?

**anti91** · 12/06/2019, 23h15

j'ai fais les modification que tu m'as donné , j'ai été dans la console mais rien ne s'affiche ....

**Toufik83** · 12/06/2019, 23h21

Je n'ai pas vu qu'il manque un "php" au début de set_position.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**anti91** · 13/06/2019, 08h52

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 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
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>

**Toufik83** · 13/06/2019, 18h20

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 :

soit supprimer le paramètre "axis" de l'initialisation de $.sortable

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%;.

**anti91** · 14/06/2019, 09h42

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 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
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 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
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>

**Toufik83** · 14/06/2019, 15h56

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 jquery :

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
 
$( 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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**anti91** · 14/06/2019, 17h41

bonjour toufik ,

et encore merci pour ton aide ..... tu es au top

, j'ai également trouvé une solution ....qui fonctionne enfin ....mais je regarde quand même la tienne ...

à très bientôt toufik , porte toi bien ...

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
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 php :

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
<?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."'");
}
 
 
 
?>

Passage variable post [AJAX]

jQuery

Discussions similaires

Partager

Partager