CODEWITHSUNDEEP
javascriptjquerycoffeescript
TheIrishGuy
TheIrishGuy

Reputation: 2573

jQuery Sortable problems

In my users/index view that holds the unordered list

<ul id="documents" data-update-url="<%= sort_documents_url %>">
  <% @documents.each do |document| %>
  <%= content_tag_for :li, document do %>
  <span class="handle">[drag]</span>
  <%= link_to h(document.title), document %>
  <%= link_to 'Delete', document, method: :delete, remote: true %>
  <% end %>
  <% end %>
</ul>

As you see inside the the ul I am rendering a partial for each model. The _documents.html.erb partial 2nd Update of rendered html.

<ul id="documents" data-update-url="http://localhost:3000/documents/sort">
  <li class="document" id="document_4fc4db0cb6231417f300000c">
    <span class="handle">[drag]</span>
    <a href="/documents/4fc4db0cb6231417f300000c">Help</a>
    <a href="/documents/4fc4db0cb6231417f300000c" data-method="delete" data-remote="true" rel="nofollow">Delete</a>
</li>  <li class="document" id="document_4fc4db27b6231417f300000f">
    <span class="handle">[drag]</span>
    <a href="/documents/4fc4db27b6231417f300000f">adam</a>
    <a href="/documents/4fc4db27b6231417f300000f" data-method="delete" data-remote="true" rel="nofollow">Delete</a>
</li>  <li class="document" id="document_4fc4db2db6231417f3000010">
    <span class="handle">[drag]</span>
    <a href="/documents/4fc4db2db6231417f3000010">adam</a>
    <a href="/documents/4fc4db2db6231417f3000010" data-method="delete" data-remote="true" rel="nofollow">Delete</a>
</li>  <li class="document" id="document_4fc4dbaab6231417f3000015">
    <span class="handle">[drag]</span>
    <a href="/documents/4fc4dbaab6231417f3000015"></a>
    <a href="/documents/4fc4dbaab6231417f3000015" data-method="delete" data-remote="true" rel="nofollow">Delete</a>
</li></ul>

document.js.coffee jQuery ->

  $('#documents').sortable
    handle: '.handle'
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))

Upvotes: 0

Views: 767

Answers (1)

Ayman Safadi
Ayman Safadi

Reputation: 11552

You cannot have a <div> directly under a <ul>. I bet that's throwing off the script.

In fact, you cannot have anything other than <li> inside a <ol> or <ul>.

Upvotes: 2

Related Questions