Send order of jQuery sortable to Laravel controller

Question

I have a collection of Article objects that have a public attribute int priority. This field ist used to display the articles in the intended order. However, I'd like to be able to rearrange the order of the articles in the admin area.

I included jQuery and with this Laravel/Blade snippet

<ul class="selectable-demo-list" id="sortable-list-basic">
    @FOREACH($articles as $article)
        <li> {{ $article->label}} </li>
    @ENDFOREACH
</ul>

I can produce this HTML output:

<ul class="selectable-demo-list" id="sortable-list-basic">
    <li> My article (ID: 1) </li>
    <li> Another article (ID: 2) </li>
    <li> ... </li>
</ul>

I can access the respective priority via $article->priority and their unique IDs via $article->id if these elements should be included in the code.

The <ul> posted above is rendered correctly: All <li> elements are displayed as sortable jQuery elements. If I drag an item to a certain position, it stays there for the time being.

Unfortunately, I have no idea how to save the new order (= update the items priorities according to the list positions).

This shouldn't be done directly. Instead, I want to use an update button. Maybe I can use a form and send an array like this to my controller:

$priorities = [1=>3; 2=>1; 3=>2] // ID => new priority

Is this possible? Or should I use a different approach? Any help is greatly appreciated!

Jobayer · Accepted Answer · 2018-04-22 23:45:40Z

4

Add id with each of your li like id="id-{{ $article['id'] }}"

You can call an ajax request when you are changing any order using this sortable plugin like below code

 $("#sortable-list-basic").sortable({
   update: function (e, u) {
    var data = $(this).sortable('serialize');
    $.ajax({
        url: "{{ url('controller/sorting_method') }}",
        type: 'post',
        data: data,
        success: function (result) {

        },
        complete: function () {

        }
    });
  }

});

Then inside your method, take your new order for each item & save it to database such as

   $ids = $request->id;

   foreach($ids as $order => $id){
    $article = Article::findOrFail($id);
    $article->order = $order;
    $article->save();
   }

edited Apr 22, 2018 at 23:45

answered Apr 22, 2018 at 13:34

Jobayer

1,2311 gold badge14 silver badges23 bronze badges

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

5 Comments

Barret Wallace Over a year ago

Thanks, but I don’t quite understand this. Does it trigger the DB Update immediately when I move an item? How do I access the new values? Are they part of the request?

Jobayer Over a year ago

add console.log(data) below var data = $(this).sortable('serialize'); then you can check what it's returning & each of your li element should have an id. Check my updated answer.

Barret Wallace Over a year ago

Hm. I added the ID to the <li> elements and also console.log(data) below var data.... However, my browser doesn't show anything in the console. Do I need to take care of csfr token issues? Is the new order stored as soon as I move an item or do I have to implement a save-button?

Jobayer Over a year ago

Yes, csrf token can be an issue. Have you checked your network tab? What is the output of your ajax call?

Barret Wallace Over a year ago

Thanks, but I gave up on this one. Finally, I implanted a sorting function based on Laravel only. No js.

Collectives™ on Stack Overflow

Send order of jQuery sortable to Laravel controller

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related