Update MYSQL sur événement on change

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <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>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <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é :

Code:

1
2
3
4
5
6
7
8
9
10
    $.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 ( [{"id":5},{"id":3},{"id":10},{"id":4},{"id":6},{"id":2},{"id":7},{"id":8},{"id":9},{"id":1}] le résultat du javascript qui s'affiche dans <textarea id="nestable-output"></textarea>) , 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 !

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