質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

1769閲覧

railsでjavascriptファイル名によりイベント発火しない場合がある

igatail

総合スコア6

Ruby on Rails

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/05/29 03:17

編集2020/05/29 03:29

以下の問題について、何かご存知の方いらっしゃいましたらr、ヒントでも結構ですので、ご教示いただけますと幸いです。
宜しくお願いいたします。

前提・実現したいこと

rails でアプリケーションを作っており、次のjsファイルでイベントを発火させ、jqueryを動かしたい。

app/assets/javascripts/users.js

$(function(){ $("#user-search-field").on("keyup", function(){ console.log("ok"); let input = $("#user-search-field").val(); $.ajax({ type: "GET", url: "/users", data: { keyword: input }, dataType: "json" }) .done(function(users) { console.log("成功です"); }) .fail(function() { console.log("失敗です"); }); }); });

フォームに文字を入力するたびにイベント発火する想定。

発生している問題

イベントが発火せず動かない。

試したこと

ファイル名を変えてみたところ、イベントが発火し動いた。

→ ファイル名により動いたり動かなかったりする。

動く時のファイル名

test.js
search.js
group.js
users.js

動かない時のファイル名

 → コントローラ名と同じ場合
groups.js
users.js  など

補足情報(FW/ツールのバージョンなど)

コントローラ

app/controllers/users/searches_controller.rb

class Users::SearchesController < ApplicationController def index return nil if params[:keyword] == "" @users = User.where(['name LIKE ?', "%#{params[:keyword]}%"] ).where.not(id: current_user.id).limit(10) respond_to do |format| format.html format.json end end end

app/controllers/users_controller.rb

class UsersController < ApplicationController def index end def edit end def update if current_user.update(user_params) redirect_to root_path else render :edit end end private def user_params params.require(:user).permit(:name, :email) end end

次のjqueryは動く

app/assets/javascripts/message.js

$(function(){ function buildHTML(message){ if(message.image){ var html = `<div class="message"> <div class="upper-message"> <div class="upper-message__user-name"> ${message.user_name} </div> <div class="upper-message__date"> ${message.created_at} </div> </div> <div class="lower-message"> <p class="lower-message__content"> ${message.content} </p> <img src=${message.image} class="lower-message__image"> </div> </div>` return html } else { var html = `<div class="message"> <div class="upper-message"> <div class="upper-message__user-name"> ${message.user_name} </div> <div class="upper-message__date"> ${message.created_at} </div> </div> <div class="lower-message"> <p class="lower-message__content"> ${message.content} </p> </div> </div>` return html } } $("#new_message").on("submit",function(e){ e.preventDefault(); // フォームに入力された値を取得する var formData = new FormData(this); var url = $(this).attr('action') $.ajax({ url: url, type: 'POST', data: formData, dataType: 'json', processData: false, contentType: false }) .done(function(data){ console.log(this); var html = buildHTML(data); $('.chat-main__message-list').append(html); $('#message_content').val(''); $('.chat-main__message-form__submit').prop('disabled', false); $('.chat-main__message-list').animate({ scrollTop: $('.chat-main__message-list')[0].scrollHeight}); }) .fail(function(){ alert('メッセージの送信に失敗しました') $('#message_content').val(''); $('.chat-main__message-form__submit').prop('disabled', false); }) }) })

app/assets/javascripts/application.js

//= require jquery //= require jquery_ujs //= require_tree .

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

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

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

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

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

guest

回答1

0

自己解決

ディレクトリのツリーを見ていたところ、users.jsと同じjavascriptsディレクトリ内にusers.cofee,groups.cofeeと言ったファイルがあることに気付き、
試しにuser.coffee をリネームして読見込まないようにしたら、users.jsが動きました。
coffeescriptについてよくわかっていませんが、影響していたようです。

投稿2020/05/29 04:44

igatail

総合スコア6

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問