rails5でmodalがうまく機能しないです。助けてください！

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">&times;</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>

初心者なので、
優しく教えてくださると幸いです。

よろしくお願いします。

h_daido

2018/04/13 05:09

railsというか、おそらくbootstrapに関する質問ですね。目的としたい動作は、グループの詳細画面に（ログインしていれば）参加するボタンが表示されており、参加するボタンを押すとmodalでフォームが表示されるもの。だが、参加ボタンを押してもmodalがすぐに閉じてしまう。ということであってますか？また、おそらく対象はjavascriptまたはhtml側です。デバッグするのに、chormeのdeveloperコンソール等は使えますか？