Q&A
application.html.erb に javascript_include_tag ... の行はありませんか？
前提・実現したいこと
ajaxを用いてページ遷移を行いたいと思っております。機能自体は成功しているのですが、これを導入した事によって他のjs機能が動かなくなります。
このajax機能のファイルがない場合はエラーも出ないので、ファイルor読み込みの順番に問題があると感じているのですがエラーが消えません...
発生している問題・エラーメッセージ
該当のソースコード
↓ajax_event.js
JavaScript
1$(function(){ 2 //ページを表示させる箇所の設定 3 var $content = $('.event'); 4 //ボタンをクリックした時の処理 5 $(document).on('click', '.department-name', function(event) { 6 event.preventDefault(); 7 //.department-nameのhrefにあるリンク先を保存 8 var link = $(this).attr("href"); 9 //リンク先が今と同じであれば遷移しない 10 if(link == lastpage.href){ 11 return false; 12 }else{ 13 $content.fadeOut(600, function() { 14 getPage(link); 15 }); 16 //今のリンク先を保存 17 lastpage = link; 18 } 19 20 }); 21 //初期設定 22 getPage(location.href); 23 var lastpage = location.href; 24 //ページを取得してくる 25 function getPage(elm){ 26 $.ajax({ 27 type: 'GET', 28 url: elm, 29 dataType: 'html', 30 success: function(data){ 31 $content.html(data).fadeIn(600); 32 }, 33 error:function() { 34 alert('問題がありました。'); 35 } 36 }); 37 }; 38});
↓application.js
Js
1// This file is automatically compiled by Webpack, along with any other files 2// present in this directory. You're encouraged to place your actual application logic in 3// a relevant structure within app/javascript and only use these pack files to reference 4// that code so it'll be compiled. 5 6require("@rails/ujs").start() 7// require("turbolinks").start() 8require("@rails/activestorage").start() 9require("channels") 10require('jquery') 11require("../balloon") 12require('../tab') 13require('../ajax_event') 14 15 16// Uncomment to copy all static images under ../images to the output folder and reference 17// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 18// or the `imagePath` JavaScript helper below. 19// 20// const images = require.context('../images', true) 21// const imagePath = (name) => images(name, true) 22
↓application.html.erb
<!DOCTYPE html> <html> <head> <title>Powu</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%# jQuery %> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <%# flatpickr テーマ %> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css"> <%= include_gon %> <%# Sweet Alert2 %> <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%# Font Awesome (アイコン) %> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <%# jQueryui 吹き出し機能・使用可%> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <%# flatpickr (日付入力..カレンダー表示) %> <script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script> <script src="https://npmcdn.com/flatpickr/dist/l10n/ja.js"></script> </head> <body> <%= yield %> </body> </html>
↓departments/index.html.erb
Ruby
1<div class="wrapper"> 2 <nav class="navbar navbar-light bg-light fixed-top"> 3 <%= render partial: 'nav_bar', locals: { departments: @departments } %> 4 </nav> 5 6 <div class="event"> 7 <div class="box17"> 8 <div class="box-title"> 9 <p><span class="rotate-anime rotate-anime1"><i class="fa fa-cog"></i></span>P.O.W.U 取扱説明書<span class="rotate-anime rotate-anime1"><i class="fa fa-cog"></i></span></p> 10 </div> 11 <p>左上の「<i class="fa fa-bars"></i>」から予定リストを確認できます</p> 12 <p>左上の「<i class="fa fa-plus-circle"></i>」ボタンから予定表を作成できます</p> 13 <p>ユーザー名をクリックすると編集・ログアウトページへ遷移できます</p> 14 </div> 15 </div> 16</div>
↓events/index.html.erb
Ruby
1<div class="wrapper"> 2 <nav class="navbar navbar-light bg-light fixed-top"> 3 <%= render partial: 'departments/nav_bar', locals: { departments: @departments } %> 4 </nav> 5 6 <div class="event"> 7 <%= render "main_event" %> 8 </div> 9</div>
試したこと
エラー文から「すでに実行されており重複している」有無は理解できるのですが、application.js内の記述を消すとエラーは消えますが機能が働きません...
ajax_event.jsのファイルを無くした所全て正常となるため、このファイル内に問題があると感じコードを確認していたのですが原因を突き止められませんでした...
何卒お力添えを頂ければ幸いです..
ありませんでした！
念の為、該当コードへapplication.html.erbのソースコードを記述致しました。
getPage の success: function(data) の data が怪しいです。
この data に application.js が含まれていて、それが実行されているのかもしれません。
その結果 rails-ujs が重複してるのかも・・・
おっしゃるとおり、console.logで「data」を確認した所、headの内容から全て入っておりました。
この事から重複しているという事ですね！
つまりは、dataの部分をbody部分だけに絞ることが出来ればと考えたのですが、先程方法を色々調べながら試していたのですが思うようにいきません・・・dataの中身をbody部分に絞る方法はあるのでしょうか？
Ajax勉強中の為、大変申し訳ないのですがご教授頂けると幸いです・・・
私が少し試した方法として、「.event」部分の内容を切り替えていきたいので
$content.html(data.find(.event).outerHTML)としてみましたがうまくいきませんでした。
（合わせてViewのソースコードを乗せさせて頂きます。）
コントローラーのアクションで以下のようにするとlayout(application.html.erb)を読み込まなくなります。
def index
... # なんかする
render layout: false
end
アプリケーションやコントローラー単位で設定することもできます。
https://railsguides.jp/layouts_and_rendering.html#レイアウトの探索順序
ajax のみレイアウトをオフにするには以下のようにします
render layout: false if request.xhr?
上記はクライアントでレスポンスを処理するのではなくレスポンス自体を変えてます。
クライアントで処理するには
$content.html($(data).find(".event").html())
クライアントにて処理を記述した結果、無事エラーを出さずに実装することが叶いました！！
今回ご指摘いただいた点、自分の糧にして参ります。本当にありがとうございました！
もしよろしければベストアンサーとしたいので回答つけて頂ければ幸いです！
お手数でしたら私の方で明日以降にneko_daisukiさんの回答を添えて記述しておきます！
これで実装が進みます・・・この度はご教授頂きありがとうございました。
すみません。回答の方お願いします。
回答1件
0
自己解決
success: function(data)のdata内でapplication.jsを読み込んでおりここで重複していることが発覚致しました。
そのため下記の様にレスポンスを指定したことにより解決へと至りました！
js
1$content.html($(data).find(".event").html())
投稿2021/03/29 02:30
総合スコア3
あなたの回答
tips
プレビュー
