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

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

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

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

Bootstrap

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

Ajax

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

Q&A

解決済

1回答

5108閲覧

【Ruby on Rails】Rails5と BootstrapでAjax-モーダルフォームを表示したい

pecchan

総合スコア555

Ruby on Rails

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

Bootstrap

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

Ajax

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

0グッド

0クリップ

投稿2017/03/28 07:54

編集2017/03/28 08:35

Rails version: 5.0.2
Ruby version: 2.3.3 (x64-mingw32)

モーダルフォームを表示したいです。
下記を参考にしましたが表示出来ませんでした。
Rails5と BootstrapでAjax-modalform

scaffoldで作成したシンプルなアプリです。
name列しかないuserモデルです。
indexページにあるNew Userボタンを押すと、通常はnewページに遷移しますが、
ここでモーダルを表示させたいといった感じです。

views/users/_form.html.erb

ruby

1<div class="modal-dialog"> 2 <div class="modal-content"> 3 4 5 <%= form_for(@user, remote: true) do |f| %> 6 <% if user.errors.any? %> 7 <div id="error_explanation"> 8 <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2> 9 10 <ul> 11 <% user.errors.full_messages.each do |message| %> 12 <li><%= message %></li> 13 <% end %> 14 </ul> 15 </div> 16 <% end %> 17 18 19 <div class="field"> 20 <%= f.label :name %> 21 <%= f.text_field :name %> 22 </div> 23 24 <div class="actions"> 25 <%= f.submit %> 26 </div> 27 <% end %> 28 29 </div> 30</div> 31

views/users/new.js.erb

jquery

1$("#user-modal").html("<%= escape_javascript(render 'form') %>") 2$("#user-modal").modal("show")

views/users/index.html.erb

ruby

1<p id="notice"><%= notice %></p> 2 3<h1>Users</h1> 4 5<table> 6 <thead> 7 <tr> 8 <th>Name</th> 9 <th colspan="3"></th> 10 </tr> 11 </thead> 12 13 <tbody> 14 <% @users.each do |user| %> 15 <tr> 16 <td><%= user.name %></td> 17 <td><%= link_to 'Show', user %></td> 18 <td><%= link_to 'Edit', edit_user_path(user) %></td> 19 <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td> 20 </tr> 21 <% end %> 22 </tbody> 23</table> 24 25<br> 26 27<%= link_to 'New User', new_user_path, remote: true, class: "btn btn-lg btn-primary" %> 28 29 30<div id="user-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>

controllers/users_controller.rb

ruby

1class UsersController < ApplicationController 2 before_action :set_user, only: [:show, :edit, :update, :destroy] 3 4 # GET /users 5 # GET /users.json 6 def index 7 @users = User.all 8 end 9 10 # GET /users/1 11 # GET /users/1.json 12 def show 13 end 14 15 # GET /users/new 16 def new 17 @user = User.new 18 end 19 20 # GET /users/1/edit 21 def edit 22 end 23 24 # POST /users 25 # POST /users.json 26 def create 27 @user = User.new(user_params) 28 29 respond_to do |format| 30 if @user.save 31 format.html { redirect_to @user, notice: 'User was successfully created.' } 32 format.json { render :show, status: :created, location: @user } 33 format.js { @status = "success"} 34 else 35 format.html { render :new } 36 format.json { render json: @user.errors, status: :unprocessable_entity } 37 format.js { @status = "fail" } 38 end 39 end 40 end 41 42 # PATCH/PUT /users/1 43 # PATCH/PUT /users/1.json 44 def update 45 respond_to do |format| 46 if @user.update(user_params) 47 format.html { redirect_to @user, notice: 'User was successfully updated.' } 48 format.json { render :show, status: :ok, location: @user } 49 else 50 format.html { render :edit } 51 format.json { render json: @user.errors, status: :unprocessable_entity } 52 end 53 end 54 end 55 56 # DELETE /users/1 57 # DELETE /users/1.json 58 def destroy 59 @user.destroy 60 respond_to do |format| 61 format.html { redirect_to users_url, notice: 'User was successfully destroyed.' } 62 format.json { head :no_content } 63 end 64 end 65 66 private 67 # Use callbacks to share common setup or constraints between actions. 68 def set_user 69 @user = User.find(params[:id]) 70 end 71 72 # Never trust parameters from the scary internet, only allow the white list through. 73 def user_params 74 params.require(:user).permit(:name) 75 end 76end 77

現在、New Userをクリックしても何も反応しません。
index.html.erbの、
下から2行目
<%= link_to 'New User', new_user_path, remote: true, class: "btn btn-lg btn-primary" %>

remote: trueを消すとモーダルフォームが表示されますが、
newアクションに飛んでしまいます。

見本のまま入力したつもりですが、どこかミスしているようです。

どこが悪いのでしょうか?

宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

Newがjsのレスポンスを許容していません。
Users controllerのdef newを

def new
@user = User.new
respond_to do |format|
format.html{}
format.js {}
end
end
と言った風に書き替えて下さい

投稿2017/03/28 12:02

moke

総合スコア2241

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

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

pecchan

2017/03/28 22:46

moke様 いつも有難う御座います。 参考元のサイトにも、js許容する記述はなく完全にドツボでした。 勉強になります。 有難う御座いました。
moke

2017/03/29 00:22 編集

うっ pecchan様でしたか 昨日酔っ払ってスマホから回答したやつです、すみません ところで Bootstrap導入検討してくださったんですね。 他のメジャーなUIライブラリ jquery-uiと競合することがあるので、pluginを導入するときは どちらの系統か注意してくださいね。
pecchan

2017/03/29 01:50

moke様 お酒が入ってても適格な答え、すご過ぎます。 私には無理です(+_+) はい。Bootstrap無事導入させていただきました\(^o^)/ 有難う御座います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問