Sortable : utilisation de Ajax au lieu du submit
Bonjour à tous,
J'ai visionné plusieurs fois la vidéo sur le plugin jquery "Sortable".
Je vois que le moyen de faire un update dans la bd est d'appuyer sur un submit.
Je me demandais si quelqu'un avait ajouté au code du tuto une fonction qui permettrait de mettre à jour la bd au déplacement d'un élément ?
J'ai essayé plusieurs solutions depuis plusieurs jours, mais sans succès :
Mon code HTML :
<ul id="sortable">
<?php
$i=0;
$sql = "SELECT * FROM neuro_event WHERE patient_id = '".$_SESSION'dmu']."' ORDER BY position ASC";
echo $sql;
$req = mysql_query($sql) or die(mysql_error());
while($d = mysql_fetch_assoc($req)){
$i++;
?>
<li>
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<input type="hidden" name="category<?php echo $i; ?>][id]" value="<?php echo $d"id"]; ?>"/>
<input type="hidden" name="category<?php echo $i; ?>][patient_id]" value="<?php echo $d"patient_id"]; ?>"/>
<input type="text" name="category<?php echo $i; ?>][event_date]" value="<?php echo $d"event_date"]; ?>"/>
<input type="hidden" name="category<?php echo $i; ?>][content_type_id]" value="<?php echo $d"content_type_id"]; ?>"/>
<input type="text" class="positionInput" name="category<?php echo $i; ?>][position]" value="<?php echo $d"position"]; ?>"/>
</li>
<?php
}
?>
</ul>ensuite, mon code js :
$(function(){
$("#sortable").sortable({
placeholder : "fantom",
update : function(event,ui){
var list = ui.item.parent("ul");
var pos = 0;
$(list.find("li")).each(function(){
pos++;
$(this).find("input.positionInput").val(pos);
var order = $('#sortable').sortable('serialize');
alert(order);
});
}
});
});alert order est toujours vide.
et voici le code PHP :
<?php
include("includes/connexion.php");
print_r($_POST);
$cat = $_POST"order"];
foreach( $cat as $c){
extract($c);
$sql = "UPDATE neuro_event SET patient_id='$patient_id', content_type_id = '$content_type_id', event_date = '$event_date', position=$position WHERE id=$id";
echo $sql;
mysql_query($sql) or die(mysql_error());
}
?>La connexion à la bd est OK.
Je vous en remercie d'avance.
beegees
9 réponses
Bonjour,
Merci pour ta réponse.
Je ne suis pas bien sûr de comprendre ta réponse.
Je veux en fait mettre à jour mes données dans une base de données Mysql.
J'espère avoir répondu à ta question.
Merci pour ton aide.
beegees
Pour ma part, j'ai un système du même style.
il se présente sous forme de div
<ul id="maliste">
<li id="fo1">blablabla</li>
<li id="fo35">blablabla</li>
<li id="fo21">blablabla</li>
<li id="fo549">blablabla</li>
</ul>et au final dans ma base j'obtiens.
1|35|21|549et pour le javascript
$( "#maliste" ).sortable({
update: function() {
var folderOrder = new Array();
$(this).find('li').each(function(){
folderOrder.push($(this).attr("id").substring(2));
});
$.post(url,{order: folderOrder.join('|')});
});par contre je ne connais pas le paramètre sérialise il est plutôt simpat
Bonjour,
Merci pour ta réponse.
Est-ce que ton plugin fonctionne sur Internet Explorer ?
Qu'as-tu mis comme code dans ta page PHP ?
Merci encore pour ton aide.
beegees
dans ma page php je regarde juste si la variable est correcte avec une expression régulière
if (preg_match("#^[0-9|]+$#", $_POST'order']) {
//la variable est correcte
} else {
//il y a un problème
}Après si tu veux l'algorithme qui remet les éléments en place au chargement de la page dit le.
Merci pour ta réponse.
Oui, je suis preneur pour l'algorithme, merci à toi.
Cela fonctionne avec IE ?
Merci encore.
Oui sur ie6 aussi
Donc j'ai un tableau avec la liste d'objet et un autre ou il y a l'ordre des objets
J'ai pas l'algo avec moi, par contre j'ai traduit mon code js en php
Car je génere la page en javascript
ça devrai fonctionner
En php
// le tableau des objet
$objet = array();
$objet'25'] = 'chaussure';
$objet'95'] = 'bateau';
$objet'5'] = 'râteau';
$objet'98'] = 'ballon';
$objet'654'] = 'boite';
// l'ordre
$order = '95|25|5|98';
//on utilise explode pour transformer en tableau
$order = explode('|', $order);
// on initialise la variable ou on stock le résultat
$build = '';
//on regarde si il y a des objets
if (count($objet) > 0) {
//on regarde si il y a un ordre qui existe
if (count($order) > 0) {
//première boucle qui boucle sur la variable order
foreach ($order as $var) {
//on regarde si il y a une id qui correspond dans le tableau des objets
if (isset($objet$var])) {
//si oui on stocke
$build.= $objet$var];
//puis on supprime du tableau objet
unset($objet$var]);
}
}
}
//puis une 2ème boucle qui vérifie si il reste des élément dans le tableau objet.
// on fait cela au cas ou il y a un objet qui n'est pas dans la liste 'order'.
// il se retrouvera à la fin de build
foreach ($objet as $key => $var) {
$build.= $var;
}
}
// et voila la fin
echo $build;Ce code prend en compte :
- cas ou il y a un objet qui n'a pas d'ordre (la 2ème boucle va l'afficher à la fin)
- cas ou un objet est dans la liste d'ordre mais n'existe pas
- cas ou il n'y a pas d'objet
- cas ou il n'y a pas d'ordre (le 2ème boucle affiche tous les objet)
Cette réponse arrive un peu tard mais si tu veux juste que la modification s'enregistre automatiquement dans ta base sans avoir à appuyer sur le bouton submit lorsque tu as trié ta liste, en utilisant le code fourni dans le tuto, il suffit de rajouter la commande suivante :
$("#formsort").submit();"formsort" étant le nom que j'ai donné à mon formulaire <form id="formsort" ...> à adapté selon tes besoins. Dans le code de Graf ça donne :
$("#sortable").sortable({
placeholder : "fantom",
update : function(event,ui) {
var list = ui.item.parent("ul");
var pos = 0;
$(list.find("li")).each(function(){
pos++;
$(this).find("input.ordre_affichage_input").val(pos);
});
$("#formsort").submit();
}
});Si ça peux encore t'aider.
Un grand merci pour ta réponse complémentaire takalefaire.
J'ai depuis résolu mon problème, tout semble fonctionner parfaitement.
bee