前提・実現したいこと
railsで画像投稿機能を作りました。仕組みは編集ページで画像をクリックするとファイル選択ダイアログが開き、画像を選択するとそのまま展開されるというものをcoffeescriptで作っています。
この機能が編集ページ移行時は効かないのですが、ページを再読み込みしてから画像をクリックすると効くようになります。
これをページ移行時に効かせるようにするにはどのようにすればよろしいでしょうか。
発生している問題・エラーメッセージ
_form.html.erb
<%= form_for article do |f| %> <div id="cover-image" class="form-group padding-top-15 relative"> <% if article.image_id.present? %> <%= image_tag attachment_url(article, :image), class: 'article-image' %> <% else %> <%= image_tag 'gray-bg.jpeg', class: 'article-image' %> <% end %> <i class="fa fa-camera"></i> </div> <%= f.attachment_field :image %> <div class= "form-group padding-top-15"> <%= f.label :title, 'タイトル' %> <%= f.text_field :title, class: 'form-control' %> </div> <div class= "form-group"> <%= f.label :body, '本文' %> <%= f.text_area :body, rows: 10, class: 'form-control' %> </div> <%= f.submit 'Update ', class: 'btn btn-success' %> <% end %>
articles.coffee
# Place all the behaviors and hooks related to the matching controller here. # All this logic will automatically be available in application.js. # You can use CoffeeScript in this file: http://coffeescript.org/ $ -> $('#cover-image').click -> $('#article_image').click() false $('#article_image').on 'change', (e) -> file = e.target.files[0] reader = new FileReader $preview = $('.article-image') t = this # 画像ファイル以外の場合は何もしない if file.type.indexOf('image') < 0 return false # ファイル読み込みが完了した際のイベント登録 reader.onload = do (file) -> (e) -> #既存のプレビューを削除 $preview.empty() # .prevewの領域の中にロードした画像を表示するimageタグを追加 $preview.attr("src",e.target.result); return reader.readAsDataURL file return return
試したこと
調べてみると、turbolinksがjsの読み込みを妨げる場合があり、$(document).on 'turbolinks:load', ->
をcoffeescript(最上部)に追記してみましたが改善されませんでした。
リンク内容
補足情報(FW/ツールのバージョンなど)
AWS Cloud9
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。