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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

解決済

1回答

549閲覧

rails4でターボリンクスを切ったらJavascriptが動作しない

kenben

総合スコア17

JavaScript

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

0クリップ

投稿2018/07/10 14:34

編集2018/07/11 11:07

Rails4.1系を使用しております。
ターボリンクスが邪魔になってきたので,ターボリンクスを無効にしました。
すると動作していたJavascriptが動作しなくなってしまいました。ターボリンクスを有効にするとまた動作するようになります・・・。
もし原因がわかる方がいましたらご教示いただければ幸いです。
セレクトの入力項目によって入力するフォームの項目が出たり消えたりするものです。コードは以下のとおりです。
_js_congratulation.html.erb
#######################################33

<script> $('select#congratulation_method').change(function () { var selectval = $('select#congratulation_method option:selected').text(); if (selectval == '銀行振込') { $('#bank_name').show(); $('#bank_branch_name').show(); $('#bank_type').show(); $('#bank_number').show(); $('#postal_code').hide(); $('#prefecture').hide(); $('#city').hide(); $('#house_number').hide(); } if (selectval == 'アマゾンギフトカード') { $('#postal_code').show(); $('#prefecture').show(); $('#city').show(); $('#house_number').show(); $('#bank_name').hide(); $('#bank_branch_name').hide(); $('#bank_type').hide(); $('#bank_number').hide(); } if (selectval == 'iTunesカード') { $('#postal_code').show(); $('#prefecture').show(); $('#city').show(); $('#house_number').show(); $('#bank_name').hide(); $('#bank_branch_name').hide(); $('#bank_type').hide(); $('#bank_number').hide(); } }) ; $(function () { var selectval = $('select#congratulation_method option:selected').text(); if (selectval == '銀行振込') { $('#bank_name').show(); $('#bank_branch_name').show(); $('#bank_type').show(); $('#bank_number').show(); $('#postal_code').hide(); $('#prefecture').hide(); $('#city').hide(); $('#house_number').hide(); } if (selectval == 'アマゾンギフトカード') { $('#postal_code').show(); $('#prefecture').show(); $('#city').show(); $('#house_number').show(); $('#bank_name').hide(); $('#bank_branch_name').hide(); $('#bank_type').hide(); $('#bank_number').hide(); } if (selectval == 'iTunesカード') { $('#postal_code').show(); $('#prefecture').show(); $('#city').show(); $('#house_number').show(); $('#bank_name').hide(); $('#bank_branch_name').hide(); $('#bank_type').hide(); $('#bank_number').hide(); } }) ; </script>

#################################################

new.html.erb
####################################################
<%= render 'js_congratulation' %>
〜省略〜

<div class="form-group"> <div class="col-sm-3 control-label"> <%= f.label :method, 'お祝い金受け取り方法' %> </div> <%= f.select :method, ['', '銀行振込', 'アマゾンギフトカード', 'iTunesカード'] %> </div> <div class="form-group" id="postal_code" style="display: none"> <div class="control-label"> <%= f.label :postal_first, '郵便番号' %> </div> <div class="form-inline"> <%= f.text_field :postal_first, placeholder: "100", :class => "form-control border-color-3" %>- <%= f.text_field :postal_last, placeholder: "0001", :class => "form-control border-color-3" %> </div> </div> <div class="form-group" id="prefecture" style="display: none"> <div class="col-sm-3 control-label"> <%= f.label :prefecture, '都道府県名' %> </div> <%= f.text_field :prefecture, placeholder: "東京都", :class => "form-control border-color-4" %> </div> <div class="form-group" id="city" style="display: none"> <div class="control-label"> <%= f.label :city, '市町村' %> </div> <%= f.text_field :city, placeholder: "千代田区", :class => "form-control border-color-5" %> </div> <div class="form-group" id="house_number" style="display: none"> <div class="control-label"> <%= f.label :house_number, '番地その他' %> </div> <%= f.text_field :house_number, placeholder: "◯ー◯◯", :class => "form-control border-color-6" %> </div> <div class="form-group" id="bank_name" style="display: none"> <div class="control-label"> <%= f.label :bank_name, '振込先銀行名(正式名称をご記載ください。)' %> </div> <%= f.text_field :bank_name, placeholder: "三菱東京UFJ銀行", :class => "form-control border-color-1" %> </div> <div class="form-group" id="bank_branch_name" style="display: none"> <div class="control-label"> <%= f.label :bank_branch_name, '銀行支店名' %> </div> <%= f.text_field :bank_branch_name, placeholder: "◯◯支店", :class => "form-control border-color-2" %> </div> <div class="form-group" id="bank_type" style="display: none"> <div class="control-label"> <%= f.label :bank_type, '口座種別' %> </div> <%= f.select :bank_type, ['普通', '当座'] %> </div> <div class="form-group" id="bank_number" style="display: none"> <div class="control-label"> <%= f.label :bank_number, '口座番号' %> </div> <%= f.text_field :bank_number, placeholder: "1234567", :class => "form-control border-color-3" %> </div> ########################################

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

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

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

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

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

maisumakun

2018/07/10 22:28

ブラウザのコンソールに何かエラーなどは出ていますか?
ryochin

2018/07/11 05:08

「無効にしました」とありますが、具体的にどのような操作によって無効にしましたか?
kenben

2018/07/11 09:38 編集

maisumakunさま SafariのブラウザにはTypeError: undefined is not a function (near '...$( "#price-range" ).slider...')と出ております。custum.jsというファイル名がエラーになっており,そのエラー部分は$( "#price-range" ).slider({ range: true, min: minimum, max: maximum, values: [ minimum, maximum ], slide: function( event, ui ) { $( "#price-amount-1" ).val( "$" + ui.values[ 0 ] ); $( "#price-amount-2" ).val( "$" + ui.values[ 1 ] ); } }); となっております。あまり関係ないJSファイルのエラーかと推察しております。
kenben

2018/07/11 09:36

ryochinさま Gemfileのturbolinksとjquery-turbolinksをコメントアウトしてbundle install,application.jsで同2ファイルの読み込みを削除,layotsディレクトリのhtml.erbからdata-turbolinks-track' => trueの記載を削除しました。
maisumakun

2018/07/11 09:37

ただ、ブラウザにエラーが出ている以上、「そのエラーで以降のJavaScriptがすべて実行されなくなっている」ということも考えられますので、まずはそれを解消しましょう(Turbolinksありのときも同じエラーがでていたけど動き続けていた、なら別ですが)。
kenben

2018/07/11 09:46

承知しました。一旦エラーの解消を試みてみます。(Turbolinksありのときもずっと同じエラーは出続けておりましたが,確かになにかturbolinksを切ったことで影響している可能性もありますよね)
kenben

2018/07/11 09:57

今当該JSのファイルの記述を削除して一旦エラーを消しました。現在Safariのコンソール上ではエラーは出ておりませんが,依然として動作しない状況です・・・
guest

回答1

0

自己解決

解決いたしました。お二方ともご回答頂きまして誠にありがとうございます。
大変お騒がせしてしまい恐縮です。

$(function($) {
});
でscript全体を囲ったらうまくいきました。下記サイトを参考に試しにやってみたらうまくいきました。
なぜturbolinksを入れたときにはうまくいっていたのかは謎ですが。
https://blog.falconsrv.net/articles/512

投稿2018/07/11 11:26

kenben

総合スコア17

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問