0

jQuery-UI Sortable Connected Lists を使用しています。接続されたリストの順序を Rails サーバーに保存しています。

私のアプローチは、各リスト項目のリスト ID、列 ID、およびインデックス位置を取得することです。次に、これをオブジェクトにラップして、パラメーターとして Rails コントローラーに渡してデータベースに保存できるようにしたいと考えています。したがって、理想的には、次のようにパラメーターをフォーマットすることを検討しています。Parameters: {"Activity"=>[{id:1,column:2,position:1},{id:2,column:2,position:2} ,...]}

この Ajax POST リクエストで渡されるパラメータを適切にフォーマットするにはどうすればよいですか? 現在、以下のアプローチで、私は引き継いでいます Parameters: {"undefined"=>""}

これは、動作しない私の現在の jQuery コード (Coffeescript) です。

jQuery ->
  $('[id*="day"]').sortable(
    connectWith: ".day"
    placeholder: "ui-state-highlight"
    update: (event, ui) ->
      neworder = new Array()
      $('[id*="day"] > li').each ->
        column = $(this).attr("id")
        index = ui.item.index() + 1
        id = $("#" + column + " li:nth-child(" + index + ") ").attr('id')
        passObject={}
        passObject.id = id
        passObject.column = column
        passObject.index = index
        neworder.push(passObject)
      alert neworder
      $.ajax
        url: "sort"
        type: "POST"
        data: neworder
    ).disableSelection()

これは非常にアマチュアな質問のように思えるため、申し訳ありませんが、jQuery と Javascript のプログラミングを始めたばかりです。

4

2 に答える 2

1

すべてのセレクターが正しいと仮定すると、これを実行できるはずです。

$.ajax
  url: "sort"
  type: "POST"
  data: { Activity: JSON.stringify(neworder) }

コードの残りの部分を簡素化することもできます。

update: (event, ui) ->
  neworder = [ ]
  $('[id*="day"] > li').each ->
    # 'this' should be the DOM element so just read off the 'id' attribute,
    # you don't need to waste time building a jQuery object just to get an
    # 'id' attribute.
    column = @id
    index  = ui.item.index() + 1

    # String interpolation to skip the string addition noise. You already
    # have a jQuery object here so there's nothing wrong with using
    # attr('id') here.
    id = $("##{column} li:nth-child(#{index})").attr('id')

    # You don't need 'passObject' here, just use an object literal and push
    # it onto neworder all in one go.
    neworder.push(
      id:     id
      column: column
      index:  index
    )
  $.ajax
    url: "sort"
    type: "POST"
    data: { Activity: JSON.stringify(neworder) }

またはさらにコンパクトです（そのようなものが好きな場合）：

update: (event, ui) ->
  neworder = [ ]
  $('[id*="day"] > li').each ->
    index = ui.item.index() + 1
    neworder.push(
      id:     $("##{column} li:nth-child(#{index})").attr('id')
      column: @id
      index:  index
    )
  $.ajax
    url: "sort"
    type: "POST"
    data: { Activity: JSON.stringify(neworder) }

JSON.parse(params[:Activity])次に、コントローラーで解凍できます。

indexコメントで少し議論した後、あなたの価値観は間違っていると思います。これを行う：

index = ui.item.index() + 1

indexそれぞれに対して同じものを提供します<li>。おそらく、次のようなものがもっと必要です。

$lis = $('[id*="day"] > li')
$lis.each ->
  index = $lis.index(@)
  #...

これにより、繰り返し処理している sのコレクション内の現在の<li>( )のインデックスが得られます。または、イテレータ関数に渡す引数を使用できます。@<li>each

$('[id*="day"] > li').each (index, el) ->
  # Just use `index` as-is in here...
于 2012-11-04T00:14:38.993 に答える
0

これは私のjQueryコードです（Coffeescriptで）：

jQuery ->
  $('[id*="day"]').sortable(
    connectWith: ".day"
    placeholder: "ui-state-highlight"
    update: (event, ui) ->
      neworder = new Array()
      $(this).children().each ->
        column = $(this).parent().attr("id").match(/\d+/)[0]
        id = $(this).attr("id").match(/\d+/)[0]
        neworder.push(
          id: id
          column: column
        )
      alert neworder
      $.ajax
        url: "sort"
        type: "POST"
        data: { Activity: JSON.stringify(neworder) }
    ).disableSelection()

RailsコントローラーへのAJAXコールバックを解析する方法:

def sort
    JSON.parse(params[:Activity]).each_with_index do |x, index|
      idx = x["id"]
      positionx = index+1
      column = x["column"]
      activity = Activity.find(idx)
      activity.update_attributes(:position => positionx, :day_id => column)
    end
    render nothing: true
  end

モデルに戻り、「アクティビティ」の関連付けを位置で並べます。

has_many :activities, :order => 'position'

助けてくれてありがとう@muistooshort

于 2012-11-05T06:30:25.813 に答える