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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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

0回答

1685閲覧

Ruby on Rails で Javascriptが読み込まれない

yukio11

総合スコア7

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クリップ

投稿2017/05/23 17:45

編集2022/01/12 10:55

概要

Ruby on Rails でアプリケーションを開発中。Javascriptを使用します。
昨日まで正常に読み込むことができていたJavascriptが、なぜか読まれなくなってしまいました。原因がわかりません。
どなたかお詳しい方、アドバイス等ご教示いただけると幸いです...!

正しい処理の流れ

_form.html.hamlのフォーム送信ボタンがクリックされると、message.jsの $('.form__submit').on('submit', function(e)...で発火し、その後のコードが処理される。e.preventDefaultでイベントをキャンセルし、のちにajaxでmessage_controller.rbのcreateメソッドにjson形式でリクエストを送る。

実際の流れ

_form.html.hamlのフォーム送信ボタンがクリックされると、message.jsの $('.form__submit').on('submit', function(e)...で発火せず、message_controller.rbにhtml形式でリクエストが送られる。

ソースコード

message.js

$(function() { function new_message(data) { console.log('veryGood!'); var new_message = $('<div class="msg">' + '<p class="msg__username">'+ message.user +'</p>' + '<p class="msg__time">'+ message.time + '<p>' + '<p class ="msg__passage">' + message.text +'</p>' + '</div>'); return new_message; } $('.form__submit').on('submit', function(e) { e.preventDefault(); console.log('goodgood!'); var api_url = window.location.pathname; //リクエストのパスを取得 var message = $('.form__textfield').val(); var user_id = $('#message_user_id').val(); var group_id = api_url.replace ( /[^\d.]/g, '' ); var formdata = new FormData($(this).get(0)); for(item of formdata) console.log(item); formdata.append("message[user_id]", user_id); formdata.append("message[group_id]", group_id); $.ajax({ url: api_url, type: 'POST', data: formdata, contentType: false, proccessData: false, dataType: 'json' }) .done(function(data){ console.log('success!'); var html = new_message(data); $('.chat__content').append(html); // 'chat__content'の末尾に'html'を加える $('.form__submit').val(''); }) .fail(function(data){ console.log('error!'); }); }); });

message_controller.rb

class MessagesController < ApplicationController def index @group = Group.find(params[:group_id]) @members = @group.users.map{|user| user[:name]}.join(' ') @message = Message.new @message.user_id = current_user.id end def create binding.pry @message = Message.new(message_params) @message.user_id = current_user.id @message.group = Group.find(params[:group_id]) if @message.save respond_to do |format| format.html do redirect_to group_messages_path(params[:group_id]) end format.json do render json: { user: @message.user.name, body: @message.body , created_at: @message.created_at} redirect_to group_messages_path(params[:group_id]) end end else flash[:notice] = "メッセージを入力してください" redirect_to group_messages_path(params[:group_id]) end end private def message_params params.require(:message).permit(:body ,:image, :user_id).merge(group_id: params[:group_id]) end end

_form.html.haml

= form_for [@group, @message], html: {class: 'msg_form'} do |f| = f.hidden_field :user_id, value: "#{@message.user_id}" = f.text_field :body, autofocus: true, placeholder: "type a message", class: "form__textfield" = link_to "#" do %i{class:"fa fa-picture-o"} = f.submit "Submit", class: "form__submit"

gemfile

source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.0', '>= 5.0.0.1' # Use mysql as the database for Active Record gem 'mysql2', '>= 0.3.18', '< 0.5' # Use Puma as the app server gem 'puma', '~> 3.0' # Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5' # Use Redis adapter to run Action Cable in production # gem 'redis', '~> 3.0' # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development gem "haml-rails", "~> 0.9" gem 'font-awesome-sass', '~> 4.7.0' gem 'devise' group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platform: :mri end group :development do # Access an IRB console on exception pages or by using <%= console %> anywhere in the code. gem 'web-console', '>= 3.3.0' gem 'listen', '~> 3.0.5' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' gem 'erb2haml' gem 'pry' gem 'better_errors' gem 'binding_of_caller' end group :test do gem 'rspec-rails' gem 'factory_girl_rails', "~> 4.4.1" gem 'faker' # Use assert_template. gem 'rails-controller-testing' end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問