Rails モーダル画面について

モーダル画面にてコメント入力を実装したのですが、reload処理が行われません
送信ボタンを押すとモーダル画面がreloadされずそのままの状態です。クローズボタンを押してモーダル画面を閉じ、ブラウザの再読み込み行えば、書き込んだコメントは表示されます。
Rails ver4.1.6

lang
1
2
3
4    <!-- コメント一覧 -->
5    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
6      <div class="panel panel-default">
7        <div class="panel-heading" role="tab" id="headingOne">
8          <h4 class="panel-title">
9            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
10              コメント一覧
11            </a>
12          </h4>
13        </div>
14        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
15          <div class="panel-body">
16            <ul class="list-unstyled">
17              <% @comments.each do |comment| %>
18                  <li>
19                    <p>
20                      <%= link_to comment.user.profile.user_name, profile_path(comment.user_id) %>:
21
22                      <%= comment.body %>
23                    </p>
24                  </li>
25              <% end %>
26            </ul>
27          </div>
28        </div>
29      </div>
30    </div>
31
32
33    <!-- Button trigger modal -->
34    <button class="btn btn-default  btn-block" data-toggle="modal" data-target="#createComments">
35      コメントする
36    </button>
37
38
39    <!-- コメント入力モーダル -->
40    <div class="modal fade" id="createComments" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
41      <div class="modal-dialog">
42        <div class="modal-content">
43          <div class="modal-header">
44            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
45            <h4 class="modal-title" id="myModalLabel">コメント入力</h4>
46          </div>
47          <%= form_for(@item.comments.build, url:item_comments_path(@item), remote: true) do |f| %>
48              <div class="modal-body">
49                <%= f.text_field :body, class: 'form-control'%>
50              </div>
51
52              <div class="modal-footer">
53                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
54                <%= f.button '送信', class: 'btn btn-primary', data: { disable_with: '送信中…' } %>
55              </div>
56          <% end %>
57        </div>
58      </div>
59    </div>
60  </div>
61

行動規範の内容に同意します

回答1件

ベストアンサー

モーダルのidが間違っていただけでした。
正しくは下記の通りです。

<!-- Button trigger modal -->
<button class="btn btn-default  btn-block" data-toggle="modal" data-target="#createComments">
  コメントする
</button>


<!-- コメント入力モーダル -->
<div class="modal fade" id="createComments" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">コメント入力</h4>
      </div>
      <%= form_for(@item.comments.build, url:item_comments_path(@item), remote: true) do |f| %>
          <div class="modal-body">
            <%= f.text_field :body, class: 'form-control'%>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <%= f.button '送信', class: 'btn btn-primary', data: { disable_with: '送信中…' } %>
          </div>
      <% end %>
    </div>
  </div>
</div>

</div>

投稿2014/12/18 08:18

退会済みユーザー

総合スコア0