ページ遷移後のjsの処理

Question

いつもお世話になっております。

前回の質問で、CSSとアニメーションが動かない原因について解決して
いただいたのですが、遷移後のスライダー等のjsが動かない件について
教えていただいたBarba.Dispatcherを参考に処理を行ってみたのですが、
headのtitleなどは切り替わっているみたいなのですが、jsは動いていないようです…。

headを切り替えるBarba.Dispatcherとは違うコードが必要なのでしょうか？
scriptはまた別の処理方法があるのでしょうか？
何度も同じような質問ばかりで恐縮ではございますが、ご教示の程よろしくお願いいたします。

https://www.rakuten.ne.jp/gold/tokeiten/feature/monitor-citizen/test.html

Accepted Answer

ECマスターズの田中です。

test.htmlをChromeで開いて
デベロッパー ツールのConsoleを開くと、

Uncaught TypeError: Cannot read property 'resize' of undefined
    at Object. (script.js:49)
(後略)

という赤文字のエラーが表示されており、
「script.js:49」をクリックすると、

        Barba.Dispatcher.on("newPageReady", function(){
            window.innerWidth > 768 && FastClick.attach(document.body)
        }).resize()

の「.resize()」を実行した時にエラーが出ていることがわかりました。

おそらく、この「.resize()」は、37行目に影響された書き損じかと思われますので、
確認の上、必要なければ削除していただき、
改めて動作確認していただきますようお願いします。

Answer

ECマスターズの田中です。

test.htmlをChromeで開いて
デベロッパー ツールのConsoleを開くと、

Uncaught ReferenceError: hljs is not defined
    at Object. (pjax.js:69)
    at Object.trigger (barba.min.js:1)
    at Object.init (barba.min.js:1)
    at Object.start (barba.min.js:1)
    at pjax.js:87

という赤文字のエラーが表示されており、
「pjax.js:69」をクリックすると、
下記のとおりエラー表示がされておりました。
https://ec-masters.gyazo.com/353e7ac58127d9f59b6c73b49646e5f2

initHighlighting が使われているライブラリは
https://tr.you84815.space/hljs/api/init-highlighting.html
上記「highlight.js」のようですが、
このライブラリがページ内で読み込まれている様子がありませんでした。
必要に応じて読み込みをお願いします。

Consoleの赤文字エラーがなくなりましたら、
改めて、動作をご確認いただきますようお願いします。

Answer

ご回答ありがとうございます。
再度確認してみましたら、遷移後のスライダーが動いておりました。
ただ遷移するときのアニメーションが動かなくなっており、
遷移後のJSが優先になって、遷移するときのアニメーションが動かなくなっているのでしょうか。

Answer

ECマスターズの田中です。

test.htmlをChromeで開いて
デベロッパー ツールのConsoleを開くと、

Uncaught Error: Barba.js: DOM not ready!
    at Object.getContainer (barba.min.js:1)
    at Object.init (barba.min.js:1)
    at Object.start (barba.min.js:1)
    at pjax.js:48

という赤文字のエラーが表示されており、
「pjax.js:48」をクリックすると、

Barba.Pjax.start();

を実行した時にエラーが出ていることがわかりました。

「DOM not ready!」ということは、
HTMLがすべて読み込まれていない状態で
Barbaの仕組みを動作させようとしたことが原因となりますので、

pjax.jsの内容全体を
$(function(){
と
});
で囲んでいただきますようお願いします。（12/26 11:23 ソース修正）

その上で、赤文字のエラーが発生していないかどうか、
発生していない場合に、遷移時のアニメーションが動作するかどうか、
それぞれご確認いただきますようお願いします。

Answer

$(function(){
と
});
でjsを囲みましたら遷移時のアニメーションが起動いたしました！
ありがとうございます！
ただ、やはり遷移時のアニメーションが起動すると、遷移後のスライダーなどが動いておらず、
こちらで確認する限り目立ったエラーはみあ見当たらず……

追記でBarba.Dispatcherを入れる必要があるのでしょうか。

Answer

ECマスターズの田中です。

おっしゃる通り、Barba.Dispatcherを利用する仕組みに
ご変更いただく必要がございます。

xc-monitor.htmlのスライダーを例に取りますと、

var swiper;
$(function(){
    swiper = new Swiper('.swiper-container', {
    navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},// ここにオプションを記述
    });
});

という記述で、swiperによるスライダーの動作が行われておりますが、
$(function(){
は、ページ内のHTMLタグの読み込みが完了したら動作する、
という意味ですので、
Barba.jsによるページ遷移では作動しません。
https://qiita.com/AkihikoIkeda/items/9dda2dda70b77c8eeca4

上記ページで記載されているような、
ページ読み込み時に動作する、という仕組みは、すべて

Barba.Dispatcher.on("newPageReady", function(){

を利用した仕組みにご変更いただきますようお願いします。

Answer

Barba.Dispatcher.on("newPageReady", function(){
に変更しましたらスライダーの方は動きました。
ありがとうございます！

まだ遷移後のページでスマホメニューが出てこない問題があり、
script.jsをいじれば動くかなと試しましたが動く気配がありません…。
ソースの中に
 $(window).on("load", function() {
がありますが、こちら関係ありますか？

Answer

ECマスターズの田中です。

はい、ページの中で読み込まれている
あらゆるJavaScriptに、
ページ読み込み時に動作する記述が行われておりますので、
$(window).on("load", function() {
も含め、同様の処理をすべてBarba.Dispatcherを利用する記述に
ご変更いただく必要がございます。

Answer

ありがとうございます。
また、時間が経つと遷移時のアニメーションが動かなくなっており、
見てみますと前回と同じくBarba.Pjax.start();が読み込めていないようで、
修正してからいじってもいないので、何が原因で読み込まなくなっているのか分かりません…。
pjax.jsのなかにおかしなコードでもあるのでしょうか。

Answer

ECマスターズの伊藤です。

いただいたご質問ですが担当より1/6以降に
ご回答させていただきます。

恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

.resize()を削除しましたら問題なく動くようになりました！
ありがとうございます！