写真投稿アプリを作成中に、jQueryを用いてプレビュー表示機能を実装しようとした所、うまくプレビュー機能が機能せず、リロードを行うとプレビュー表示が成功するという問題に直面しました。
調べた所、初心者に多いミスらしく、私自身もJavaScriptにおいてturbolinksの概念が無かったため、解決にかなり時間を要しました。
ネット上でも同じような悩みを抱えている方が多かったため、参考になればと思い手順をまとめました。
動作環境
- Ruby 2.5.1
- Ruby on Rails 5.2.4
やりたかった事
写真投稿フォーム
↓
画像を選択
↓
選択した画像がプレビュー表示される
発生した問題
写真投稿フォーム
↓
画像を選択
↓
選択した画像がプレビュー表示されない選択した画像がプレビュー表示されない
↓
リロード
↓
画像を選択
↓
選択した画像がプレビュー表示される
問題のコード
$(function(){
fileField = $('#file')
#選択された画像を取得し表示
fileField.on('change', fileField, function(e) {
var file = e.target.files[0]
var reader = new FileReader(),
$preview = $("#img-field");
reader.onload = (function(file) {
return function(e) {
$preview.empty();
$preview.append($('<img>').attr({
src: e.target.result,
width: "100%",
class: "preview",
title: file.name
}));
};
})(file);
reader.readAsDataURL(file);
});
});解決方法
$(document).on('turbolinks:load', function() {
#上記のコードをここに挟む
});turbolinksによりJSが機能しない時があるとの事。
上記のように囲むことで、この問題は解決するようです。
turbolinksとは
turbolinksとは、一言で言うとWebアプリケーションをすばやく表示させることができるgemのこと。
rails4以降標準で用意されている。
初心者の方や、慣れている方でも忘れることが多いみたいなので、
JSが変だと思ったら、turbolinksを疑ってみましょう。
参考：https://github.com/turbolinks/turbolinks
Ruby on Railsのおすすめ本
Ruby on Rails定番の一冊です。Railsの機能について、プログラミングスクールなどでも教わらない内容も学習できて、理解を深めることができました。
Railsについてもっと詳しく知りたいという方はぜひ読んでみてください。↓↓
