11550 sujets

JavaScript, DOM et API Web HTML5

Liste classable qui classe à l'envers !

Bonjour !

J'ai trouvé quelques tutos sur le net pour créer une liste classabe qui mets à jour automatiquement la base de donnée.
Ça fonctionne bien sauf que à chaque mise à jour des positions de la liste, l'ordre est inversé systématiquement !

C'est dû au fait que je classe mes éléments de liste par ordre DESC et non pas ASC (si je classe en ASC, ça marche impec, pas de soucis).
J'ai vu quelque part qu'on pouvait inverser l'array contenant le nouvel ordre mais je ne sais pas comment faire ! Pourriez-vous m'aider ?

(j'ai suivi le tuto http://www.wil-linssen.com/extending-the-jquery-sortable-with-ajax-mysql/ )
Voici mes codes :

J'affiche ma liste à classer comme suit :
<?php require_once('Connections/SQL1000GP.php');
mysql_select_db($database_SQL1000GP, $SQL1000GP);

$sql = "SELECT * FROM novart_tableaux ORDER BY `ordre` DESC";
$result = mysql_query($sql)or die(mysql_error());
$number = mysql_num_rows($result);
$list = '';
for($x=1;$x<=$number;$x++){
    $row = mysql_fetch_array($result);
    $list.= '<div class="handle" id="listItem_' . $row{'id'} . '"><img src="'.$row['img_p'].'" class="handle" alt="" /></div>';
} 
?>

<!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>Liste classable</title>
<link href="css/skin.css" rel="stylesheet" type="text/css" />
<script src="javascript/j/jquery.js" type="text/javascript"></script> 
<script src="javascript/j/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
// When the document is ready set up our sortable with it's inherant function(s) 
$(document).ready(function() { 
  $("#imageFloatContainer").sortable({ 
    handle : '.handle', 
    update : function () { 
      var order = $('#imageFloatContainer').sortable('serialize'); 
      $("#imageFloatContainer").load("adm_traitement_classement.php?"+order); 
    } 
  }); 
}); 
</script>
</head>

<body>
<div id="imageFloatContainer">
<?php
echo $list;
?>
</div>
</body>
</html>


Je traite par :

<?php 
require_once('Connections/SQL1000GP.php');
$sortme = $_POST['imageFloatContainer'];
// Connect to the database as necessary
$dbh = mysql_connect($hostname_SQL1000GP,$username_SQL1000GP,$password_SQL1000GP)
  or die ("Unable to connnect to MySQL");

$selected = mysql_select_db($database_SQL1000GP,$dbh)
  or die("Could not select sort_test");

/* This is where you would inject your sql into the database 
but we're just going to format it and send it back 
*/ 
foreach ($_GET['listItem'] as $position => $item) { 
  mysql_query("UPDATE novart_tableaux SET ordre = $position WHERE `id` = $item"); 
}
mysql_close($dbh);
?>


(les codes SQL sont cracra, je sais, je les modifierai une fois que j'aurais réglé ce petit soucis Smiley smile )

Merci d'avance !
Modifié par Sebastien_91 (20 Aug 2009 - 22:45)
Salut,

Tu peux mettre dans une variable les éléments de ton tableau, puis de faire 
variable.reverse();


Ca inverse les valeurs de ton tableau Smiley cligne .
J'ai fait ce que tu m'as dit en adaptant, et ça n resoud pas le problème, l'ordre est toujours inversé à chaque fois :

<script type="text/javascript"> 
// When the document is ready set up our sortable with it's inherant function(s) 
$(document).ready(function() { 
  $("#imageFloatContainer").sortable({ 
    handle : '.handle', 
    update : function () { 
      var order = new Array($('#imageFloatContainer').sortable('serialize')); 
	  var order2 = order.reverse();
      $("#imageFloatContainer").load("adm_traitement_classement.php?"+order2); 
    } 
  }); 
}); 
</script>

Modifié par Sebastien_91 (20 Aug 2009 - 23:13)
Salut,

Quand tu fais le reverse et que tu en fais un , il te met bien l'inverse ? Es-tu sûr que c'est un tableau que jquery te rend ?
Effectivement non, il me sort une chaine du type :
?listItem[]=22&listItem[]=24&listItem[]=21&listItem[]=23&listItem[]=20&listItem[]=19&listItem[]=18&listItem[]=6&listItem[]=17&listItem[]=16&listItem[]=15&listItem[]=14&listItem[]=13&listItem[]=12&listItem[]=11&listItem[]=10&listItem[]=4&listItem[]=2&listItem[]=3&listItem[]=7&listItem[]=8&listItem[]=5&listItem[]=1&listItem[]=9


C'est possible d'inverser ça aussi ? Smiley lol (ou de l'inverser lors de l'insertion dans la BDD ?)
Je suppose que dans ta div qui contient ta liste c'est plusieurs li ou des div, je sais qu'avec Prototype tu peux demander tous les éléments enfants du type xxxx. Il te sorts alors un gros tableau avec ces éléments, moi je fais mon reverse à ce moment.
Maintenant je ne sais pas comment fonctionne exactement ton plugin ^^.
Bonjour,

Ton script , une legere adaptation de celui-ci :
http://www.wil-linssen.com/extending-the-jquery-sortable-with-ajax-mysql/

Le tableau envoyé a des clés qui ont toute le même nom , je ne vois pas trop comment tu peut les trier ... reverse(); en js ou array_reverse(); en php seront sans effets

Confronté a ce probleme il y a peu de temps pour un tri de fichier , j'ai opté pour php et passer par tableau tout neuf a clé uniques par defaut .

En reprenant le script exemple en lien ci dessus ,
je reprend son fichier process-sortable.php et te propose ceci comme piste :

<?php
/* This is where you would inject your sql into the database 
   but we're just going to format it and send it back
*/
echo '<p>recuperation des valeurs de variables "listItem" via URL et affichage </p>';
$GET = $_GET;
foreach ($GET['listItem'] as $position => $item) :
	//$sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
	echo $position."=>".$item ."<br>";
endforeach;
//print_r ($sql);

/* tableau tarte tatin */
echo '<hr/>'.
'<p>Recuperation des valeurs de variable et cr&eacute;ation d\'un nouveau tableau a cl&eacute; uniques </p><pre>
Affichage du tableau $tableau qui va nous servir:
';
$deux=$_GET;
foreach ($deux['listItem'] as $position => $item) :
	//$sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
	$tableau[]=$item;
endforeach;
/* aperçu de notre tableau */
var_dump($tableau);
echo '</pre>';
$tableau=array_reverse($tableau);
echo '<p> appliquons array_reverse(); a notre tableau a cl&eacute;s uniques , puis parcours du tableau et affichage des cl&acute;s / valeurs .</p>';
foreach ($tableau as $position => $item) :
	//$sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item";
	echo $position."=>".$item ."<br>";
endforeach;

//print_r ($sql);
?>


.. Maintenant je ne suis pas un professionnel et il est probable qu'il y a une façon plus academique de faire ça Smiley smile .

GC
Modifié par gc-nomade (23 Aug 2009 - 23:36)
Sujet clos
Aller à