0

私は、ユーザーがアイテム (アイテムなど) を好きになることができるサイトに取り組んでいます。イベントは jQuery と AJAX で処理されます。item 配列には非常に多くのアイテムが含まれており、各アイテムには「愛する」ボタンがあります。ページの下部に 1 つのフォームを配置し、リモートで送信するだけで、ページ上のフォームの数を効率的に減らすことにしました。

したがって、ユーザーがラブボタンをクリックするたびに、アイテム ID を保持するデータ属性がフォームに挿入され、フォームが送信されます。シンプルなもの。

しかし、更新したい項目の要素 ID を見つける方法がわからないため、データ応答はもう少し複雑です。thisorevent.targetは別のイベント内にあるため、使用できません。eventまた、パラメーターをに持ち込もうとしましたsubmit eventが、うまくいきませんでした。

  $(".love_item").click (event) ->
    $(".love_item_item_id").val $(this).data 'id'
    $(".love_item_form").submit()
    $(this).hide(200)

  $("form.love_item_form").submit (evt) ->
     evt.preventDefault()
     $form = $ @
     $form.find(':submit').prop 'disabled', true
     $.post($form.attr('action'), $form.serializeArray(), type: 'json').done (data) ->
       $(event.target).parent().find(".item_info_box").html data

それが言う最後の行は、event.target私が持っている限りです。この変数が実行されていないことは明らかですが、目標を達成するためにそこに何を配置すればよいかわかりません。また、フォームアクションを介して追加のパラメーターを渡すことができることも知っています (つまり、それらをレールコントローラーに送信して戻す)。何か案は？

4

3 に答える 3

2

恣意的なフォームはまったく必要ありません。このようなものが機能します：

マークアップの例（データ属性に注意してください）：

<a href="#" data-id="2" class="likeable">Item to like</a>

jQuery：

$('a.likeable').on('click', function() {
    var $item = $(this);
    var id = $item.data('id');

    $.post('url/like/' + id, function() {
      // success
      // do something with $item here.
    });
});
于 2013-01-15T18:51:04.320 に答える
1

次のような要素がある場合:<div id="foo" data-id="foo1234">Foo</div>

のIDがまだあると仮定すると、次のようにajax投稿の後に選択できますfoo1234。

$('[data-id="' + id  + '"]').doSomething();
于 2013-01-15T18:49:42.040 に答える
1

jQueryのajax機能を使うだけ

$('.love_item').on('click', function(e) {

  $.ajax({
    type: 'POST',
    url: *insert url here*,
    data: 'id=' + e.currentTarget.data-id,
    success: function(response) {

      var element = e.currentTarget;

      // do whatever
    }
  })
});
于 2013-01-15T18:56:43.983 に答える