两个可排序列表需要使用jquery-ui获取序列化参数

Question

你能帮我解决这些代码：

应用程序/视图/管理/物品/ position.html.haml

- form_tag update_position_admin_articles_path do
  .grid_5.alpha{:id => 'article-container'}
    %h3 Articles
    %ul#articles.connectedSortable
      - for article in @articles
        = content_tag(:li, article[0], :id => article[1], :class => 'ui-state-default')
  .grid_5.omega{:id => 'feature-container'}
    %h3 Featured Articles
    %ul#features.connectedSortable
      - for feature in @features
        = content_tag(:li, feature[0], :id => feature[1], :class => 'ui-state-highlight')
  %br.clear
  = submit_tag "Update Position"

公共/ application.js中

$(function() { 
    $("#articles, #features").sortable({ 
        connectWith: '.connectedSortable',
        update: function(event, ui) { 
                console.log($(this).sortable("serialize"));
            }
        }) 
    });

这是两个可排序的列表，我需要在单击提交按钮时获取这些列表的序列化参数，但我始终在"(an empty string)"上获得console.log()。我正在使用jQuery-ui来实现这一功能。

Answer 1

以防任何人遇到同样的问题。 使用此代码解决了这个问题：

应用程序/视图/管理/物品/ position.html.haml

- form_tag update_position_admin_articles_path do
  .grid_5.alpha{:id => 'article-container'}
    %h3 Articles
    %ul#articles.connectedSortable
      - for article in @articles
        = content_tag(:li, article[0], :id => article[1], :class => 'ui-state-default')
  .grid_5.omega{:id => 'feature-container'}
    %h3 Featured Articles
    %ul#features.connectedSortable
      - for feature in @features
        = content_tag(:li, feature[0], :id => feature[1], :class => 'ui-state-highlight')
  = hidden_field_tag 'sort[articles]', ''
  = hidden_field_tag 'sort[features]', ''
  %br.clear
  = submit_tag "Update Position"

公共/ application.js中

$(function() { 
    $("#articles, #features").sortable({ 
        connectWith: '.connectedSortable',
        update: function(element, ui) { 
                var result = $(this).sortable('toArray');
                var data = {};
                data[this.id] = result;
                document.getElementById('sort_' + this.id).value = result;
            }
        }) 
    });