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

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

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

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

Bootstrap

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

Ajax

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

解決済

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

pecchan
pecchan

総合スコア20

Ruby on Rails

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

Bootstrap

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

Ajax

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

1回答

0評価

0クリップ

4265閲覧

投稿2017/03/28 07:54

編集2022/01/12 10:58

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

モーダルフォームを表示したいです。
下記を参考にしましたが表示出来ませんでした。
[Rails5と BootstrapでAjax-modalform](http://qiita\.com/niwaken/items/ffbce52fb024fd369f24\)

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

views/users/_form.html.erb

ruby

<div class="modal-dialog"> <div class="modal-content"> <%= form_for\(@user, remote: true\) do |f| %> <% if user\.errors\.any\? %> <div id="error_explanation"> <h2><%= pluralize\(user\.errors\.count, "error"\) %> prohibited this user from being saved:</h2> <ul> <% user\.errors\.full_messages\.each do |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= f\.label :name %> <%= f\.text_field :name %> </div> <div class="actions"> <%= f\.submit %> </div> <% end %> </div> </div>

views/users/new.js.erb

jquery

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

views/users/index.html.erb

ruby

<p id="notice"><%= notice %></p> <h1>Users</h1> <table> <thead> <tr> <th>Name</th> <th colspan="3"></th> </tr> </thead> <tbody> <% @users\.each do |user| %> <tr> <td><%= user\.name %></td> <td><%= link_to 'Show', user %></td> <td><%= link_to 'Edit', edit_user_path\(user\) %></td> <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure\?' } %></td> </tr> <% end %> </tbody> </table> <br> <%= link_to 'New User', new_user_path, remote: true, class: "btn btn-lg btn-primary" %> <div id="user-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>

controllers/users_controller.rb

ruby

class UsersController < ApplicationController before_action :set_user, only: \[:show, :edit, :update, :destroy\] # GET /users # GET /users\.json def index @users = User\.all end # GET /users/1 # GET /users/1\.json def show end # GET /users/new def new @user = User\.new end # GET /users/1/edit def edit end # POST /users # POST /users\.json def create @user = User\.new\(user_params\) respond_to do |format| if @user\.save format\.html { redirect_to @user, notice: 'User was successfully created\.' } format\.json { render :show, status: :created, location: @user } format\.js { @status = "success"} else format\.html { render :new } format\.json { render json: @user\.errors, status: :unprocessable_entity } format\.js { @status = "fail" } end end end # PATCH/PUT /users/1 # PATCH/PUT /users/1\.json def update respond_to do |format| if @user\.update\(user_params\) format\.html { redirect_to @user, notice: 'User was successfully updated\.' } format\.json { render :show, status: :ok, location: @user } else format\.html { render :edit } format\.json { render json: @user\.errors, status: :unprocessable_entity } end end end # DELETE /users/1 # DELETE /users/1\.json def destroy @user\.destroy respond_to do |format| format\.html { redirect_to users_url, notice: 'User was successfully destroyed\.' } format\.json { head :no_content } end end private # Use callbacks to share common setup or constraints between actions\. def set_user @user = User\.find\(params\[:id\]\) end # Never trust parameters from the scary internet, only allow the white list through\. def user_params params\.require\(:user\)\.permit\(:name\) end end

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

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

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

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

宜しくお願い致します。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails

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

Bootstrap

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

Ajax

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