[jQuery-fr] [UI] Utilisation de ajax avec Sortable

[David Dubois]

Bonjour à tous,

J'utilise "sortable" de jquery UI :

http://jqueryui.com/demos/sortable/"]http://jqueryui.com/demos/sortable/
Pour l'instant, j'enregistre les modifications avec un submit (via un
form) :

//affichage de la liste sortable :

[CODE]<form method="post" action="patient.php">
<ul id="sortable">
<?php
$i=0;
$sql = "SELECT * FROM neuro_event WHERE patient_id =
'".$_SESSION['dmu']."' ORDER BY position ASC";
$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>
<?php $examen = explode("_",$d['content_type_id']); ?>
<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="" name="category[<?php echo $i; ?>][event_date]"
disabled="disabled" value="<?php echo $examen[0]. ' du '.
$d["event_date"]; ?>"/>
<input type="hidden" name="category[<?php echo $i; ?>][content_type_id]"
value="<?php echo $d["content_type_id"]; ?>"/>
<input type="hidden" class="positionInput" name="category[<?php echo $i;
?>][position]" value="<?php echo $d["position"]; ?>"/>
</li>
<?php
}
?>
</ul>
<input type="submit" value="Enregistrer"/>
</form>
[/CODE]

//mise à jour visuel et HTML de la liste sortable :

[CODE]$(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);
});
}
});
});
[/CODE]

et mise à jour dans la bd :

[CODE]
<?php
if(!empty($_POST)){
$cat = $_POST["category"];
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";
mysql_query($sql) or die(mysql_error());
}
}
?>
[/CODE]

J'aurais voulu mettre à jour la bd directement au changement de position
d'un élément de l la liste (car j'ai peur que les utilisateurs oublient
d'appuyer sur le bouton "Enregistrer").

J'ai adapté mon code pour utiliser AJAX :

[CODE]
$(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);
});
serial = $('#sortable').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
}
);
});
[/CODE]

1) serial est vide [CODE]serial=
$('#sortable').sortable('serialize');[/CODE]
Une alerte m'indique que c'est vide.

2) vu que j'utilise un tableau multi-dimensionnel, je me demande comment
je peux l'envoyer à data de la fonction ajax de jquery ?

Merci d'avance pour votre aide et bon dimanche.

David
_______________________________________________
jQue...@rezo.net - http://listes.rezo.net/mailman/listinfo/jquery-fr