voilà , j'ai une page ou j'affiche des photos issu de ma base , avec une fonction sortable jquery .
tout fonctionne parfaitement .
dans la balise li on retrouve l'id de la photo , je souhaiterais récupérer l'id ainsi que la position de la photo .
mon problème c'est que je ne sais pas comment faire pour envoyer en post les infos de ma balise li ( enfant ul ) en js , j'ai bien chercher , mais
cela ne fonctionne pas .
je vous montre ce que j'ai essayer de faire , mais sans succès ...merci pour votre aide
Code : Tout sélectionner
<!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>
$(document).ready(function () {
$('#sortable').sortable({
onchange : function ( sorted ) {
serial = $.SortSerialize ( 'sortable' );
// requète Ajax pour l'enregistrement des positions
$.ajax ( {
url : "position.php",
type : "post",
data : serial.hash,
});
}
});
});
</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>
et la page position.php
Code : Tout sélectionner
<?php
include('connect.php');
$sortable = $_POST['sortable'];
for ($i = 0; $i < count($sortable); $i++) {
// SQL :
$pdo->exec("update photo_bien set position ='".($i + 1)."' where Id_photo = '".$sortable[$i]."'");
}
?>voilà , j'ai une page ou j'affiche des photos issu de ma base , avec une fonction sortable jquery .
tout fonctionne parfaitement .
dans la balise li on retrouve l'id de la photo , je souhaiterais récupérer l'id ainsi que la position de la photo .
mon problème c'est que je ne sais pas comment faire pour envoyer en post les infos de ma balise li ( enfant ul ) en js , j'ai bien chercher , mais
cela ne fonctionne pas .
je vous montre ce que j'ai essayer de faire , mais sans succès ...merci pour votre aide
[code]<!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>
$(document).ready(function () {
$('#sortable').sortable({
onchange : function ( sorted ) {
serial = $.SortSerialize ( 'sortable' );
// requète Ajax pour l'enregistrement des positions
$.ajax ( {
url : "position.php",
type : "post",
data : serial.hash,
});
}
});
});
</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>[/code]
et la page position.php
[code]<?php
include('connect.php');
$sortable = $_POST['sortable'];
for ($i = 0; $i < count($sortable); $i++) {
// SQL :
$pdo->exec("update photo_bien set position ='".($i + 1)."' where Id_photo = '".$sortable[$i]."'");
}
?>[/code]
