rails5、modalが表示されないです。
モーダルウィンドウが一瞬表示されて、すぐに消えてしまいます。
以下のコードでは、
フォームの箇所が一瞬表示されて、入力する間もなく消えてしまいます。
_join_button.html.erb <% if current_user.join?(group) %> <%= form_for(current_user.group_members.find_by(group_id: group.id), html: { method: :delete }) do |f| %> <%= hidden_field_tag :group_id, group.id %> <%= f.submit '退会する', class: 'btn btn-danger btn-block' %> <% end %> <% else %> <button class="btn btn-warning btn-block" data-toggle="modal" data-target="#join"> 参加する </button> <div class="modal fade" id="join" tabindex="-1" role="dialog" aria-labelledby="dialogHeader" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="dialogHeader">参加コメント</h4> </div> <%= form_for(current_user.group_members.build, url: group_members_path, remote: true) do |f| %> <%= hidden_field_tag :group_id, group.id %> <div class="modal-body"> <%= f.text_field :comment, class: 'form-control' %> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button> <%= f.button '送信', class: 'btn btn-primary', data: { disable_with: '送信中'} %> </div> <% end %> </div> </div> </div> <% end %>
class GroupMembersController < ApplicationController before_action :authenticate_user! def create @group = Group.find(params[:group_id]) join = current_user.group_members.build do |t| t.group_id = params[:group_id] t.comment = params[:group_member][:comment] end join.save flash[:success] = 'グループに参加します' redirect_to @group end def destroy group = Group.find(params[:id]) current_user.defect(group) lash[:success] = 'グループを退会します' redirect_to root_url end end
groups/show.html.erb <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> 参加者 </div> <div class="panel-body"> <ul class="list-unstyled"> <% @group_members.each do |group_members| %> <li> <%= link_to(group_members.user) do %> <%= group_members.user.name %> <% end %> <br> <%= group_members.comment %> </li> <% end %> </ul> </div> </div> <% if user_signed_in? %> <%= render 'group_members/join_button', group: @group, user: @user %> <% end %> <% if current_user == @group.user %> <%= link_to '編集する', edit_group_path, class: 'btn btn-warning btn-block' %> <%= link_to "削除する", @group, method: :delete, data: { confirm: "本当に削除してよろしいでしょうか?" }, class: 'btn btn-warning btn-block' %> <% end %> <%= link_to 'トップへ', root_path, class: 'btn btn-warning btn-block' %> </div> </div>
初心者なので、
優しく教えてくださると幸いです。
よろしくお願いします。
railsというか、おそらくbootstrapに関する質問ですね。目的としたい動作は、グループの詳細画面に(ログインしていれば)参加するボタンが表示されており、参加するボタンを押すとmodalでフォームが表示されるもの。だが、参加ボタンを押してもmodalがすぐに閉じてしまう。ということであってますか?また、おそらく対象はjavascriptまたはhtml側です。デバッグするのに、chormeのdeveloperコンソール等は使えますか?
その通りです。chormeのdeveloperコンソール等は使えます!
そうしたら①コンソールになにかしらエラー等は表示されてないですか?②id="join"となっているdom要素が複数存在していないか確認できますか?
あなたの回答
tips
プレビュー