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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

786閲覧

Railsで作成した検索ページにAjaxを実装したい

FKM

総合スコア3608

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/07/19 06:56

編集2018/07/19 08:46

ご無沙汰しています。今回、自分が勉強用に実装した検索システムについて質問です。

やったこと

railsで都市人口の検索システムを制作

動作環境

  • OS : Centos7.2
  • webサーバ : Apache 2.4.33
  • プログラム : Ruby 2.5.1p57
  • フレームワーク : Rails 5.2.0
  • DB : sqlite3

その他、検索機能にransack、ページネーション機能にkaminariを導入しています。

質問

Ajax化したいのですが、現状のシステムが本当にAjaxとして機能しているか知りたい、またAjax化されていないのなら、その原因を知りたいです。ちなみに、現状のプログラムでは参考サイトの説明にあるような記述は機能していません。
0. erbファイルに対し、formタグに、remote: trueプロパティを追加していない
0. erbファイルに記述したjacvascriptのコマンドはクリックイベントのみ
0. コントローラ部分に対し、戻り値のjson転換を行っていない。
0. ルート設定も行っていない。
逆に、これらの設定を行ったところ、バグが出たりしたため、最終的にコメントアウトor削除した状態です。

参考にしたサイト

Qiitaより

プログラム

cities_contoroller.rb

ruby

1class CitiesController < ApplicationController 2 protect_from_forgery :except => [:index,:getarea] 3 before_action :getarea, only: [:show, :edit, :update, :destroy] 4 5 # GET /cities 6 # GET /cities.json 7 PER = 20 8 9 def index 10 @q = City.ransack(params[:q]) 11 @q.sorts = 'population desc' if @q.sorts.empty? 12 @cities = @q.result.page(params[:page]).per(10) 13 14 ###この部分は機能させていない 15 #unless params[:q].blank? 16 #render json: @cities.select("id").map{|e| e.id }.to_json 17 #end 18 end 19(後略)

index.html.erb

html

1<%- model_class = City -%> 2<div class="page-header"> 3 <h1><%=t '.title', :default => model_class.model_name.human.pluralize.titleize %></h1> 4</div> 5 6<div class="panel panel-default" id="list"> 7 <div class="panel-heading"> 8 <div class="panel-title">検索</div> 9 </div> 10 <div class="panel-body"> 11 <%= search_form_for(@q , :id=>'city-form' ) do |f| %> 12 <div class="row"> 13 <!-- 都道府県名の完全一致検索 --> 14 <div class="col-sm-6"> 15 <div class="form-group"> 16 <%= f.label :pref_no_eq %> 17 <%= f.select :pref_no_eq,Pref::PREF.to_a,{},{class:'form-control'} %> 18 </div> 19 </div> 20 21 <!-- 市名の部分一致検索 --> 22 <div class="col-sm-4"> 23 <div class="form-group"> 24 <%= f.label :city_name_cont %> 25 <%= f.text_field :city_name_cont, class: "form-control", placeholder: "部分一致" %> 26 </div> 27 </div> 28 </div><!-- @row --> 29 30 <div class="row"> 31 <!-- 人口の範囲検索 --> 32 <div class="form-group"> 33 <div class="col-sm-12 form-inline"> 34 <%= f.label :'人口の範囲検索' %> 35 <%= f.search_field :population_gteq, class: "form-control", placeholder: "最低値" %> 3637 <%= f.search_field :population_lteq, class: "form-control", placeholder: "最高値" %> 38 <%= f.submit '検索', class: "btn btn-primary btn-search", id: "sbm" %> 39 <%= link_to 'クリア', url_for, class: "btn btn-default" %> 40 <%= link_to t('.new', :default => t("helpers.links.new")),new_city_path,:class => 'btn btn-primary' %> 41 </div> 42 43 </div> 44 </div><!-- @row --> 45 <% end %> 46 <div> 47</div> 48 49<table class="table table-striped" id="tbl"> 50 <thead> 51 <tr> 52 <th><%= model_class.human_attribute_name(:id) %></th> 53 <th><%= model_class.human_attribute_name(:base_no) %></th> 54 <th><%= model_class.human_attribute_name(:city_name) %></th> 55 <th><%= model_class.human_attribute_name(:pref_no) %></th> 56 <th><%= model_class.human_attribute_name(:population) %></th> 57 <th><%=t '.actions', :default => t("helpers.actions") %></th> 58 </tr> 59 </thead> 60 <tbody id="ajax-response-wrapper"> 61 <% @cities.each do |city| %> 62 <tr id="t"> 63 <td><%= link_to city.id, city_path(city) %></td> 64 <td><%= city.base_no %></td> 65 <td><%= city.city_name %></td> 66 <td><%= city.pref_no %></td> 67 <td><%= city.population %></td> 68 <td> 69 <%= link_to t('.show', :default => t("helpers.links.show")), 70 city_path(city), :class => 'btn btn-default btn-xs' %> 71 <%= link_to t('.edit', :default => t("helpers.links.edit")), 72 edit_city_path(city), :class => 'btn btn-default btn-xs' %> 73 <%= link_to t('.destroy', :default => t("helpers.links.destroy")), 74 city_path(city), 75 :method => :delete, 76 :data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) }, 77 :class => 'btn btn-xs btn-danger' %> 78 </td> 79 </tr> 80 <% end %> 81 </tbody> 82</table> 83<%= paginate @cities, window: 2 %> 84 85 <script type="text/javascript"> 86 $('.form-control').each(function(){ 87 $(this).on('keypress',function(e){ 88 if(e.which == 13){ 89 $('#sbm').click() } 90 }) 91 92 $(this).on('change',function(){ 93 $('#sbm').click() 94 }) 95 96 97 $(this).on("ajax:fail",function(event,data,status,xhr){ 98 alert("fail!") 99 }) 100 }) 101 </script> 102

また、テーブル構造は以下の通りで、データ数は200以上あります。

INSERT INTO `cities` (id,base_no,city_name,pref_no,population,created_at,updated_at) VALUES (1,101,'札幌',1,1945000,'2018-05-25 06:36:35.184447','2018-05-25 06:36:35.184447');
  • 動作画面は以下の通り

イメージ説明

  • ネットワークの応答結果は以下の通りです

イメージ説明

見かけ上は非同期通信になっているようですが、助言よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

「formタグに、remote: trueプロパティを追加していない」だと、何もリクエストが送られないですよね。
なので、「Ajaxとして機能しているか」という疑問には、「していない」ということになるかと思います。

js

1 if(e.which == 13){ 2 $('#sbm').click() } 3 }) 4 5 $(this).on('change',function(){ 6 $('#sbm').click() 7 })

といった辺りは、サブミットしてしまうので、これだとAjaxとは言えないでしょう。

他にAjaxのリクエスト(xhrなりfetchなり)を送っているはずのところはありますか?

投稿2018/07/30 04:13

takahashim

総合スコア1877

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

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

FKM

2018/07/30 04:22

ありがとうございます。ただsubmitされているだけの状態なんですね。もう一度見直してみます。その後に一旦この質問をクローズするか、あるいはここで質問を募るかするかもしれませんので、よろしくお願い致します。
FKM

2018/08/01 09:11

別業務が多忙になってきましたので、一旦クローズします。 進展と致しましては、参考サイトにある判定文だと認識できない(xxxx.blank?という記述は古い)ことがわかりました。また、submit処理をしてしまうとAjaxにならないことも確証はできていませんが、わかりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問