Evénement "on change"

[Alexia01]

Bonjour,
J'essaie de bricoler des bouts de codes, mais je ne comprends pas tout ce que je fais :

<div class="cf nestable-lists">
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle">Item 1</div>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Item 2</div>
<li class="dd-item" data-id="3">
<div class="dd-handle">Item 3</div>
</li>
<li class="dd-item" data-id="4">
<div class="dd-handle">Item 4</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle">Item 5</div>
</li>
<li class="dd-item" data-id="6">
<div class="dd-handle">Item 6</div>
</li>
<li class="dd-item" data-id="7">
<div class="dd-handle">Item 7</div>
</li>
<li class="dd-item" data-id="8">
<div class="dd-handle">Item 8</div>
</li>
<li class="dd-item" data-id="9">
<div class="dd-handle">Item 9</div>
</li>
<li class="dd-item" data-id="10">
<div class="dd-handle">Item 10</div>
</li>
</ol>
</div>
</div>
<p><strong>Serialised Output (per list)</strong></p>
<textarea id="nestable-output"></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.nestable.js"></script>
<script>
$(document).ready(function()
{
	var updateOutput = function(e)
	{
		var list = e.length ? e : $(e.target),
		output = list.data('output');
		if (window.JSON) {
			output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
			} else {
				output.val('JSON browser support required for this demo.');
			}
			
	};
	// activate Nestable for list 1
	$('#nestable').nestable({
		group: 1
	})
	.on('change', updateOutput);
	// output initial serialised data
	updateOutput($('#nestable').data('output', $('#nestable-output')));
});
</script>

Il s'agit de layers qui peuvent être déplacés, et ça fonctionne très bien. Sauf que je voudrais en plus pouvoir faire un update de la BDD à chaque évenement "on change" et transmettre les nouvelles informations générées.

Voici le bout de code que j'ai préparé :

$.ajax({
	    url: "test/update.php",
	    type: "POST",
	    data: {
	        'ordre: '1'
	    },
	    success: function () {
	        alert("ok");
	    }
	});

Sauf que à la place de '1' pour 'ordre', il faudrait que ce soit le nouvel ordre engendré par le déplacement, et que $.ajax soit appelé au bon endroit pour faire son office.

Et là, je suis dépassé dans mes capacités de bidouilles ...
Si vous pouvez me donner un coup de main, ce serait bien venu !
Merci d'avance à toutes et à tous !

 

[p0k3]

Pour moi, tu dois TOUT mettre à jour en BDD :

Elem 1 => order: 1
Elem 2 => order: 2
Elem 3 => order: 3
Elem 4 => order: 4

Si je déplace 4 entre 1 et 2, je dois mettre à jour tous les ordres !

Regarde ce plug Jquery : nestedSortable

 

[Alexia01]

Je te remercie p0k3 pour ton aide !

Ce qui va en base de données, c'est :

[{"id":5},{"id":3},{"id":10},{"id":4},{"id":6},{"id":2},{"id":7},{"id":8},{"id":9},{"id":1}]

c'est le resultat du javascript qui s'affiche dans <textarea id="nestable-output"></textarea> et ça me va bien pour la suite de l'usage que j'en fais. Ma difficulté ne réside pas là, elle se situe dans la capacité à joindre mes deux bouts de JS en un seul qui fonctionne et qui donc appelle le fichier d'update.php pour transmettre la chaine à chaque évenement "onchange";

En espérant avoir été plus clair avec cette précision ;-)

 

[p0k3]

Tu utilises quoi comme plug pour gérer le drag/drop ?

 

[Alexia01]

J'ai pris le code là : http://dbushell.github.io/Nestable/