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

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

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

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

Devise

Deviseとは、Ruby-on-Railsの認証機能を追加するプラグインです。

Q&A

0回答

525閲覧

Railsのdeviseのモーダルウィンドウ化でつまずきました

taya_intel

総合スコア16

Ruby on Rails 5

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

Devise

Deviseとは、Ruby-on-Railsの認証機能を追加するプラグインです。

0グッド

0クリップ

投稿2019/04/06 02:40

編集2019/04/06 03:35

前提・実現したいこと

RailsでTwitterチックなアプリケーションを作成しています。
User機能を実装するにあたりdevise gemを利用しています。
devise gemで作成したuser登録機能を改変して、モーダルウィンドウ化して登録できるようにしようと思っています。
![イメージ説明]
homeにある、こちらのSign upボタンを押すと、モーダルウィンドウを表示させようとしています。

(1d88671edaa502dbd7c75959b933dabc.png)
ディレクトリ階層としては、
app
ーviews
ーーhome
ーーーindex.html.erb
ーーusers ※deviseで作成したView
ーーーconfirmations
ーーーーnew.html.erb



ーーーregistraions
ーーーー_form.html.erb
ーーーーedit.html.erb
ーーーーnew.js.erb
です。
これは、こちらの記事を参考にして行いました。
[https://qiita.com/niwaken/items/ffbce52fb024fd369f24]
(新規作成処理のAjax化の手前までやりました。)

発生している問題・エラーメッセージ

モーダルウィンドウが表示されるはずなのに、クリックしてもモーダルウィンドウが表示されません。

該当のソースコード

views/home/index.html.erb

<div class="container"> <ul> <li><%= link_to "Sign up", new_user_registration_path, remote: true %></li> <div id="user-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div> <li><%= link_to "Log in", "#" %></li> </ul> </div>

views/users/registrations/_form.html.erb

<div class="modal-dialog"> <div class="modal-content"> <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, autocomplete: "email" %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "new-password" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "new-password" %> </div> <div class="actions"> <%= f.submit "Sign up" %> </div> <% end %> <%#= render "devise/shared/links" %> </div> </div>

views/users/registrations/new.js.erb

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

試したこと

Postでもモーダルウィンドウ化を行なっており、そちらではモーダルウィンドウ化が適切にできているので、モーダルウィンドウ化のために導入するjQueryなどのgem等々の記述はできていることが確認できています。

補足情報

私自身がjQueryを全然理解できていなくて、見よう見まねで行なったので、なぜモーダルウィンドウが表示されないのかがわからないので、今現在jQueryでどのような処理が行われているのかを分析しています。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問