🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

2970閲覧

rails-ujs has already been loaded!を解消したい

eita-eng

総合スコア3

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/03/27 12:52

編集2021/03/28 09:11

前提・実現したいこと

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のファイルを無くした所全て正常となるため、このファイル内に問題があると感じコードを確認していたのですが原因を突き止められませんでした...
何卒お力添えを頂ければ幸いです..

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

neko_daisuki

2021/03/27 19:15

application.html.erb に javascript_include_tag ... の行はありませんか?
eita-eng

2021/03/28 00:10

ありませんでした! 念の為、該当コードへapplication.html.erbのソースコードを記述致しました。
neko_daisuki

2021/03/28 07:39

getPage の success: function(data) の data が怪しいです。 この data に application.js が含まれていて、それが実行されているのかもしれません。 その結果 rails-ujs が重複してるのかも・・・
eita-eng

2021/03/28 09:08

おっしゃるとおり、console.logで「data」を確認した所、headの内容から全て入っておりました。 この事から重複しているという事ですね! つまりは、dataの部分をbody部分だけに絞ることが出来ればと考えたのですが、先程方法を色々調べながら試していたのですが思うようにいきません・・・dataの中身をbody部分に絞る方法はあるのでしょうか? Ajax勉強中の為、大変申し訳ないのですがご教授頂けると幸いです・・・ 私が少し試した方法として、「.event」部分の内容を切り替えていきたいので $content.html(data.find(.event).outerHTML)としてみましたがうまくいきませんでした。 (合わせてViewのソースコードを乗せさせて頂きます。)
neko_daisuki

2021/03/28 09:26

ajax のみレイアウトをオフにするには以下のようにします render layout: false if request.xhr?
neko_daisuki

2021/03/28 09:33

上記はクライアントでレスポンスを処理するのではなくレスポンス自体を変えてます。 クライアントで処理するには $content.html($(data).find(".event").html())
eita-eng

2021/03/28 09:57 編集

クライアントにて処理を記述した結果、無事エラーを出さずに実装することが叶いました!! 今回ご指摘いただいた点、自分の糧にして参ります。本当にありがとうございました! もしよろしければベストアンサーとしたいので回答つけて頂ければ幸いです! お手数でしたら私の方で明日以降にneko_daisukiさんの回答を添えて記述しておきます! これで実装が進みます・・・この度はご教授頂きありがとうございました。
neko_daisuki

2021/03/28 17:32

すみません。回答の方お願いします。
guest

回答1

0

自己解決

success: function(data)のdata内でapplication.jsを読み込んでおりここで重複していることが発覚致しました。
そのため下記の様にレスポンスを指定したことにより解決へと至りました!

js

1$content.html($(data).find(".event").html())

投稿2021/03/29 02:30

eita-eng

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問