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

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

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

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

4290閲覧

【Ruby on Rails】Ransackで作った検索画面を、bootstrap modalで表示したい

pecchan

総合スコア555

Ruby on Rails

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2017/04/25 07:45

編集2017/04/25 22:41

検索画面をポップアップ(モーダル)で表示したいため、
Ransack + bootstrap modalで実装しようとしています。

単体では、
・Ransackで検索画面は作れました
・bootstrap modalでポップアップは表示できました

ですが、ここから先がよく分かりません。

検索画面の初期状態といいますか、検索を実行する前のビュー(_choice_employee.html)
を表示したいのですが、その具体的な記述が分かりません。

とりあえずTOPページから呼ぼうと以下のように記述。
rails sでエラーが出ました。

エラーメッセージ
「No Ransack::Search object was provided to search_form_for!」
イメージ説明

そもそも「search_form_for」にコントローラ経由でアクセスしていないため、渡す@qが無いですし、間違っていると思っています。
しかしながら、_choice_employee.htmlのsearch_form_forを初期表示で使いたく。
どうすれば良いでしょうか?

どうぞ宜しくお願い致します。

■■■■■■■■■■■■■■■■■■■■■■
以下ビュー
■■■■■■■■■■■■■■■■■■■■■■
app\views\shared_search_box.html.erb

ruby

1<div class="panel panel-default"> 2 <div class="panel-heading"> 3 <h3 class="panel-title"><i class="fa fa-search"></i> 検索条件</h3> 4 </div> 5 <div class="panel-body"> 6 <%= yield %> 7 </div> 8</div>

app\views\shared_search_result_box.html.erb

ruby

1<h1>検索結果</h1> 2<%= yield %>

app\views\employees_search_form.html.erb

ruby

1<%= render layout: 'shared/search_box' do %> 2 3<div class="row"> 4<div class="col-sm-6"> 5 <div class="form-group"> 6 <label class="col-sm-4 control-label" for="">社員コード</label> 7 <div class="col-sm-8"> 8 <%= f.text_field :code_cont, class: 'form-control' %> 9 </div> 10 </div> 11 12 <div class="form-group"> 13 <label class="col-sm-4 control-label" for="">社員名</label> 14 <div class="col-sm-8"> 15 <%= f.text_field :name_cont, class: 'form-control' %> 16 </div> 17 </div> 18 19 <div class="form-group"> 20 <label class="col-sm-4 control-label" for="">社員名カナ</label> 21 <div class="col-sm-8"> 22 <%= f.text_field :name_kana_cont, class: 'form-control' %> 23 </div> 24 </div> 25 26 <div class="form-group"> 27 <label class="col-sm-4 control-label" for=""></label> 28 <div class="col-sm-6"> 29 <div class="checkbox"> 30 <label> 31 <%= f.check_box :availability_true %> 32 在職中 33 </label> 34 </div> 35 </div> 36 </div> 37</div> 38 39 40 41<div class="col-sm-12 row text-center"> 42 <%= link_to employees_path, class: 'btn btn-default btn-left' do %>クリア<% end %> 43 <button class="btn btn-default btn-primary" type="submit"><i class="fa fa-search"></i> 検索</button> 44</div> 45 46</div> 47 48<% end %>

app\views\employees_choice_employee.html.erb

ruby

1<% content_for(:title) do %> 2 社員選択 3<% end %> 4 5<%= search_form_for(@q, url: search_employees_path, html: { method: :get, class: 'form-horizontal', role: 'form' }) do |f| %> 6 <%= render 'search_form', f: f %> 7<% end %> 8``` 9 10app\helpers\simple_search_form_helper.rb 11```ruby 12module SimpleSearchFormHelper 13end 14``` 15 16■■■■■■■■■■■■■■■■■■■■■■ 17以下モデル 18■■■■■■■■■■■■■■■■■■■■■■ 19app\models\employee.rb 20```ruby 21class Employee < ApplicationRecord 22end 23 24``` 25 26■■■■■■■■■■■■■■■■■■■■■■ 27以下コントローラ 28■■■■■■■■■■■■■■■■■■■■■■ 29app\controllers\employees_controller.rb 30```ruby 31# coding: utf-8 32class EmployeesController < ApplicationController 33 34 def index 35 @employee = Employee.order(sort_column + ' ' + sort_direction) 36 end 37 38 def choice 39 @q = Employee.search 40 end 41 42 def search 43 @q = Employee.search(search_params) 44 45 @employees = @q 46 .result 47 .order(availability: :desc, code: :asc) 48 .decorate 49 50 end 51 52 53 #検索条件 54 def search_params 55 search_conditions = %i( 56 code_cont name_cont name_kana_cont availability_true 57 price_gteq price_lteq purchase_cost_gteq purchase_cost_lteq 58 ) 59 params.require(:q).permit(search_conditions) 60 end 61 62 63end 64 65``` 66 67■■■■■■■■■■■■■■■■■■■■■■ 68以下呼出し側 69■■■■■■■■■■■■■■■■■■■■■■ 70 71app\views\top/index.html.erb 72```ruby 73<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 74Launch demo modal 75</button> 76- 77 78<%= render 'employees/choice_employee' %> 79 80 81``` 82 83 84 85■■■■■■■■■■■■■■■■■■■■■■ 86以下ルーティング 87■■■■■■■■■■■■■■■■■■■■■■ 88 89```ruby 90 #社員 91 resources :employees do 92 collection do 93 get :choice 94 get :search 95 end 96 end 97 98```

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんな感じでいいのではないでしょうか?

