質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

2986閲覧

rails cocoonを使ってinputを追加するとflatpickrの値が消えてしまいます

mr.james

総合スコア11

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2017/05/02 03:22

###前提・実現したいこと
Ruby on Railsで日付を登録できるシステムを作っています。
その際に、cocoonというgemを使用し、inputタグを追加したり削除が簡単にできるようになりました。
そのinputにflatpickrを使ってカレンダーから日付を選択できる機能を導入しました。

しかしそこで追加を押し、2つ目のinputを追加すると1つ目の値が初期化されてしまいます。
御手数ですが、解決策をご教示いただきたいです。
よろしくお願いします!

###view.slim

#flatpickr_fix = f.fields_for :schedules do |ff| .mb10.nested-fields - if f.index.is_a?(Numeric) = f.index + 1 | 投稿目: - else span.mr74 = f.text_field :start_on, required: true, class: "js-selector" span.mr5.ml5 | から = f.text_field :end_on, required: true, class: "js-selector" = link_to_remove_association "削除", f .links = link_to_add_association '追加', f, :schedules

###common.coffee

$(".js-selector").flatpickr( "locale": "ja" "minDate": "today" "allowInput": true "dateFormat": "Y/m/d" ) $(document).on('ready page:change', -> $('#flatpickr_fix').on('cocoon:after-insert', -> $(".js-selector").flatpickr( "locale": "ja" "minDate": "today" "allowInput": true "dateFormat": "Y/m/d" ) ) )

###試したこと
初めは追加を押すと2つ目のinputにカレンダーが表示されないというバグが起きたので#flatpicker_fixで修正しました。その結果、表題のようなバグが発生してしまいした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

公式に

javascript

1$('##flatpickr_fix').on('cocoon:before-insert', function(e, insertedItem) { 2 // ... do something 3 });

とあるようにinsertedItemという引数を補足することによって。
追加された部分だけを対象に、javascriptが適用できます。

現在のmr.james様のコードだと追加の
たびにjs-selector class全てに
flatpickrを適用しているので、全てが初期化されてしまっています。

投稿2017/05/02 05:21

moke

総合スコア2241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mr.james

2017/05/02 05:46

ご回答いただきありがとうございます。 無事に解決できました。m()m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問