1

別のパーシャルに表示されるデータの開始と終了を示す 2 つの日付ピッカーを持つパーシャルがあります。いくつかの事前定義されたイベントの日付範囲を決定するためのドロップダウンもあります。問題は、ドロップダウンを変更しても日付ピッカーの内容が更新されないことです。第二に、日付ピッカーのいずれかを変更すると、ドロップダウンがデフォルトの「イベントなし」に戻り、それも機能しないことも望んでいます。また、JavaScript や Rails に関しては初心者でもあります。これは、おそらく私のコードで明らかです。

日付範囲と JavaScript を含むパーシャル:

<script type="text/javascript" charset="utf-8">

  var set_default_dates = function() {
    var start = $("#_start_date")
    var end = $("#_end_date")
    var min_date = new Date("<%= @min_date.strftime("%m/%d/%Y") %>")
    var max_date = new Date("<%= @max_date.strftime("%m/%d/%Y") %>")
    start.datepicker('option', 'minDate', min_date);
    start.datepicker('option', 'maxDate', max_date);
    end.datepicker('option', 'minDate', min_date);
    end.datepicker('option', 'maxDate', max_date);
    start.datepicker("setDate", min_date);
    end.datepicker("setDate", max_date);

    var curr_start_date = new Date("<%= session[:dashboards][:start_date].strftime("%m/%d/%Y") %>");
    var curr_end_date = new Date("<%= session[:dashboards][:end_date].strftime("%m/%d/%Y") %>");
    window.alert(curr_start_date);
    start.datepicker("setDate", curr_start_date);
    end.datepicker("setDate", curr_end_date);
  }
  window.onload = set_default_dates;

</script>
<div class="form-inline"  style="width:240px">
  <table>
    <tr>
      <td>
        Start Date:
        <%= datepicker_input "", "start_date", data: {remote: true} %>
      </td>
    </tr>
    <tr>
      <td>
        End Date:
        <%= datepicker_input "", "end_date", data: {remote: true} %>
      </td>
    </tr>
  <tr>
    <td>
      Select Event:
      <%= select_tag(
        :chosen_event,
        options_for_select(get_event_names,
          session[:dashboards][:chosen_event]),
        data: {remote: true,
          chosen_event: :chosen_event
        }
      ) %>
    </td>
  </tr>
  </table>
</div>

日付範囲の更新のためにセッションを更新するコントローラーのコード:

  #just gets the first and last date from the database to determine ranges
  @min_date = get_first_date
  @max_date = get_last_date

  if params[:start_date] || params[:end_date]
    session[:dashboards][:chosen_event] == DashboardsHelper::NO_EVENT
  end

  if params[:chosen_event]
    session[:dashboards][:chosen_event] = params[:chosen_event]
    if params[:chosen_event] == DashboardsHelper::NO_EVENT
      session[:dashboards][:start_date] = @min_date
      session[:dashboards][:end_date] = @max_date
    else
      event = Event.order(:name).where(name: params[:chosen_event]).find(:all)[0]
      session[:dashboards][:start_date] = event.start
      if (event.end)
        session[:dashboards][:end_date] = event.end
      end
    end
  end
  ....

  respond_to do |format|
    format.html
    format.js
  end

私のindex.js.erbには、更新する部分が含まれています。テーブルが適切に更新され、日付ピッカーと同じであるため、イベントの選択が機能していることはわかっています。それらを変更すると、テーブルが期待どおりに更新されます。

onSelect を試してみましたが、問題ないようです。現在のところ、window.alert が起動していないため、curr_start_date 変数と curr_end_date 変数が更新されていないと考えられます。何が起こっているかというと、イベントのドロップダウンを変更すると、日付ピッカーの内容が空になります。私はまた、私のjavascriptのためにこれを試しました:

<script type="text/javascript" charset="utf-8">

  var set_current_dates = function(){

    var start = $("#_start_date")
    var end = $("#_end_date")
    var curr_start_date = new Date("<%= session[:dashboards][:start_date].strftime("%m/%d/%Y") %>");
    var curr_end_date = new Date("<%= session[:dashboards][:end_date].strftime("%m/%d/%Y") %>");
    window.alert(curr_start_date);
    start.datepicker("setDate", curr_start_date);
    end.datepicker("setDate", curr_end_date);
  }

  var set_default_dates = function() {
    var start = $("#_start_date")
    var end = $("#_end_date")
    var min_date = new Date("<%= @min_date.strftime("%m/%d/%Y") %>")
    var max_date = new Date("<%= @max_date.strftime("%m/%d/%Y") %>")
    start.datepicker('option', 'minDate', min_date);
    start.datepicker('option', 'maxDate', max_date);
    end.datepicker('option', 'minDate', min_date);
    end.datepicker('option', 'maxDate', max_date);
    start.datepicker("setDate", min_date);
    end.datepicker("setDate", max_date);
    set_current_dates();
  }
  window.onload = set_default_dates;
  $("#chosen_event").onchange = set_current_dates;

</script>

ここでも、同じ動作が発生します。テーブルが適切に更新されていても、日付ピッカーが空白になり、アラートは発生しません。

選択ドロップダウンの変更を反映するように日付ピッカーを更新するにはどうすればよいですか? またその逆も同様です。

4

1 に答える 1

0

jqueryで入力フィールドの値を指定することで、これを行うことができます。以下のように

$('#_start_date').val(min_date);
$('#_end_date').val(max_date);

これにより、日付ピッカーの選択ドロップダウンで選択した日付も更新されます。

于 2013-03-20T18:11:53.150 に答える