スクリプトをレンダリング後に実行したい

Question

rails5.2とjavascriptで開発してます。
javascriptは特に分かりません。

ここ
を参考にしてます。

上記の、「Room.idを受け取り、監視する場所を分ける」
という箇所のスクリプトを流用しました。

app/javascript/channels/room_channel.js

/* global $*/
// $(function() {}; で囲むことでレンダリング後に実行される
// レンダリング前に実行されると $('#messages').data('room_id') が取得できない
$(function() {
  alert("test")
  const chatChannel = App.cable.subscriptions.create({ channel: 'ChatChannel', room: $('#messages').data('room_id') }, {
    connected() {
    },

    disconnected() {
    },

    received: function(data) {
      return $('#messages').append(data['message']);
    },

    post: function(message) {
      return this.perform('post', { message: message });
    }
  });

  $(document).on('keypress', '[data-behavior~=chat_post]', function(event) {
    if (event.keyCode === 13) {
      chatChannel.post(event.target.value);
      event.target.value = '';
      return event.preventDefault();
    }
  });
});

上記スクリプトは、ページのレンダリング後に実行されなければいけません。

参考先では、「$(function() {}; で囲むとレンダリング後に実行される」とコメントに記載されてます。

ですが当方の環境ではレンダリング前に実行されているようです。
というのは、2行目でalertを差し込みましたが、初回ページ表示にはalretが出ず、
F5更新でalertが出るからです。

どうすれば毎回レンダリング後に実行されるようになるでしょうか？

$(document).on('turbolinks:load', function(){
で囲ってあげるのでしょうか？
→試したいのですが、恥ずかしながら動くものを書けませんでした・・・。

分かる方教えていただけないでしょうか？
宜しくお願い致します。

Answer 1

turbolinksの利用を前提で考えるとturbolinks:renderというオプションで実装できるかと思います。

turbolinks:render fires after Turbolinks renders the page. This event fires twice during an application visit to a cached location: once after rendering the cached version, and again after rendering the fresh version.

https://github.com/turbolinks/turbolinks#full-list-of-events

なのでコードとしては下記のような形で実装できるのではないでしょうか？

$(document).on('turbolinks:render', function(){
  //ご提示頂いたJavaScript
  $(function() {
　　　:
  });
});

Comments

[pecchan]

有難う御座います。
turbolinks:loadではなくturbolinks:renderという使い方があるのですね！

記載したjava scriptを
$(document).on('turbolinks:render', function(){
}
でまるっと囲んだのですがParsing error:Unexpected token
となりました。

[no1knows]

パースエラーなので、ご提示いただいたJavaScript側でエラーが出ていますね。
alert("test")だけで、実行タイミングを確認いただき、期待する動作であれば、JavaScriptを修正していくと良いかと思います！

[pecchan]

有難う御座います。
仰る通りalert("test")だけにしてみましたが、同じエラーでした。

ひょっとして
最後の、
}
は、
});
でしょうか？
であればエラー消えました。

[no1knows]

あぁ、タイポです。申し訳ありません。

[pecchan]

今回は、turbolinks:loadで行くことにしました。
有難う御座いました！

Answer 2

windowのpageshowイベントはどうでしょう？

Comments

[pecchan]

有難う御座います。

pageshowイベント、初めて知りました。
調べた所、$(function(){});よりも実用的なようですね。
今下記を読んで勉強してます。
https://blog.leko.jp/post/how-to-treat-ready-event-in-jq-mobile/

取り急ぎお礼を。

[yambejp]

ちなみに処理順番はこんな感じ、
function→DOMContentLoaded→load→pageshow

逆順に書いても、上記のように処理されているのがわかります
$(window).on('pageshow',function(){
console.log('pageshow');
});
$(window).on('load',function(){
console.log('load');
});
$(window).on('DOMContentLoaded',function(){
console.log('DOMContentLoaded');
});
$(function(){
console.log('function');
});

[pecchan]

ご親切に有難う御座います。
逆順に記載しても仰る通りの順番でした！

問題のレンダリングですが、とりあえず
test.jsを作り
$(window).on('pageshow',function(){
alert("test");
});
としました。どのページに遷移してもalertが表示されると思ったのですが、
F5更新しないとalertが表示されないです。

何が考えられるでしょうか？

[yambejp]

pageshow後に発生するイベントについては、その要素のイベントをトレースするか
その作業後になんらかの属性がいれかわるなら
MutationObserver的な対応も可能です

[pecchan]

沢山教えていただき本当に有難う御座います。
恐縮ですが、今回は「turbolinks:load」で進めることにしました。
すみません、有難う御座いました。