[UI] Utiliser ajax avec Sortable

**beegees** · 07/08/2011, 11h27

Bonjour à tous,

J'utilise "sortable" de jquery UI :

http://jqueryui.com/demos/sortable/

Pour l'instant, j'enregistre les modifications avec un submit (via un form) :

//affichage de la liste sortable :

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
21
22
23
24
<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>

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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);
                });
            }
        });
});

et mise à jour dans la bd :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?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());
    }
}
?>

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 :

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({
            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");
				}
				});
				}
            }
        );
		   });

Edit : Il semblerait vu la documentation que l'on doit renvoyer les valeurs sous cette forme : valeur_1, valeur_2, valeur_3...

J'ai donc ajouté un id à chaque <li> :

Code :

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