すべての質問
javascript ruby-on-rails でタグ付けされた
74 件の質問
0
票
0
回答
687
閲覧数
Rails7でStimulusが動かない(エラーなし)
プログラミング初学者です。
Rails7でポートフォリオを作成中、Stimulusを導入しようとしたところ動かず困っています。拙い文章ですみませんが、よろしくお願いいたします。
やりたいこと
見た目はまだ汚いですが、下記のようなパーシャルビューで+や-ボタンを押すとフォームのnumber_fieldの値が増減する機能をjavascrpt(Stimulus)側から実装したいと考えています。...
0
票
0
回答
879
閲覧数
rails7の「Turbo」と「link_to」と「jQuery」の相性悪くて困っています。
やりたいこと
・ユーザーの退会処理を実装したい。(is_deleted)
環境:Rails 7.0.5, ruby 3.1.2p20, AWS EC2で管理。
対象のソースコード
<%= link_to "退会", users_hide_user_path(current_user), data: { turbo_method: :delete, ...
0
票
0
回答
86
閲覧数
Ruby on Rails で作成したアプリケーションについての質問です
ゲストログイン機能を実装し、ゲストログインしている時のみ、画面上部に「current_or_guest_user.email」とポップアップがページ遷移毎表示されます。
不要なので表示させたいようにしたいのですが原因と解決方法がわかりません。
検証ツールで確認しても特にエラーは表示されません。
解決方法をご存知の方いらっしゃいましたらご教授ください。
user.rb
def self....
0
票
1
回答
121
閲覧数
Ruby on railsでgonが使えません
Ruby on rails で開発をしている初心者です。
現在、非同期通信でサブウィンドウからタスク登録ができるよう実装しているところです。
登録の際に、ログイン中のユーザーIDと結び付けてDBに保存したいと思い、gonをbundle installしたのですがうまく動作してくれません。
(application.html.erbに<%= Gon::Base.render_data %>...
1
票
0
回答
51
閲覧数
ruby on railsでのturbolinksの挙動
実行環境
ruby ver3.1.2
ruby on rails ver6.1.7.3
node ver16.20.0
質問内容
現状
現在、ruby on railsでturbolinksを使った際の挙動に悩んでいます。
トップページとアバウトページを作っており、以下のようなコードを書いています。
top.html.erb
<p>top page</p>
<%= ...
0
票
1
回答
154
閲覧数
rails側に保存した音声ファイルをReact側のwavesurferで使用したい。
解決したいこと
rails側に保存した音声ファイルをReact側のwavesurferで使用したいです。
環境
・dockerを使用して、バックエンド側(RoR)とフロントエンド側{React TypeScript *(wavesurferなどの一部はJavaScript)}に分けて開発を行っています。OSはWindowsですが、wsl2のUbuntu20.04で開発を行っています。
・...
0
票
1
回答
514
閲覧数
Rails + フロントエンドの場合のディレクトリ構成
Railsとフロントエンドを一つのリポジトリで開発する場合の一般的なディレクトリ構成がわかりません。
例えばRails API + Next.jsの場合下記の選択肢があるかなと思います。
Railsの中にfrontendという名前Next.jsのディレクトリを作る。
Next.jsの中にapiという名前でRailsのディレクトリを作る。
別のリポジトリにすべき。
...
0
票
1
回答
360
閲覧数
Ruby on Railsのapiモードでクロスオリジンの通信がしたい
ruby on railsの勉強中で、知識も乏しく拙い文章ですが、どなたか教えていただけると嬉しいです。
宜しくお願いいたします。
状況
すでに公開しているウェブサイトにお問い合わせフォームを導入しようとしています。
フロント側はhtml、javascript、apacheを、使っています。
バックエンドはapiモードでrailsを使って、メールの送信を行いたいと思っています。
【問題】
...
0
票
1
回答
301
閲覧数
railsアプリで実装中のgoogleマップをブラウザで表示させたい
課題
railsアプリでgoogleマップを実装中ですが、ブラウザに表示されません。
なんとかして表示できるようにしたいです。
発生している問題・エラー
ブラウザ上でgoogleマップが表示できません。
グーグルデベロッパーツールのコンソールで確認したところ、以下のエラーが出ていました。
ソースコード
~~~~~~~(略)~~~~~~~
<div id="map&...
0
票
2
回答
336
閲覧数
rails6 passwordの表示/非表示切り替えについて
やりたいこと
パスワードとパスワード確認の入力文字列をアイコンのクリックで表示非表示を切り替えたいです。
下記のサイトを参考にして試みているのですがうまくいきません。
Login form with password show and hide button using JavaScript
何がおかしいのかよくわからず、困っています。アドバイスいただければ有難いです。
現状
...
0
票
1
回答
440
閲覧数
Rails + webpacker における global と window と config/webpack/environment.js の違い
Rails 6 から JS が webpacker 管理になって
ビューに onclick="..." でうめこんだJSが動いたり動かなかったりするので困っています
モジュールになっちゃうせいでグローバルコンテキストにないせいかと思うんですが
window.xxx に代入する
global.xxx に代入する
config/webpack/environment.js の ...
0
票
0
回答
147
閲覧数
Rails での jqueryを使用し、HTMLから値を取り出す方法について
ruby,ruby on rails, JavaScript初学者です。
飲食店の予約サイトを作成中です。
rails6.0.0において、jqueryを使用し、添付写真のコースプルダウンを選ぶと、一人当たりのお支払いを出力し、人数と入力したら、一人当たりのお支払い×人数の値を出力したいです。
以下コードにて一人当たりのお支払いを出力したいのですが、エラーが発生してしまいます。
※現状コードでは、...
0
票
2
回答
4,818
閲覧数
javascriptの変数をcontrollerに渡すには?
解決したいこと
下記の処理を作成したいです。
ボタンを押下のような動作をトリガーとして、javascriptの変数をcontrollerに渡す
controllerは受け取った変数で何らかの処理を行い、処理結果をviewに渡し画面表示する
1.の処理のうち「javascriptの変数をcontrollerに渡す」をどのように実現するかが分からなく、方法やコードをご教示いただけないでしょうか。
...
0
票
1
回答
335
閲覧数
インクリメンタルサーチで表示させたカラム値をクリック後、入力フォームに表示されたい
環境
ruby 2.7.2
rails 6.1
macOS
前提
ポートフォリオ作成のため、現在自作アプリを実装しております。
その中で、インクリメンタルサーチを機能の一つとして実装しております(下記参照)
参考記事:https://qiita.com/junyais30st/items/f1ad5bd3b025434983b7
解決したいこと
...
1
票
1
回答
366
閲覧数
Rails6/Webpacker環境で外部JSファイル内でHTMLのIDを取得したい
発生している問題
外部Javascript内でdocument.getElementByIdを使用しHTMLのIDを取得しようとするとUncaught TypeError: document.getElementById(...) is null が発生します。
app/javascript/chk_waittime/index.js
document.getElementById('...
0
票
1
回答
984
閲覧数
Ajaxを用いて非同期でコメント機能を実装したのですが、コメント投稿後、render処理でTemplate is missingエラーが表示されてしまう
環境
ruby 2.7.2
rails 6.1
macOS
前提
下記の記事を参考に、非同期でのコメント投稿機能を実装いたしました。
[Rails] Ajaxを用いて非同期でコメント機能の実装
解決したいこと
コメント投稿機能を非同期で実装させたいです!
試したこと
renderで問題が発生しているため、render :indexを仮でredirect_to root_pathと変更した所、...
0
票
1
回答
706
閲覧数
非同期通信を用いたいいね機能が実装できない。
やりたいこととしては、非同期通信を用いたいいね機能を実装したい(動画投稿ページに)
ポートフォリオの概要としては、動画を投稿する専用のページとツイート専用のページを分けています。
投稿一覧ページに飛ぶことができるようになったのですが、非同期通信が動かなくなってしまいました。
こちらは動画のURLです。
https://gyazo.com/...
1
票
1
回答
6,697
閲覧数
Vue.jsの読み込み時にエラー: Failed to load resource: the server responded with a status of 404
Vue.jsなのですが、jsファイルが読み込まれず、現在そのまま{{message}}と記述されしまいます
コンソールには以下のエラーです
Hello Vueと表示させたいのですが、どうすれば良いでしょうか?
Failed to load resource: the server responded with a status of 404 (Not Found)
app/javascript/...
0
票
1
回答
1,098
閲覧数
create.js.erbにjsコードを記述してもVSコード上で色が変わらない(無効な状態):ActionCable
ActiveCableを使用し、非同期通信でチャットができるように実装をしています。
初学者であるため、基本ができていないかもしれないのと、特にJavaScriptは知識が浅く調べても基本的な事すぎてなのか原因などが出てこないため、こちらで質問をさせていただきます。
下記のwebサイトを参考にし、実装を進めています。
【Rails6】 Action CableでSlack風チャットアプリを作成 - ...
0
票
1
回答
204
閲覧数
railsにて地図の緯度経度を使用したい為にAjax通信を用いたがコントローラーへ値が送信できない
[実現したいこと]
住所を元に作成したgooglemapを無料で埋め込みたい。
[経緯/考察]
Google ApiのGeocodingは有料とのことでしたので、色々と探していたところ
無料で緯度経度を検索できる「Community Geocoder」なるものを見つけたので
こちらを利用してjavascriptで緯度経度を求めました。
...
0
票
2
回答
204
閲覧数
WebSocket を通じてデータを受け取った際にmessageハンドラーが発火しない
実現したいこと
Railsアプリケーションで作成しているチャット機能でメッセージを受け取った際に、JavaScriptのイベントハンドラーを発火させたい。
現在のコード
現在は下記URLを参考に 'message' ハンドラーを使用している。
https://developer.mozilla.org/ja/docs/Web/API/WebSocket/message_event
...
0
票
1
回答
572
閲覧数
ローカルで動くチャット機能が本番環境で動作しない
実現したいこと
本番環境で動かないチャットアプリを動作するよう設定したい
改善するために必要な要素を特定したい
実行環境
Rails 5.2.4.2
nginx 1.12.2
unicorn 5.4.1
AmazonLinux2
エラー
デベロッパーツールのコンソール
WebSocket connection to 'wss://ドメイン/cable' failed: Error during ...
1
票
0
回答
697
閲覧数
Rails のデータの値を変数として Chart.js で円グラフに代入して表示させたい
実現したい事
Chart.jsの円グラフの各ラベルの値を、Railsから取得し円グラフに反映させたい
※1対多の関係にあり、実際の値は、親ではなく子モデルにあります
環境
・Ruby:2.6.5
・Rails:5.2.4.3
・DB設計 ※詳細は下記コード
親:Recordテーブル
子:Practiceテーブル
試した事
RailsデータをJSに反映させるため、gem ...
1
票
2
回答
1,352
閲覧数
Railsで作成したアプリが本番環境(AWS)でのみルーティングエラーを出す
環境
rails 6.0.2.1
ruby 2.6.3
amazon linux
mysql
unicorn
nginx
実現したいこと
現在、インスタクローンアプリを作成し、AWSにデプロイしています。
「かんたんログイン」と「通常ユーザのログアウト機能」を本番環境でも開発環境と同様に動くようにしたいです。
起きているエラー
・本番環境でかんたんログインができない
・...
0
票
1
回答
357
閲覧数
タブごとに別の計算結果を表示させたい
前提・実現したいこと
開始時間と終了時間の入力をさせ、その差分によって金額を表示するフォームを作成しています。
railsとjQueryを使用しており、機能は以下のようなものです。
・タブ切り替えができる
・どのタブも同じ内容の計算フォームが表示される
・タブごとに時間入力でき、計算結果を表示させることができる
なお、計算フォームは部分テンプレートで切り出しています。
発生している問題・...
0
票
2
回答
496
閲覧数
非同期通信で会話機能を導入しているのですが、ページをリロードしないで、データを表示することができません。
私は、今非同期通信で会話機能を導入しようと考えています。ページ移動なしで、データを表示することができるのですが、ページ移動・リロードなしで、表示することができない状態にあります。もしわかる方がいらしたら、方法を教えて頂きたいです。
if Entry.where(:user_id => current_user.id, :room_id => params[:message][:...
0
票
1
回答
107
閲覧数
GitHubのcontributionsの部分を自作したい
前提・実現したいこと
現在GitHubのcontributionsのような部分を自作しております。
↓GitHubのcontributions部分
↓自作
発生している問題
Railsで定義した変数をJSのclickイベントで変更したいのですがやり方がわからず困っております。
具体的には上の画像で、
前の年を押したら2018年に、次の年を押したら2020年に、
その下の1〜...
2
票
1
回答
152
閲覧数
//= require と requireの違いがわかりません
jsファイルで、
//= require some.js
のようにjsファイルをrequireしているのを見つけたのですが、
var a = require('some.js')
の違いがわかりません。
//= require でググっても記事が出てこないので困っています。
0
票
1
回答
1,781
閲覧数
Bootstrapのドロップダウンが開かないことがある
*問題
Bootstrapのnavでheaderにドロップダウンメニューを導入しているのですが、ドロップダウンが開く場合と開かない場合があり困っています。
navbarには現在ビューのあるリンクとしてHome画面とEdit画面(ドロップダウン内)へのリンクがあるのですが、それらのリンク先へ遷移した直後にドロップダウンメニューが動かなくなってしまいます。しかし、ブラウザで再読込(更新)...
1
票
0
回答
37
閲覧数
webpacker のロード時に各変数を確認する方法
Webpacker で呼び出されるコードのデバックはどのようにすればよいのでしょうか?
具体的には以下のような流れで問題に直面しました。
こちらのQiitaの記事を参考にRails+Vue.jsの勉強をしていたのですが
https://qiita.com/naoki85/items/51a8b0f2cbf949d08b11
記事内にもある通りconfig/webpack/loaders/...
1
票
2
回答
1,061
閲覧数
javascriptでスライドショーを実装しようとしているが、画像が表示されない
ボタンを押すと画像の動きはあるが、写真が表示されない状態になっています。
画像が表示されるようにしたいと思ってます。よろしくお願いします。
エラー
document.addEventListener( 'DOMContentLoaded' , function( e ) {
'use strict';
var files = [
'<%= @plans....
2
票
2
回答
288
閲覧数
ajaxの非同期通信時にUnable to autoload constant ControllerとUncaught SyntaxError: Unexpected token . , compile errorのエラーが発生する
初めての質問です!
ruby on railsで現在製作中の投稿型アプリケーションの投稿機能に、ajaxで非同期通信を適用させようとしています。
createアクションにrespond_toを使って、json形式でデータをとり、ajaxでデータを返すという具合です。
ところが、いざ実装してみると一つのエラーを抜け出せず、投稿がままならない状態です。
エラー内容は、
Unable to ...
0
票
1
回答
3,603
閲覧数
axiosでHerokuに存在しているAPIサーバーからJSONをgetできない
聞きたいこと
axiosを使用してHerokuに存在しているAPIサーバーからJSONをGetしたいと思っているのですが、
以下のようなエラーが発生してしまいできません。。。
APIサーバー側・クライアント側に問題があるのかの切り分けもできていない状態です…
- エラー内容
No 'Access-Control-Allow-Origin' header is present on the ...
0
票
1
回答
206
閲覧数
Ajax対応の記述
ecサイト作成していて、Ajax対応がなかなか思うように行かないので質問させていただきます。
お気に入り機能のボタンをつけて、お気に入りしてあるか、否かの表示を切り替える際にAjaxお使いたいのですが、現在remote:true とjs.htmlファイル、部分テンプレ作成してやっているのですが,お気に入りに追加や解除しても画面が何も変わらず、ターミナルではエラー表示。...
0
票
1
回答
183
閲覧数
prodcution環境で特定のjsファイル(datetimepicker)が読み込まれない
現在rails 5.06で開発をしており、datetimepickerに必要なファイルをassets/javascript配下とassets/css配下に配置し、application.html.hamlで下記のように読み込んでおります。
<script src="/assets/jquery.datetimepicker.js"></script>
<script ...
0
票
0
回答
46
閲覧数
responsive-components機能を実装したい。
やりたいこと
Railsで下記を実装したいのです。
画面分割かつ可変なウェブコンポーネントです。
https://philipwalton.github.io/responsive-components/
困ってること
Railsに移行する方法がイメージできないこと。
現状
$ git clone
$ npm start
localhostでdemo実行
までできたのですが、...
0
票
1
回答
1,443
閲覧数
Railsで画像ファイルをJavascriptを使って操作したい
アセットパイプラインを使用する前提で、
app/assets/images/1.jpg
に画像ファイルを配置した場合、これをJavascriptで操作する際のパスの指定の仕方がわかりません。
例えば、簡単なjQueryでjsファイル(ないしはerbファイル内のscriptタグ)内で
$("button").click(function(){
$("div").css("...
1
票
1
回答
779
閲覧数
railsのいいね機能をjavascriptを使った非同期処理にしたい
サイト( http://qiita.com/YuitoSato/items/94913d6a349a530b2ea2 )を参考に実装しているのですが、2点わからないことがあります。回答よろしくお願い致します。
サイトではcreate.js.erb、destroy.js.erbとありますが、erbを使わずjsで書く場合、どのようになるのか教えていただきたいです。
また、create.js.erb、...
1
票
1
回答
235
閲覧数
intro.js inputに二つ以上設定するとエラーになる
ruby on railsでintro.jsを使用ししたいと思っています。複数ページで利用してます。
が、inputフィールドに2つintroを設定したところ2つめのところでエラーが出ます。
= f.text_field :hoge_sales, class: 'form-control', 'data-step':3, 'data-intro': '売上入力してちょ'
= f....
0
票
0
回答
155
閲覧数
bootstrapの追従機能を持つAffixプラグインがうまく機能しません
railsでbootstrapの機能であるAffixプラグインを実装しようとしているのですが、うまく機能しません。現状としては同ページ内においてリロードをかけると機能するのですが、一回目にページ遷移した際にはうまく機能してもらえません。affixの属性を挿入したものが固定のままになってしまいます。
左の部分をaffixで追従させて、右半分をbootstrapのoffsetで右に寄せています。
...
11
票
2
回答
6,446
閲覧数
videoタグ内の動画のダウンロードを難しくしたい
HTML5のvideoタグで動画を閲覧できるようにした上で、閲覧したユーザーがローカルへ動画をダウンロードすることを難しくしたいと考えています。HLSやRTMPといったストリーミングプロトコルを使わずに、sourceタグにmp4動画のURLを指定する形を想定しています。
ある程度の知識と動機のあるユーザーでなければダウンロードしないよね、ぐらいのレベルでOKです。ちなみに、...
0
票
1
回答
967
閲覧数
railsでページ読み込み時に毎回スクリプトを実行したい
文字のカウント数を表示するcoffescriptのプログラムなのですが、
ブラウザの再読込を行なった際にしか実行されません。
$(document).on 'ready page:load', ->
thisValueLength = $('#comment').val().length;
$('#count').html(thisValueLength);
...
0
票
1
回答
323
閲覧数
pagedown-bootstrap-railsでプレビューが表示されない。
前提・実現したいこと
pagedown-bootstrap-railsを実装したいです。
発生している問題・エラーメッセージ
プレビューが表示されません。
該当のソースコード
以下、実装手順とともに該当コードを記します。
【Gemfile】
gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'simple_form'
gem 'pagedown-...
0
票
1
回答
1,956
閲覧数
rails で 画像アップロードの前に既存画像と入れ替えてプレビューしたい
画像プレビュー時に、既存画像の横に、新規プレビュー画像が出ます。
既存画像と入れ替えるように、表示させるにはどうしたら良いでしょうか?
よろしくお願い致します。
<div class="field">
<%= image_tag @user.picture.url if @user.picture? %>
<%= f.label :picture, '画像' ...
1
票
1
回答
300
閲覧数
「明細を追加」ボタンを押下して、一定数の行数を超えたら、「ボタン」を非表示にしたいです。
現在、Railsアプリを製作しています。
そのアプリの中で以下のように「明細を追加」ボタンを押下してtableの行を追加していくのですが、行数が5行を超えたら、「明細を追加」ボタンを非表示にするにはどうすれば良いでしょうか?
以下のコードでは5行を超えても「明細を追加」ボタンが表示されたままで、まだ行を追加することができてしまいます。以下のRailsのコードではなく、HTMLとjQuery(...
0
票
1
回答
235
閲覧数
リッチなテキストエリアを実現するライブラリやgemを教えてください
Railsで開発中のプロジェクトに
まさに、このstackoverflowの入力欄の用に、
リッチなテキストエリアを実現したいと思っています。
これをするための、jqueryのライブラリやrailsのgemなどがあれば教えていただきたく。
何卒よろしくお願いいたします。
2
票
1
回答
1,528
閲覧数
swiper矢印をhoverしたら現れるようにしたい
画像スクローラにswiperを使っています。gemでswiper-railsというのがありそれでrailsに導入しました。
動作するようになったのですが、デフォルトだと画像にhoverしたら矢印が現れるようにできません。デフォルトでは消しといてhoverしたら矢印が現れるようにできる方法をご存知の方いらっしゃいますでしょうか?
.swiper-container
.swiper-...
0
票
1
回答
502
閲覧数
Railsのテンプレート中に記述したJavascriptを読み込み時に実行させない方法
Railsのテンプレート内に記述したJavascript文を、レンダリング時に実行されないようにしたいと考えています。
現在は、Javascriptの仕様なのか、以下のようなソースコードがある時、テンプレートがレンダリングされた時に、if文内でRubyを用いて書いた処理が実行されてしまいます。
<script type ="text/javascript">
$("#<%= ...
0
票
1
回答
158
閲覧数
jQueryのメソッド拡張をRailsで使いたい
HTML5にある、hidden属性をjQueryで扱うためにこちらにある関数を使いたいのですが、jQueryのメソッド拡張がうまくいきませんでした。
https://jsfiddle.net/jhfrench/g8Sqy/
$('button').click(function() {
$('#myElement').toggle(function() {
...
1
票
5
回答
7,292
閲覧数
datetimepickerでAM/PM表記から24時間表記に変更できない。
rails で bootstrap3-datetimepicker-rails の gemを導入し、
カレンダーの入力機能を実装しております。
デフォルトだと、AM・PMで入力時間が表示されるため、
24時間のフォーマットに変更しようと思っております。
調べていると以下のようにするとできるみたいなのですが、上手く行きませんでした。
$('#datetimepicker_05')....