jQuery UI: How to save "sortable"?

Question

I have a list of "tasks" and I'm using "sortable" so that a user can prioritize them, putting the most important ones on top. But of course, every time the page is refreshed they go back to their original position. I'm wondering if it's possible to save the position of the tasks?

Here's my code (it's a rails project):

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

  <script>
    $(document).ready(function() {
      $('.move').sortable();
      });
  </script>


<%= render "form" %>



<div class="move">
<% if [email protected]? %>
  <% for item in @project.tasks %>
  <div class="container">
  <div class="panel panel-default">
  <div class="panel-heading">
    <div class='move'><%= item.title %></div>
  </div>
  </div>
  <div class="panel-body">
  <p>
    <div class='move'><%= item.description %></div>
  </p>
  <%= link_to "Edit", edit_project_task_path(@project, item) %> 
  </div>
  </div>
  <% end %>
<% end %>
</div>

You can save the state in the database and use it to load correctly xmech.net/programming/jquery-ui-sortable-tutorial OR if you can use the information in the form of a table instead of a div and then convert that table to a Datable then you can save the state without using database. datatables.net/examples/basic_init/state_save.html — Raghvendra Kumar
– Raghvendra Kumar, Commented Feb 9, 2015 at 10:08
You can also try to set the revert option in your current code stackoverflow.com/questions/13909665/… — Raghvendra Kumar
– Raghvendra Kumar, Commented Feb 9, 2015 at 10:19

Irvin Dominin · Accepted Answer · 2015-02-09 08:21:28Z

1

You can use jQuery cookie and get the li position using jQuery UI sortable toArray:

Serializes the sortable's item id's into an array of string.

then in the load change the li position by swithin their position using insertAfter and eq selector.

Code:

var savedOrd = $.cookie('sortOrder');
if (savedOrd) {
    $.each(savedOrd.split(','), function (i, e) {
        $('#' + e).insertAfter('#sortable>li:eq(' + i + ')');
    });
}

$('#save').click(function () {
    var saveOrd = $('#sortable').sortable('toArray');
    $.cookie('sortOrder', saveOrd);
});

Demo: http://jsfiddle.net/IrvinDominin/amq6gt8w/

Alternatively instead of using cookie you can call two server methods to set and get the element positions.

answered Feb 9, 2015 at 8:21

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

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

1 Comment

roguerat Over a year ago

Thank you this was helpful. I'm still trying to integrate it with my own project though, I can't seem to get it to work. I don't really know jQuery, I'm just trying to implement this one jQuery feature on my Rails project.

Farhan · Accepted Answer · 2015-02-09 07:28:44Z

0

You can find the index of the task and save it and sort based on index while displaying.

To find the index of the task on UI refer this : Fiddle

$("div").click(function(){
    var index = $("div").index($(this));
    var position =  index+1;
    $('span').html(position);
})

answered Feb 9, 2015 at 7:28

Farhan

7525 silver badges10 bronze badges

2 Comments

roguerat Over a year ago

Sorry I posted the wrong code. The answer should still be the same though I image, but I updated the original post. I'm a little confused by what you mean though (I just started coding a few weeks ago). You're saying I should replace my jQuery with what you posted? I tried that and I can no longer move the tasks.

Runcorn Over a year ago

@roguerat of course they will be removed when page is refreshed. Either you have to save the order in Database or session so when page is refreshed you can align them in proper order.

Collectives™ on Stack Overflow

jQuery UI: How to save "sortable"?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related