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>
##################################
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
0
解決いたしました。お二方ともご回答頂きまして誠にありがとうございます。
大変お騒がせしてしまい恐縮です。
$(function($) {
});
でscript全体を囲ったらうまくいきました。下記サイトを参考に試しにやってみたらうまくいきました。
なぜturbolinksを入れたときにはうまくいっていたのかは謎ですが。
https://blog.falconsrv.net/articles/512
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.22%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
maisumakun
2018/07/11 07:28
ブラウザのコンソールに何かエラーなどは出ていますか？
ryochin
2018/07/11 14:08
「無効にしました」とありますが、具体的にどのような操作によって無効にしましたか？
kenben
2018/07/11 18:32 編集
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 18:36
ryochinさま Gemfileのturbolinksとjquery-turbolinksをコメントアウトしてbundle install，application.jsで同2ファイルの読み込みを削除，layotsディレクトリのhtml.erbからdata-turbolinks-track' => trueの記載を削除しました。
maisumakun
2018/07/11 18:37
ただ、ブラウザにエラーが出ている以上、「そのエラーで以降のJavaScriptがすべて実行されなくなっている」ということも考えられますので、まずはそれを解消しましょう（Turbolinksありのときも同じエラーがでていたけど動き続けていた、なら別ですが）。
kenben
2018/07/11 18:46
承知しました。一旦エラーの解消を試みてみます。（Turbolinksありのときもずっと同じエラーは出続けておりましたが，確かになにかturbolinksを切ったことで影響している可能性もありますよね）
kenben
2018/07/11 18:57
今当該JSのファイルの記述を削除して一旦エラーを消しました。現在Safariのコンソール上ではエラーは出ておりませんが，依然として動作しない状況です・・・