ruby

1 def index 2 @q = Employee.order(sort_column + ' ' + sort_direction).search(params[:q]) 3 @employee = @q.result 4 end

ここから下は、ぼやきなので無視していただいていいのですが

仕様書があるのなら仕方がないのですが。レガシーな匂いがします。
私だったらsearchもchoiceも作らずにindexで統合し、最初からproductsを表示しときます。
そしてレコードの表示部分を_index.html.erbとしてpartialで書き出せばturbolinkの出来上がりです。

また、検索項目ですが
code_or_name_or_name_kana_contにして、一つに集約させちゃいますね
これでcodeを入れてもカナを入れても漢字を入れても検索されます。
(たかばたけと読む高畑さんを検索したいとかができなくなるかもですが...そんなの誤差です。)
いちいちカーソルを移動しなくていい。
さらに文字列を入力を一つにすれば、検索ウインドウを出す必要もなく、文字を入れてエンターで検索されます。
うーんweb的

投稿2017/04/25 15:01

moke

総合スコア2241

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

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

pecchan

2017/04/25 22:56 編集

moke様 いつも有難う御座います。 def indexの中を変更しましたが同じエラーとなりました。 とんでもないです。ぼやきが非常に参考になります。 仕様書は、ありませんが、 Scaffoldで作る一覧画面とは別に、入力支援用の一覧画面を作ろうとしています。 そちらは、 ・伝票入力などで社員を入力する際の入力支援的な画面 ・なのでポップアップ表示 ・社員一覧まで詳細な情報が不要 ・画面上には選択ボタン、キャンセルボタンが必要 ・選択ボタンクリック時に呼出し元へ返す などの仕様です。 私も当初同じ画面(index)のみで考えたのですが、 上記の仕様から別画面→別アクションで試みました。 なお検索画面は、以下を参考にしました。 http://rails.densan-labs.net/form/search_form.html 上記サイトで、 検索画面の初期表示時がindexアクション、結果画面がsearchアクションとなっており、 indexだと名前が衝突するため、index→choiceにしました。
moke

2017/04/25 23:58

うーむ、app/views/top/index.html.erb ですか... >>とりあえずTOPページから呼ぼうと の仕様が間違っています。 topページが app/views/top/index.html.erbにあるなら TopControler.rbに上記のindexを記述するか route.rbに root :to => 'employees#index' とやり、employees#indexをrootに設定してください Rails上というかweb上どちらかだと思います。 あと、今回は関係ないと思いますが ransack関係でどうしてもエラーが消えない場合 名前の衝突があるかもしれないので(これがrubyの欠点 search(params[:q])をシノニムのransack(params[:q])に変えるというのもありです。
pecchan

2017/04/26 01:35 編集

moke様 有難う御座います。 本来、ビューからではなくコントローラ経由で起動するのが正解ということですね。 今回、bootstrapのmodalにてポップアップ表示がしたいですが、 それはつまり、呼出し元のhtml上にポップアップ表示する画面を あらかじめレンダリングしておくことになるかと思っております。 例えば以下のように <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Default bootstrap modal example --> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ここがbodyです </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> そのためapp\views\top/index.html.erb にrenderで展開しようとしておりました。 つまりビューからの起動になると思っておりました。 どうするのが正解なのでしょうか・・・?
moke

2017/04/26 06:56

いえ、そういう意味ではなく app\views\top/index.html.erb の描画自体が、top_controllerから呼ばれているので、top_controllerのindexに@qを入れないとだめだよという意味です。 または、enplyee indexをルート設定でトップ画面にするかです。
pecchan

2017/04/26 07:54

申し訳ないです。勘違いでした。 そういう意味だったわけですね。 有難う御座いました!
moke

2017/04/27 01:53

解決してよかったです。 勘違いでなければ 入力支援用の一覧画面ということはフォームに 社員[ ][社員検索] みたいな場所があって検索を押すと別ウインドウが開くやつですか で検索結果から選択してクリックするとその社員が入力されて で、いろんなフォームで使い回すと…。 もしそう使い方をするなら、enployee_selector_controllerとかを作って、enployeeから分離して ajaxで呼び出し先のcontrollerにenployee_idだけ返すというwindows風のやり方もありだと思います。 検討してみてください。
pecchan

2017/04/27 04:21

moke様! 有難う御座います! まさしくその通りです。そういう物を作りたいのです。 employee_selector_controller!! なるほど、employeeから離れてスッキリします! 有難う御座います!それで行きます!!!!
pecchan

2017/04/27 05:55

searchもchoiceも作らずにindexで統合する方法もやってみます!
moke

2017/04/27 08:15

indexで統合はぜひ employee_selectors_controller でやってください。 あとbootstrapのリスト・グループとかを使ってリンク(選択して閉じる)をはると かっこいいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問