0

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

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


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


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

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

    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)

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

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

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


events_controller.rb

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

_header.html.erb

<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>

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

1 件の回答 1

1

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}のオプションは書かなくても同じように動くと思います。

1
  • Junichi Itoさん ご教授ありがとうございます。remote: trueオプションをなくしたところ、画面が切り替わるようになりました。ただご指摘の通り、あまり開発スキルに自信がないため、ページの構成は検討したいと思います。 また、遅延初期化のイディオムのご紹介ありがとうございます。参考にさせていただきます。 大変助かりました、ありがとうございます。
    – hiro
    Commented 2016年1月11日 9:03

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。