以下の問題について、何かご存知の方いらっしゃいましたら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 .
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。