前提・実現したいこと
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でどのような処理が行われているのかを分析しています。
あなたの回答
tips
プレビュー