0

テーブルに従業員の勤務シフトを表示するRailsアプリがあります。ユーザーは、 Best In Place gemを使用してテーブル内shiftstartでshiftend直接編集できます。

データベースの更新は機能していますがDIV、開始時間と終了時間の変更に応じて、シフトの期間を示すバーが拡大または縮小するように、再読み込みする必要があります。

これを行うにはJavaScriptが必要だと思いますが、簡単かもしれませんが、わかりません:)

見る

<div class="shift-data">

    <% @myShifts.where(:shiftdate => date).order(:shiftstart).each do |shift| %>

        <div id="shift_<%= shift.id %>" class="shift-item span" style="width: <%= (shift.shiftend - shift.shiftstart) / 60 / 60 / 24 * 100 %>%; left: <%= shift.shiftstart.seconds_since_midnight / 60 / 60 / 24 * 100 %>%; top: 0px;">
            <div class="hider" style="background-color: #<%= shift.type.color %>;">
                <p>
                    <i class="icon gear"></i>
                    <%= best_in_place shift, :shiftstart, :type => :input, :display_with => :format_time_bip %> - <%= shift.shiftend.strftime("%H.%M") %> <span class="tag"><%= shift.type.name.upcase %></span>
                </p>
            </div>
        </div>

    <% end %>

</div>

アプリケーション.JS

$(document).ready(function() {
  /* Activating Best In Place */
  jQuery(".best_in_place").best_in_place();
});

$(function() {
  jQuery(".best_in_place").bind("ajax:success", function() {

    /* It's here I need some help .... */

  });
});

編集：

レンダリングされた HTML:

<div class="shift-data">
  <div id="shift_3" class="shift-item span" style="width: 58.333333333333336%; left: 8.333333333333332%; top: 0px;">
    <div class="hider" style="background-color: #df5c64;">
      <p>
        <i class="icon gear"></i>
        <span id="best_in_place_shift_3_shiftstart" class="best_in_place" data-original-content="2000-01-01 02:00:00 +0100" data-type="input" data-attribute="shiftstart" data-object="shift" data-url="/shifts/3">02.00</span>
        - 16.00
        <span class="tag">FERIE</span>
      </p>
    </div>
  </div>
</div>
4

1 に答える 1

2

ajax成功コールバックは、ajaxリクエストの応答を提供するはずです。

$(function() {
  jQuery(".best_in_place").bind("ajax:success", function(data) {
    var id = $(this).data('url').split('shifts/')[1]; // Maybe you don't need this

    $('#shift_' + id).css({
        'left' : 'xx',
        'width': 'xx'
    });

  });
});
于 2012-12-23T12:27:23.557 に答える