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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

3465閲覧

safariでjsが動かない

Masashige1005

総合スコア14

Ruby on Rails 6

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/15 01:45

編集2022/01/12 10:55

現在、それぞれのブラウザで動作チェックを行なっているのですが、safariだけjsが反応しないので質問させていただきました。safariで動作するためにはどうしたら良いのでしょうか?

view

1<div class="images-field clearfix"> 2 <%= f.label :image %> 3 <%= f.file_field :images, multiple: true, class: "file-input" %> 4 <% if @item.images.attached? %> 5 <% @item.images.each do |image| %> 6 <div class="image-box"> 7 <%= image_tag image.variant(resize: '100x100'), class:"item_images" %> 8 <p> <%= image.filename %> </p> 9 <%= f.hidden_field :images , name: "item[images][]", value: "#{image.blob.id}", style: "display: none;", class: "item-images-input" %> 10 <%= link_to "Edit", "", class: "btn-edit" %> 11 <%= file_field "edit-image","" , class: "edit-image-file-input file-input", style: "display: none;"%> 12 <%= link_to "Delete", "", class: "btn-delete" %> 13 </div> 14 <% end %> 15 <% end %> 16</div>

js

1$(document).on('click', function() { 2 3 $('#item_images').on('change',function(e){ 4 var files = e.target.files; 5 var d = (new $.Deferred()).resolve(); 6 $.each(files,function(i,file){ 7 d = d.then(function() { 8 return Uploader.upload(file)}) 9 .then(function(data){ 10 return previewImage(file, data.image_id); 11 }); 12 }); 13 $('#item_images').val(''); 14 }); 15 16 $('.images-field').on('click','.btn-edit', function(e){ 17 e.preventDefault(); 18 $(this).parent().find('.edit-image-file-input').trigger("click"); 19 }); 20 21 $('.images-field').on('change','.edit-image-file-input', function(e){ 22 var file = e.target.files[0]; 23 var image_box = $(this).parent(); 24 Uploader.upload(file).done(function(data){ 25 replaceImage(file, data.image_id, image_box); 26 }); 27 }); 28 29 $('.images-field').on('click','.btn-delete', function(e){ 30 e.preventDefault(); 31 $(this).parent().remove(); 32 }); 33 34 var replaceImage = function(imageFile, image_id, element){ 35 var reader = new FileReader(); 36 var img = element.find('img'); 37 var input = element.find('.item-images-input'); 38 var filename = element.find('p'); 39 reader.onload = function(e){ 40 input.attr({value: image_id}); 41 filename.html(imageFile.name); 42 img.attr("src", e.target.result); 43 }; 44 reader.readAsDataURL(imageFile); 45 } 46 47 var previewImage = function(imageFile, image_id){ 48 var reader = new FileReader(); 49 var img = new Image(); 50 var def =$.Deferred(); 51 reader.onload = function(e){ 52 var image_box = $('<div>',{class: 'image-box'}); 53 image_box.append(img); 54 image_box.append($('<p>').html(imageFile.name)); 55 image_box.append($('<input>').attr({ 56 name: "item[images][]", 57 value: image_id, 58 style: "display: none;", 59 type: "hidden", 60 class: "item-images-input"})); 61 image_box.append('<a href="" class= "btn-edit">Edit</a>'); 62 image_box.append($('<input>').attr({ 63 name: "edit-image[]", 64 style: "display: none;", 65 type: "file", 66 class: "edit-image-file-input file-input"})); 67 image_box.append('<a href="" class="btn-delete">Delete</a>'); 68 $('.images-field').append(image_box); 69 img.src = e.target.result; 70 def.resolve(); 71 }; 72 reader.readAsDataURL(imageFile); 73 return def.promise(); 74 } 75 76 var Uploader = { 77 upload: function(imageFile){ 78 var def =$.Deferred(); 79 var formData = new FormData(); 80 formData.append('image', imageFile); 81 $.ajax({ 82 type: "POST", 83 url: '/items/upload_image', 84 data: formData, 85 dataType: 'json', 86 processData: false, 87 contentType: false, 88 success: def.resolve 89 }) 90 return def.promise(); 91 } 92 } 93})

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

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

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

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

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

maisumakun

2020/12/15 01:52

Safariの動いているデバイスは何でしょうか?
maisumakun

2020/12/15 02:12

ブラウザコンソールにエラーなどは出ていませんか?
Masashige1005

2020/12/15 02:32 編集

コンソールでは特にエラー表示されていないです。
m.ts10806

2020/12/15 02:44

たくさんイベント書かれてますが、どの時点で動作しないのでしょうか。期待する動作は何でしょうか
m.ts10806

2020/12/15 02:45

あと、Railsでないといけないのでしたら、タグに追加してください。 Javascriptだけでは再現確認できる人は多くはないです。
Masashige1005

2020/12/15 02:51 編集

タグの更新をしました。 ドラッグ&ドロップでは反応するのは確認できましたが、ファイル選択ボタンが全く反応していないです。 ファイル選択でファイルを選択できるような動作を期待しております。 ※cursor:pointerを付与したのですが、解決には至っておりません。
guest

回答1

0

safariはイベントハンドラの第2引数にセレクタを指定しないとイベントがバブリングしなかったはずです。

それを踏まえて、この部分だけ第2引数を指定していないのは何か理由があるのでしょうか。

js

1//ここだけ第2引数がない 2 $('#item_images').on('change',function(e){ 3 var files = e.target.files; 4 var d = (new $.Deferred()).resolve(); 5 $.each(files,function(i,file){ 6 d = d.then(function() { 7 return Uploader.upload(file)}) 8 .then(function(data){ 9 return previewImage(file, data.image_id); 10 }); 11 }); 12 $('#item_images').val(''); 13 });

投稿2020/12/15 06:10

編集2020/12/15 06:12
FKM

総合スコア3608

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問