Q&A
「Ajaxを使う」「Bootstrapを使う」とは、それぞれ「どのようなコードを書いて」動作させているものでしょうか？
CentOS7.3内にRails6で作っていたシステムが破損したので、再度作り直してみたところ、困った現象が発生しています。
- Ruby 2.6.6
- Rails6.1.3.1
- Apache 2.4.46
発生している問題
- Ajaxは動作しているが、Bootstrapは機能していない
- Bootstrapを機能させると、Ajaxが動作しない
このいずれかの状態を延々と続けています。
原因の箇所
このどっちかになってしまう原因の箇所は特定しています。javascript_pack_tagのスクリプト部分を消去するとAjaxは動きますが、bootstrapは機能しません。逆にjavascript_pack_tagを記述するとbootstrapは適用されますが、Ajaxは動かなくなります。
app/views/layout/application.erb
erb
1 <head> 2 3<%= stylesheet_pack_tag 'application', media: 'all' %> 4<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 5<%= javascript_pack_tag 'application' %><!-- これを消去するとAjaxが使えるが、Bootstrapは使えなくなる --> 6 7 <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> 8 <!--[if lt IE 9]> 9 10 </head> 11
設定ファイル
BootstrapとjQueryはwebpackからyarnでインストールしており、assetsパイプラインからは呼び出さないようにGemfileからは消去しています。また、設定方法は以下のサイトを参考にしています。
ただ、turbo-linksを用いるとAjaxが動作しなくなるようなので、そこは記述を消しています。
config/webpack/environment.js
js
1const { environment } = require('@rails/webpacker') 2 3// ここから 4// jQueryとBootstapのJSを使えるように 5const webpack = require('webpack') 6environment.plugins.prepend( 7 'Provide', 8 new webpack.ProvidePlugin({ 9 $: 'jquery', 10 jQuery: 'jquery', 11 Popper: 'popper.js' 12 }) 13) 14 15module.exports = environment
app/javascript/packs/application.js
js
1require("@rails/ujs").start() 2//require("turbolinks").start() 3require("@rails/activestorage").start() 4require("channels") 5require("jquery") 6import 'bootstrap'; 7import '../stylesheets/application'
app/javascript/packs/stylesheets/application.scss
scss
1@import '~bootstrap/scss/bootstrap';
#制御にかかわるファイル
指摘がございましたので、制御にかかわるファイル（テンプレート、コントローラ、スクリプト）を記載しました。
テンプレート
index.html.erb
erb
1<%- model_class = City -%> 2 3<div class="panel panel-default" id="list"> 4 <div class="panel-heading"> 5 <div class="panel-title">検索</div> 6 </div> 7 <div class="panel-body" id="ajax-contents"> 8 <%= search_form_for(@q , :id=>'city-form', :method=> 'get',:remote => true) do |f| %> 9 <div class="row"> 10 <!-- 地方の選択 --> 11 <div class="col-sm-12"> 12 <%= f.collection_check_boxes(:region_in,@regions, :region, :region,include_hidden: false) do |b| %> 13 <label class="checkbox-inline"> 14 <%= b.check_box class:"form-control2" do %> 15 <%= b.check_box + b.text %> 16 <% end %> 17 <%= b.label {b.text} %> 18 </label> 19 <% end %> 20 </div> 21 <!-- 都道府県名の完全一致検索 --> 22 <div class="col-sm-6"> 23 24 <div class="form-group"> 25 <%= f.label :pref_no_eq %> 26 27 <%= f.select :pref_no_eq,Pref::PREF.to_a,{},{class:'form-control'} %> 28 </div> 29 </div> 30 31 <!-- 市名の部分一致検索 --> 32 <div class="col-sm-4"> 33 <div class="form-group"> 34 <%= f.label :city_name_cont %> 35 <%= f.text_field :city_name_cont, class: "form-control", placeholder: "部分一致" %> 36 </div> 37 </div> 38 </div><!-- @row --> 39 40 <div class="row"> 41 <!-- 人口の範囲検索 --> 42 <div class="form-group"> 43 <div class="col-sm-12 form-inline"> 44 <%= f.label :'人口の範囲検索' %> 45 <%= f.search_field :population_gteq, class: "form-control", placeholder: "最低値" %> 46 ～ 47 <%= f.search_field :population_lteq, class: "form-control", placeholder: "最高値" %> 48 <%= f.submit class: "btn btn-primary btn-search", id: "sbm" %> 49 <%= link_to 'クリア', url_for, class: "btn btn-default" %> 50 <%= link_to t('.new', :default => t("helpers.links.new")),new_city_path,:class => 'btn btn-primary' %> 51 </div> 52 </div> 53 </div><!-- @row --> 54 <% end %> 55 <div> 56</div> 57 58 <table class="table table-striped" id="tbl"> 59 <thead> 60 <tr> 61 <th><%= model_class.human_attribute_name(:id) %></th> 62 <th><%= model_class.human_attribute_name(:base_no) %></th> 63 <th><%= model_class.human_attribute_name(:city_name) %></th> 64 <th><%= model_class.human_attribute_name(:pref_no) %></th> 65 <th><%= model_class.human_attribute_name(:population) %></th> 66 <th><%=t '.actions', :default => t("helpers.actions") %></th> 67 </tr> 68 </thead> 69 <tbody id="ajax-response-wrapper"> 70 <%= render 'ajax_container' %> 71 </tbody> 72 </table> 73 <div id="pager"><%= render 'ajax_pager' %></div> 74<%= javascript_pack_tag 'ajax_controll' %> 75<script type="text/javascript"> 76 register_callback(); 77</script> 78
コントローラ（一部抜粋）
erb
1 def index 2 query = "select distinct(region) as region from cities group by region order by pref_no" 3 @regions = City.find_by_sql(query) 4 unless params[:q].blank? 5 logger.debug('TR') 6 @q = City.ransack(params[:q]) 7 @q.sorts = 'population desc' if @q.sorts.empty? 8 @cities = @q.result.page(params[:page]).per(10) 9 #コンテナのレンダリング 10 p_cities = render_to_string( 11 partial: 'ajax_container', 12 locals: { :cities => @cities}, 13 ) 14 #ページャーのレンダリング 15 p_pager = render_to_string( 16 partial: 'ajax_pager', 17 locals: { :cities => @cities }, 18 remote: true 19 ) 20 if request.xhr? 21 logger.debug("Ajax成功！") 22 render partial: "ajax_container", 23 locals: 24 { 25 container: p_cities, 26 pager: p_pager, 27 } 28 end 29 else 30 @q = City.ransack(params[:q]) 31 @q.sorts = 'population desc' if @q.sorts.empty? 32 @cities = @q.result.page(params[:page]).per(10) 33 end 34 end 35
ajaxの制御用スクリプト
app/javascript/packs/ajax_controll.js
js
1import * as $ from "jquery"; 2 3function register_callback(){ 4 jQuery(function(){ 5 $(".form-control,.form-control2").each(function(){ 6 $(this).on('change focusout',function(){ 7 $('#sbm').click(); 8 }) 9 }) 10 $(document).bind( 11 "ready ajaxComplete", 12 "#city-form", 13 function(e,d){ 14 data = d.detail[0] 15 alert(data) 16 $('#ajax-response-wrapper').empty().append(data.container) 17 $('#pager').empty().append(data.pager) 18 } 19 ) 20 $("#city-form").on("ajax:fail",function(event,data,status,xhr){ 21 alert("fail!") 22 }) 23 }) 24} 25 26window.register_callback = register_callback;
#やったこと
webpackの再インストールやyarnの繰り返し
#rails webpacker:install #rails webpacker:compile #yarn add jquery bootstrap popper.js
applicaton.html.erbファイルで色々付けたり消したりもしましたが、結局解決方法がわからずじまいです。ご教示よろしくお願い致します。
なお、以前はbootstrapもAjaxも正常に起動していましたが、バックアップファイルを確認したところ、Assetsパイプラインとwebpackがグチャグチャになっていたため、再現できませんでした（Railsも以前は6.0.3で動いていました）。
質問の回答に加えて、制御に用いたファイルも一部記載しました。
AjaxはjQueryを使って制御しています。
Bootstrapはインストールした状態そのまま（デフォルト）の画面を使っています。
app/javascript/packs/ajax_controll.jsはどのような形で参照されているのですか？
テンプレートのragister_callback関数から呼び出しています。
参考にした記事は以下の通りです(Qiita)
https://qiita.com/fezrestia/items/9bf4e925314d7e6ec752
当該記事の通り、「body内にjavascript_pack_tag 'ajax_test'を書いている」ということで間違いないですか？
外部ファイルとしてスクリプトを呼び出している状態です。body内とは言い切れないです。
外部ファイルのパスは上述している通りです。
すみません、「JavaScriptもビューの一部として動的に読み込む」という構成に詳しくないので、これ以上追いかけるのは難しそうです。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
を削除して
<%= javascript_pack_tag 'application' %>
を残した状態で register_callback() を実行したとき、
ブラウザのコンソールにエラーは出ていませんか？
また、その状態で $ と打つとどうなりますか？
ありがとうございます。
上記スクリプトタグを削除してもエラーは発生しませんでした。また、コンソール上で
$を打つと
ƒ $(selector, [startNode]) { [Command Line API] }
と出ました。
javascript_pack_tagの呼び出し先（application.js）のどれかが干渉しているのか探ってみると
それがrails.ujsが原因だとわかりましたが…なぜujsが干渉しているのかは調査中…
ごめんなさい。bootstrap と jquery が同時に動かないと思い込んでいました。
rails ujs はフォームの remote: true を実現するために動いてます。
ajaxComplete は(多分) jquery のイベントで、
rails-ujs は jquery に依存しなくなったのが関係してるのかもしれません。
rails-ujs のイベントはここに載ってます
https://railsguides.jp/working_with_javascript_in_rails.html#rails-ujs%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9
情報提供ありがとうございます。
更に色々調べるとbindメソッド以下をコメントアウトしても普通に動くことがわかりました。どうもイベントでsubmitを遠隔で押しているためっぽいですが、これは果たしてAjaxと呼べる動作なんでしょうか。
遷移してしまうのでしょうか。
$('#sbm').click(); を Rails.fire($('#city-form').get(0), 'submit') に変更するといいみたいです。
https://qiita.com/nsy_13/items/2f67785cd1e3888958e0
それも試してみたのですが、Rails is undefinedになります。
rails-ujsの件でヒントをいただき、大幅に進展があり、現在ajax:successの中は通るようになりました。
あとはイベントトリガー部分だけですが、rails-ujsをrequireしても対応していないということなのでしょうか。
webpacker が使えない環境で確認できないのですが、ajax_controll.js で
import Rails from "@rails/ujs"
とすれば Rails.fire は動かないでしょうか
ありがとうございます、ばっちりです！
ぜひBAにさせていただきたいので、
>ajaxComplete は(多分) jquery のイベントで、
>rails-ujs は jquery に依存しなくなったのが関係してるのかもしれません。
このあたりの下りを回答にしていただけたらと思います。
回答1件
0
ベストアンサー
「質問への追記・修正の依頼で解決しました。」
rails-ujs は jquery に依存しなくなりました。
その結果 jquery の ajaxComplete が発火しなくなったようです。
代わりに ajax:success を用います。
投稿2021/03/30 03:20
総合スコア2090
ありがとうございます。なぜajax:successという古いjQueryの記述なのかずっと疑問だったので…。
あれはrails-ujsの記法に則ったものだったんですね。
あなたの回答
tips
プレビュー
