上記のような仕組みでjqueryを発火させたく、下記のようなコードを書きました。
js
1 var current_group = $(".main-header__left-box__current-group").data("group-id"); 2 $(".group").ready(function () { 3 $(".group").find(function () { 4 $(`[data-group-id=${current_group}]`).addClass("group__side_current"); 5 }); 6 });
左ナビのhaml
haml
1 .groups 2 - current_user.groups.order("created_at DESC").each do |group| 3 %div{class: "group", "data-group-id": "#{group.id}"} 4 = link_to group_messages_path(group) do 5 %p.group__group-name 6 = group.name 7 %p.group__latest-message 8 = group.show_last_message
ヘッダーのhaml
haml
1.main-header 2 .main-header__left-box 3 %h2{class: "main-header__left-box__current-group", "data-group-id": "#{@group.id}"} 4 = @group.name
すると、下記のような問題が起こり、不完全な挙動となります。
- クリックして遷移しても変わらない。該当箇所にclassが付いていないためカレントもつかない。
- リロードするとclassがつき、それによって該当箇所にカレントがつく。
#仮説
ajaxではなくページ遷移なので、clickメソッドではなく、.readyでDOMが読み込まれた後に、data-id一致を探しに行くような記述にした。
このreadyで読み込まれているhamlが左ナビ、ヘッダー、チャット画面、フォームで部分テンプレートとなっていて、
ファイル自体は読み込まれているが、その先の部分テンプレートまで読み込まれる前にjqueryが発火し、
data-idが付いてない状態で発火しているため、classをつけるメソッドが動作せずこのような顛末になったのではないかと思っています。
検索すると、こういった読み込み原因っぽい挙動の解消についてはclickで発火と書かれていることが多いのですが、
非同期ではなくページ遷移なので、clickではカレントの実装ができませんでした。
検索のヒントでも良いので、ご意見伺えればと思います!
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。