20813


質問させていただきます。

現在RubyonRailsを用いて、  
次のような動作をするサイトを作ろうとしています。

* * *

1.ヘッダーの「イベント作成」ボタンをおす  
2.Modalが表示され、「イベント名」を入力し、「作成」ボタンをおす  
3.イベントが作成され、Editページに遷移し、その他詳細を入力する。

* * *

現時点では、2で「作成」ボタンをおすと、イベントのレコードは作成されますが、Modalが消えず、Editページにもリダイレクトせず困っております。

なお、その際のターミナルの表示は下記となります。  
（こちらを見る限り、Editページの読み込みは出来ているように思えます。）

[code]

        Started POST "/events" for ::1 at 2016-01-11 01:23:32 +0900
        Processing by EventsController#create as JS
          Parameters: {"utf8"=>"✓", "event"=>{"name"=>"ああああああああああああ"}, "commit"=>"作成する"}
          User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
           (0.1ms)  begin transaction
          SQL (0.5ms)  INSERT INTO "events" ("user_id", "name", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["user_id", 1], ["name", "ああああああああああああ"], ["created_at", "2016-01-10 16:23:32.895853"], ["updated_at", "2016-01-10 16:23:32.895853"]]
           (2.4ms)  commit transaction
        成功
        Redirected to http://localhost:3000/events/12/edit
        Completed 302 Found in 10ms (ActiveRecord: 3.2ms)
    
    
        Started GET "/events/12/edit" for ::1 at 2016-01-11 01:23:32 +0900
        Processing by EventsController#edit as JS
          Parameters: {"id"=>"12"}
          Event Load (0.2ms)  SELECT  "events".* FROM "events" WHERE "events"."id" = ? LIMIT 1  [["id", 12]]
           (0.1ms)  SELECT COUNT(*) FROM "targets" WHERE "targets"."event_id" = ?  [["event_id", 12]]
          Rendered events/_form.html.erb (3.6ms)
          Rendered events/edit.html.erb within layouts/application (17.2ms)
          User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
          Rendered layouts/_header.html.erb (3.7ms)
          Rendered layouts/_footer.html.erb (0.1ms)
        Completed 200 OK in 118ms (Views: 113.9ms | ActiveRecord: 0.4ms)
    
[/code]

そこで2点質問させてください。

1）Editページに遷移できない原因について、ご指摘いただけますと幸いです。  
2）ヘッダーに「イベント作成」ボタンを置いているため、  
ヘッダーが表示されるページのコントローラー内の至るところで、  
「@event = Event.new」を記載しております。（下記のEventController以外にも）  
このようなやり方しかないのか、  
「イベント作成」ボタンを押したタイミングで「@event = Event.new」を行うなど、  
別のやり方があればご指摘いただけますと幸いです。

以下、コードになります。

* * *

# events_controller.rb

[code]

    class EventsController < ApplicationController
    before_action :authenticate_user!,only: [:new, :create]
    before_action :event_find, only: [:edit,:update,:show,:destroy]
    
    def index
      @event = Event.new
    end
    
    def new
      @event = Event.new
    end
    
    def create
      @event = Event.new(
        user_id: current_user.id,
        name: event_params["name"]
        )
      if @event.save
        redirect_to edit_event_url(@event)
      else
        render :index
      end
    end
    
    def edit
      @targets = @event.targets
    end
    
    def update
      if  @event.update(event_params)
        redirect_to event_url(@event)
      else
        render :edit
      end
    end
    
    def show
      @target = Target.new
      @targets = @event.targets
    end
    
    private
    
      def event_params
        params.require(:event).permit(
        ・
        ・
        ・
          )
      end
    
      def event_find
        @event = Event.find(params[:id])
      end
    
      end
    
[/code]

# _header.html.erb

[code]

    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/events">ああああ</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-menu">
          <ul class="nav navbar-nav navbar-right">
            <% if user_signed_in? %>
              <li><%= link_to "イベント作成", "#","data-toggle" => "modal", "data-target"=>"#create-event" %></li>
              <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></li>
            <% else %>
              <li><%= link_to "新規登録", new_user_registration_path %></li>
              <li><%= link_to "ログイン", new_user_session_path %></li>
            <% end %>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    
    <div class="modal fade" id="create-event">
      <div class="modal-dialog">
        <div class="modal-content">
          <%= form_for @event,remote: true ,:url => {:controller => "/events", :action => :create} do |f| %>
          <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">イベント作成</h4>
          </div>
          <div class="modal-body">
            <p>イベント名を記入してください</p>
          </div>
          <div class="form-group">
            <%= f.label :name ,'イベント名' %><br>
            <%= f.text_field :name, class: "form-control" %>
          </div>
    
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
            <%= f.submit '作成する', class: "btn btn-danger" %>
          </div>
          <% end %>
        </div>
      </div>
    </div>
    
[/code]

つたない質問となり申し訳ございません。  
宜しくお願いします。


CC BY-SA 3.0
2016-01-10T16:28:29.540
20811
2016-02-01T00:45:50.177
2016-02-01T00:45:50.177
5793
12734
question
ruby-on-rails ruby
Modalにformを表示し、Create後、Editページにリダイレクトできない件について


> 1）Editページに遷移できない原因について、ご指摘いただけますと幸いです。

`= form_for @event,remote: true ,:url => {:controller => "/events", :action =>
:create}`の`remote: true`オプションをなくせば、Ajaxではなく普通のフォーム送信になるので画面も切り替わるはずです。

ただし、バリデーションエラー発生時は「元の画面に戻して、フォームとエラーを表示させる」みたいな動きが期待されると思うので、エラー時の処理が面倒になります。

Ajaxで送信しなければならない理由があるなら、「処理成功時はEdit画面へ遷移」みたいなJavaScriptを書く必要があると思います。

Modalでフォーム入力させたい、Ajaxでデータを更新したい、というのはUXの向上は見込めるものの、作る側の複雑さは増すので、開発スキルに自信がなければいったんscaffoldのようにnew画面を表示して普通にsubmitするのが良いかもしれません。

> 2）ヘッダーに「イベント作成」ボタンを置いているため、  
>  ヘッダーが表示されるページのコントローラー内の至るところで、  
>  「@event = Event.new」を記載しております。（下記のEventController以外にも）  
>  このようなやり方しかないのか、

`= form_for (@event ||= Event.new), remote: true ,:url => {:controller =>
"/events", :action => :create}` のように遅延初期化のイディオム（`||=`）を使うと良いと思います。

ちなみに`:url => {:controller => "/events", :action =>
:create}`のオプションは書かなくても同じように動くと思います。


CC BY-SA 3.0
2016-01-10T22:53:42.893
20813
2016-01-10T22:53:42.893
85
20811
answer