web-dev-qa-db-ja.com

Rails 4 + simple_formおよびjQueryUI。Datepickerがターボリンク経由で機能していません

私はdatepickerを呼び出すこのフォームを持っています：

...
<%= f.input :expiration_date, as: :datepicker, required: false %>
...

Simple_formラッパー：app/input/datepicker_input.rb

class DatepickerInput < SimpleForm::Inputs::Base
  def input
    @builder.text_field(attribute_name, input_html_options) + \
    @builder.hidden_field(attribute_name, { :class => attribute_name.to_s + "-alt"})
  end
end

ページが最初から読み込まれると（$（document）.ready event）、次のhtmlが生成されます。

<input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" type="text">

ただし、ページにターボリンクが読み込まれると（サイドナビゲーションバーの「page：load」イベントから）、レンダリングされるHTMLは次のようになります。

<input class="datepicker optional form-control" id="order_expiration_date" name="order[expiration_date]" type="text">

もちろん、.html.erbまたはapplication.jsファイルにhasDatepickerクラスを追加するだけでもかまいませんが、Rails機能を使用して、それを実現できるかどうか疑問に思います。

ruby-on-rails-4datepickerjquery-ui-datepickersimple-formturbolinks
10
Extrapolator

私はついに適切な修正を見つけました：

app/input/datepicker_input.rbは同じままで、ラッパーは正常に機能します。

assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.js
//= require_tree .

$(document).on("page:load ready", function(){
    $("input.datepicker").datepicker();
});

：datepicker入力タイプはレンダリングされたHTMLに「.datepicker」クラスを追加するため、datepicker（）をそのクラスのすべての要素にバインドするだけで十分です。それは最小限のコードでトリックを行います。

「.datepicker」クラスはラベルタグと入力タグの両方に追加されるため、「input.datepicker」を指定することが重要です。

ターボリンクはpage：loadイベントをスローするため、ページがターボリンクで読み込まれる場合と最初から読み込まれる場合（ウィンドウの更新、お気に入りに保存されたリンクなど）の両方の場合のハンドラーを追加しました。

これで、次の.html.erbが期待どおりにレンダリングされます。

<%= f.input :expiration_date, as: :datepicker, required: false,
    :placeholder => 'Select date', input_html: {class: "form-control"},
    label: "Expiration date: " %>

出力：

<div class="control-group datepicker optional order_expiration_date">
  <label class="datepicker optional control-label" for="order_expiration_date">Expiration date: </label>
  <div class="controls">
    <input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" placeholder="Select date" type="text">
    <input class="expiration_date-alt" id="order_expiration_date" name="order[expiration_date]" type="hidden">
  </div>
</div>
13
Extrapolator

以下は、_simple_form_および_jquery-ui_で機能します。

js：

$('input#date_field').datepicker();

形：

_<%= f.text_field :expiration_date, :placeholder => 'Select Date' %>_

したがって、_as: :datepicker_なし。

3
Matthias

これを試して：

<%= f.text_field :expiration_date, as: :datepicker, :placeholder => 'Select Expiration Date' %>

Javascript

 $(document).ready(function() {
    $('#order_expiration_date').datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '-70:-18'
    });
  });

app/assets/javascript/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.ui.all
//= require turbolinks
1
Gagan Gami