Q&A
ありがとう御座います。
試してみましたが反応しませんでした。
form_forのファイル選択ボダンをbootstrap風にしたいのですがクリックが動きません
lang
1 2 3<!-- ダミーボタンクリックでフォームボタンをトリガーするJQuery --> 4<script type="text/javascript"> 5 $('#dummy-btn').on('click', function() { 6 $('#photo_photo_image').click() 7 }); 8</script> 9 10<!-- ダミーボタン JQueryからトリガーするために id="dummy-btn"を追加 --> 11<div class="upload-button"><a class="btn btn-default" id="dummy-btn">ファイルの選択</a></div> 12 13<!-- "visibility: hidden"で見えなくしたフォーム --> 14<%= form_for(@photo, :html=>{:multipart=>true}) do |f| %> 15 <div class="field"> 16 <%= f.file_field :photo_image, style:"visibility:hidden" %> 17 </div> 18<% end %> 19 20 21 22
回答2件
0
lang
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>test</title> 5 <meta charset="UTF-8"> 6 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 8 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 9 <script type="text/javascript"> 10 $(function () { 11 $('#dummy-btn').on('click', function () { 12 $('#photo_photo_image').click(); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 <div class="upload-button"><a class="btn btn-default" id="dummy-btn">ファイルの選択</a></div> 19 <form method="POST" action="" enctype="multipart/form-data"> 20 <div class="field"> 21 <input type="file" name="file_field" id="photo_photo_image" style="visibility:hidden;"> 22 </div> 23 </form> 24 </body> 25</html>
とりあえずhtmlで書いたらWindowsのChromeではclickでファイル選択が出ました(他のブラウザは試してないです)
rubyには明るくないのですが、#photo_photo_image って作られてるんです？
投稿2015/02/05 21:43
総合スコア41
0
ベストアンサー
動かないのは、ダミーボタンが認識される前に、クリックしたらどうなるかの処理を書いてるからじゃないですかねー。
スクリプト全体を$(function() {と})();でくくって、DOM解釈後に実行するように書きなおすか、もしくは今のままのスクリプト全体をbodyタグの直前におけば、動くかも。
とりあえず前者はこんなかんじで。
lang
1$(function() { 2 $('#dummy-btn').on('click', function() { 3 $('#photo_photo_image').click() 4 }); 5})();
投稿2015/02/04 10:21
総合スコア112
visibility: hidden だと反応しないんでしたっけ？
すいません、ここらへん調査が不足してました。
すいません
erbにベタ書きしたら反応しました。
app/assets/javascriptにjs書いたら反応しないままですが
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/02/06 00:36