Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@zamazama

DOMContentLoadedからturbolinks:loadへ変更

More than 1 year has passed since last update.

Action Cableの設定でつまずいたことでうまくいかない処理があったので、追記します。
ご指摘やアドバイスがありましたらコメントよろしくお願いします。

行いたいこと

チャットアプリ機能を実装する際に私が参考にしてきた記事ではページ遷移はなく、トップページでチャットのみを行うような記事でした。

今回作成したかったものは、各ページからチャットルームにページ遷移を行いその中でチャットを行うというものです。

できなかったこと

他のページからチャットページへ移動した後にチャットの送信ができなくなっているということでした。
(チャットページでリロードを行うとできました。)

結論から言いますと、以下の部分のコードが作動しないということでした。
1行目のdocument.addEventListener 'DOMContentLoaded', ->はページの
こちらで説明されているようにDOMツリーの構築が完了後に動き出すということだったため、1度処理されればページの遷移を行っても問題ないと思っていました。

chatroom.coffee
document.addEventListener 'DOMContentLoaded', ->
  input = document.getElementById('chat_input') 
  data_user = input.getAttribute("data_user")
  data_room = input.getAttribute("data_room")
  button = document.getElementById('chat_button')
  button.addEventListener 'click', ->
    content = input.value
    App.chatroom.speak(content, data_user, data_room)
    input.value = ''
    return
  return

解決方法

以下1行目のように'DOMContentLoaded'turbolinks:loadに変更することによって
DOMツリーの構築が完了後に動き出すということから、ページの読み込み時に処理をするように変わり解決しました。

また、遷移先のページで input に何も入っていない(chat_inputというidがない)状態だとUncaught TypeError: Cannot read property ' getAttribute' of undefinedというメッセージがコンソールに現れるのでif文で回避するようにしました。

chatroom.coffee
document.addEventListener 'turbolinks:load', -> #修正部分
  input = document.getElementById('chat_input') 
  if input? #修正部分
    data_user = input.getAttribute("data_user")
    data_room = input.getAttribute("data_room")
    button = document.getElementById('chat_button')
    button.addEventListener 'click', ->
      content = input.value
      App.chatroom.speak(content, data_user, data_room)
      input.value = ''
      return
    return

関連記事

Action Cableの設定でつまずいたこと
Action Cableへのidの受け渡し

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
zamazama
22歳大学生です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?