title: Saving serialised sortable data from jQuery/ajax using Laravel 4+
body: <p>Having an issue working out the best way to save an ajax sortable list into my database. I'm using <a href="https://github.com/voidberg/html5sortable" rel="nofollow noreferrer">HTML5Sortable</a> and Laravel 4.2 framework. The basic end result I'm trying to achieve is for a user to be able to click and drag the list items and reorder them and this new order will be saved in the database in a field called "order" so that when they return to the page later the new order will be present.</p>
  
  <p>I have a list of chapters on the page like so:</p>
  
  <pre><code>&lt;ul class="sortable"&gt;
      @foreach ($chapters as $chapter)
        &lt;li class="ui-state-default" data-order="{{ $chapter-&gt;order }}"&gt;{{ $chapter-&gt;title }}&lt;/li&gt;
      @endforeach
  &lt;/ul&gt;
  </code></pre>
  
  <p>And I can drag and drop sort these using HTML5Sortable and then serialize this data and submit it via ajax POST, which fires off each time the list is reordered like so:</p>
  
  <pre><code>$('.sortable').sortable().bind('sortupdate', function(e, ui) {
  
      var order = $('ul.sortable li').map(function(){ 
          return $(this).data("order");
      }).get();
  
      var uuid = "&lt;?php echo$uuid; ?&gt;";
  
      $.ajax({
          type: "POST",
          url: "api-ch-order",
          dataType: "json",
          data: {order: order, uuid: uuid},
          success: function(order){
            console.log(order)
          }
      });
  });
  </code></pre>
  
  <p>My controller at /api-ch-order gets the data and <strong>saves</strong> the new order like so:</p>
  
  <pre><code>if(Request::ajax()){
  
    $uuid = Input::get('uuid');
    $order = Input::get('order');
  
    $i = 1;
  
    foreach($order as $position) {
  
      $chapter = Chapter::where('book_uuid', $uuid)-&gt;where('order', $position)-&gt;first();
  
      $chapter-&gt;order = $i;
      $chapter-&gt;save();
  
      $i++;
  
    }
  
  }
  </code></pre>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <p>The issue I'm having with this approach is that it wont work in some circumstances, the loop causes problems.</p>
  
  <p>e.g. </p>
  
  <p>LOOP 1: FIND Chapter where order = 2 and change order to 1</p>
  
  <p>LOOP 2: FIND Chapter where order = 1 and change it to 2</p>
  
  <p>The problem here is that in LOOP 2 it is finding result of LOOP 1 and updating this instead... I think... This problem is confusing me quite a bit... But I'm 99% sure the foreach loop in my controller is the problem and I'm not sure the best approach to fix this.</p>
  
  <p>Resources to link to this question: </p>
  
  <ul>
  <li><a href="http://michaelbrooks.co.uk/post/how-to-use-jquery-ui-sortable-in-laravel-4" rel="nofollow noreferrer">How To Use Jquery UI Sortable in Laravel 4</a></li>
  <li><a href="https://stackoverflow.com/questions/13591533/serialize-data-for-ajax-using-html5sortable">Serialize data for AJAX using HTML5sortable</a></li>
  </ul>
  
  <p><strong>THE ANSWER!!!</strong></p>
  
  <p>As r4xz mentioned, the answer is to use ID as the constant.</p>
  
  <p>E.g. </p>
  
  <p>HTML </p>
  
  <pre><code>&lt;ul class="sortable"&gt;
      @foreach ($chapters as $chapter)
        &lt;li class="ui-state-default" data-id="{{ $chapter-&gt;id }}"&gt;{{ $chapter-&gt;title }}&lt;/li&gt;
      @endforeach
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.sortable').sortable().bind('sortupdate', function(e, ui) {
  
      var id = $('ul.sortable li').map(function(){ 
          return $(this).data("id");
      }).get();
  
      var uuid = "&lt;?php echo$uuid; ?&gt;";
  
      $.ajax({
          type: "POST",
          url: "api-ch-order",
          dataType: "json",
          data: {id: id, uuid: uuid},
          success: function(order){
            console.log(id)
          }
      });
  });
  </code></pre>
  
  <p>PHP CONTROLLER</p>
  
  <pre><code>if(Request::ajax()){
  
    $uuid = Input::get('uuid');
    $id = Input::get('id');
  
    $i = 1;
  
    foreach($id as $val) {
  
      $chapter = Chapter::where('id', $val)-&gt;first();
  
      $chapter-&gt;order = $i;
      $chapter-&gt;save();
  
      $i++;
  
    }
  
  }
  </code></pre>