publication/app/views/admin/journals/show.html.erb

<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/jquery-ui-sortable.min" %>
<% end %>

<% content_for :page_specific_css do %>
	<style type="text/css">
    .order-list{
      list-style: none;
    }
    .order-list-chapter i{
      font-size: 20px;
      cursor: move;
    }

    .order-list-chapter h4{
      display: inline-block;
      margin-left: 30px;
    }

   #sort-chapter-modal .modal-body {
      max-height: 60vh;
    }

    #sort-chapter-modal .modal-body .order-list-chapter img {
      width: 150px;
      margin: 0 0 10px 10px;
    }
	</style>
<% end %>

<table class="table main-list">
  <thead>
    <tr class="sort-header">
      <% @table_fields.each do |f| %>
        <%= thead(f) %>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <% @chapters.each do |chapter| %>
      <tr>
        <td>
          <%= chapter.title %>
          <% if can_edit_or_delete?(@banner) %>
          <div class="quick-edit">
            <ul class="nav nav-pills">
              <li><a href="<%= edit_admin_chapter_path(chapter.id, page: params[:page]) %>"><%= t(:edit) %></a></li>
              <li><a href="<%= admin_chapter_path(chapter.id, page: params[:page]) %>" class="delete text-error" data-method="delete" data-confirm="Are you sure?" ><%= t(:delete_) %></a></li>
            </ul>
          </div>
          <% end %>
        </td>
        <td>
          <%= chapter.author %>
        </td>
        <td>
          <%= chapter.page %>
        <td>
      </tr>
    <% end %>
  </tbody>
</table>

<% if can_edit_or_delete?(@journal) %>
  <div class="bottomnav clearfix" style="left: 81px;">
    <div class="action pull-right">
      <%= link_to t("journals.add_chapter"), new_admin_chapter_path(page: params[:page], journal_id: @journal.id), class: "btn btn-primary" %>
      <a class="btn btn-info" href="#sort-chapters-modal" data-toggle="modal"><%= t('journals.order')%></a>
    </div>
   <%= content_tag :div, paginate(@chapters), class: "pagination pagination-centered" %>
  </div>
  <!-- chapter order modal -->
  <div id="sort-chapters-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Order Images</h3>
    </div>
    <div class="modal-body">
      <ul class="order-list">
        <% @journal.chapters.asc(:sort_number).each do |chapter| %>
          <li class="order-list-chapter" data-chapter-id="<%= chapter.id.to_s %>">
            <i class="icons-list-2"></i>
            <h4><%= chapter.title %>
          </li>
        <% end %>
      </ul>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button class="btn btn-primary" id="save-chapter-order-btn">Save changes</button>
    </div>
  </div>
<% end %>

<script type="text/javascript">
  var sortUpdated = false;
  $("#sort-chapters-modal").on("shown",function(){
    $(".order-list").sortable({
      update : function(){
        sortUpdated = true;
      }
    });
  })

  $("#save-chapter-order-btn").on("click",function(){
    if(sortUpdated){
      var ids = [];
      $(".order-list-chapter").each(function(i,chapter){
        ids.push($(chapter).data("chapter-id"));
      })
      $.ajax({
        url : "/admin/journals/save_chapter_order",
        data : {"ids" : ids, "journal_id" : "<%= @journal.id.to_s %>"},
        dataType : "json",
        type : "post"
      }).done(function(){
        alert("Order saved. Please refresh the page to see the changes.");
        $("#sort-chapters-modal").modal("hide");
      })
    }
  })
</script>