#実現したいこと
submit
を押した時に送信できるようにしたい。
前提
actioncableを使ったリアルタイム掲示板を作っています。
コード
coffeescript
1# 入力時の処理 2$(document).on 'keypress', '#content', (event) -> 3 if event.shiftKey 4 if event.which is 13 5 room_id = window.location.href.match(/rooms/(.+$)/)[1] 6 # TODO: input textだとcontentでクリアされるがtextareaだとクリア出来ないため、一時手に30行目でクリアの実装をしているのが改善する必要がある。 7 content = $.trim($("#content").val()) 8 $('#content').val('') 9 has_content = if content.length > 0 then true else false 10 11 picture = $('#picture') 12 has_picture = if picture.get(0).files.length > 0 then true else false 13 14 if has_content or has_picture 15 if has_picture 16 ... 17 else 18 ... 19 20 event.preventDefault() 21 return false;
slim
1 form id="test_form" class="border" 2 .form-control.border-bottom.border-top-0.border-right-0.border-left-0 3 input type="file" id="picture" class="col-6" 4 input type="submit" id="chat" class="col-2 offset-4" 5 textarea id="content" class="form-control border-0"
#困っていること
submitボタンを押してもactioncableでテキストエリアの中身を送信してくれない
下記で#chat
を追記してみたが送信できなかったです。
$(document).on 'keypress', '#content #chat', (event) ->
追記
coffee
1# 入力時の処理 2$(document).on 'keypress', '#content', (event) -> 3 # エンターキーを押した時に処理 4 if event.shiftKey 5 if event.which is 13 6 room_id = window.location.href.match(/rooms/(.+$)/)[1] 7 # TODO: input textだとcontentでクリアされるがtextareaだとクリア出来ないため、一時手に30行目でクリアの実装をしているのが改善する必要がある。 8 content = $.trim($("#content").val()) 9 $('#content').val('') 10 has_content = if content.length > 0 then true else false 11 12 picture = $('#picture') 13 has_picture = if picture.get(0).files.length > 0 then true else false 14 15 if has_content or has_picture 16 if has_picture 17 file_name = picture.get(0).files[0].name 18 # ファイル読み込み用のreader生成 19 reader = new FileReader() 20 # Data URI Scheme文字列を取得するためのファイル読み込み 21 reader.readAsDataURL picture.get(0).files[0] 22 # readerが画像を読み込んだ後の処理 23 reader.addEventListener "loadend", -> 24 # reader.result部分が、読み込んだ画像のData URI Scheme文字列 25 App.room.speak room_id, content, reader.result, file_name 26 else 27 App.room.speak room_id, content 28 29 # 後続のイベントキャンセル 30 # これが無いとエンターを押したあとに画面が一番上まで 31 # スクロールしたりします。 32 event.preventDefault() 33 return false; 34 else if event.$('#chat') 35 room_id = window.location.href.match(/rooms/(.+$)/)[1] 36 # TODO: input textだとcontentでクリアされるがtextareaだとクリア出来ないため、一時手に30行目でクリアの実装をしているのが改善する必要がある。 37 content = $.trim($("#content").val()) 38 $('#content').val('') 39 has_content = if content.length > 0 then true else false 40 41 picture = $('#picture') 42 has_picture = if picture.get(0).files.length > 0 then true else false 43 44 if has_content or has_picture 45 if has_picture 46 file_name = picture.get(0).files[0].name 47 # ファイル読み込み用のreader生成 48 reader = new FileReader() 49 # Data URI Scheme文字列を取得するためのファイル読み込み 50 reader.readAsDataURL picture.get(0).files[0] 51 # readerが画像を読み込んだ後の処理 52 reader.addEventListener "loadend", -> 53 # reader.result部分が、読み込んだ画像のData URI Scheme文字列 54 App.room.speak room_id, content, reader.result, file_name 55 else 56 App.room.speak room_id, content 57 58 # 後続のイベントキャンセル 59 # これが無いとエンターを押したあとに画面が一番上まで 60 # スクロールしたりします。 61 event.preventDefault()
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。