Saving serialised sortable data from jQuery/ajax using Laravel 4+

Question

Having an issue working out the best way to save an ajax sortable list into my database. I'm using HTML5Sortable 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.

I have a list of chapters on the page like so:

<ul class="sortable">
    @foreach ($chapters as $chapter)
      <li class="ui-state-default" data-order="{{ $chapter->order }}">{{ $chapter->title }}</li>
    @endforeach
</ul>

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:

$('.sortable').sortable().bind('sortupdate', function(e, ui) {

    var order = $('ul.sortable li').map(function(){ 
        return $(this).data("order");
    }).get();

    var uuid = "<?php echo$uuid; ?>";

    $.ajax({
        type: "POST",
        url: "api-ch-order",
        dataType: "json",
        data: {order: order, uuid: uuid},
        success: function(order){
          console.log(order)
        }
    });
});

My controller at /api-ch-order gets the data and saves the new order like so:

if(Request::ajax()){

  $uuid = Input::get('uuid');
  $order = Input::get('order');

  $i = 1;

  foreach($order as $position) {

    $chapter = Chapter::where('book_uuid', $uuid)->where('order', $position)->first();

    $chapter->order = $i;
    $chapter->save();

    $i++;

  }

}

THE PROBLEM

The issue I'm having with this approach is that it wont work in some circumstances, the loop causes problems.

e.g.

LOOP 1: FIND Chapter where order = 2 and change order to 1

LOOP 2: FIND Chapter where order = 1 and change it to 2

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.

Resources to link to this question:

THE ANSWER!!!

As r4xz mentioned, the answer is to use ID as the constant.

E.g.

HTML

<ul class="sortable">
    @foreach ($chapters as $chapter)
      <li class="ui-state-default" data-id="{{ $chapter->id }}">{{ $chapter->title }}</li>
    @endforeach
</ul>

JS

$('.sortable').sortable().bind('sortupdate', function(e, ui) {

    var id = $('ul.sortable li').map(function(){ 
        return $(this).data("id");
    }).get();

    var uuid = "<?php echo$uuid; ?>";

    $.ajax({
        type: "POST",
        url: "api-ch-order",
        dataType: "json",
        data: {id: id, uuid: uuid},
        success: function(order){
          console.log(id)
        }
    });
});

PHP CONTROLLER

if(Request::ajax()){

  $uuid = Input::get('uuid');
  $id = Input::get('id');

  $i = 1;

  foreach($id as $val) {

    $chapter = Chapter::where('id', $val)->first();

    $chapter->order = $i;
    $chapter->save();

    $i++;

  }

}

I love the examples you give here. I have finally gotten the sortable list to sort, but it doesn't appear to be posting... I can't figure out what's going on. Got any ideas? — JLZenor
– JLZenor, Commented Oct 9, 2014 at 5:42
You use $.ajax in your JS (like above) and post it to a route in your routes.php file e.g. Route::post('api-ch-order', 'SomeController@SomeFunction'); then use what I have above for the controller. That should work... — Josh
– Josh, Commented Oct 9, 2014 at 12:51
If still no luck after this then post up a new question and link it to me here and I'll see if I can help :) — Josh
– Josh, Commented Oct 9, 2014 at 12:55
Thank you. I'm pretty sure I have my route correct. If it were wrong then I should get an error from Laravel saying the route is wrong, correct? I get those errors often enough that I would know how to fix the problem if I saw the error. Anyway, here is the link to my post: stackoverflow.com/questions/26280943/… — JLZenor
– JLZenor, Commented Oct 9, 2014 at 14:33

Wojciech Mleczek · Accepted Answer · 2014-10-04 07:43:10Z

3

The most common solution is to save position and entity id:

<li data-id="{{ $chapter->id }}" data-order="{{ $chapter->order }}">{{ $chapter->title }}</li>

Then in controller you simply use:

UPDATE chapter SET order = $order WHERE id = $id

answered Oct 4, 2014 at 7:43

Wojciech Mleczek

1,66416 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Over a year ago

Perfect. That's exactly what I ended up going with! Will post full answer as an edit to my question.

Jicao · Accepted Answer · 2017-02-13 15:35:48Z

0

This question was very helpfull and gives a selfanswer into it ! GREAT ! Thanks !

Just for those in my case not using the same structure. This is what I did :

public function myRouteFunction(Request $request)
    foreach($ids as $key => $id) {
        $update = DB::table('mybase')->where('id', $id)->update(['sort_order' => $key]);
    }
}

Maybe this could help someone :)

edited Feb 13, 2017 at 15:35

answered Feb 9, 2017 at 15:19

Jicao

962 silver badges11 bronze badges

Collectives™ on Stack Overflow

Saving serialised sortable data from jQuery/ajax using Laravel 4+

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related