【Rails6】モーダルウィンドウで実装すると、ユーザー登録ができない

Question

bootstrapのmodalを使用して、
サインアップ画面を実装したいのですが、
Userの保存ができません。。
modalの画面は表示されます。

どなたか詳しい方教えていただけませんでしょうか。

users_controllerの
newアクションでcreateは作っております。

調べてみると、createするために
同じ名前のjs.erbファイルが必要とのことなので、作っては見ましたが、
保存後の画面に推移せず、TOPページに戻ってしまいます。

MySQLを使用しているので、
SequelProとRails c でユーザーが作成されていないことは確認しました。

</users_controller.rb>

  def create
    @user = User.new(user_params)
    if @user.save
      flash[:success] = "アカウント登録が完了しました"
      redirect_to @user
    else
      render 'new'
    end 
  end
```

<html.erb>
```home.html.erb
<button type="button" class="btn button primary-button mr-5" 
datatoggle="modal" data-target="#exampleModalCenter">
新規登録
</button>
<%= render 'users/new' %>
```


<create.js.erb>
```create.js.erb
$('#exampleModalCenter').html("<%= escape_javascript(render 'users/new') %>")
```

<_new.html.erb>
```_new.html.erb
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">登録する</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <%= form_with(model: @user, local: true) do |f| %>
            <div class="form-group">
              <%= f.label :name, "アカウント名" %>
              <%= f.text_field :name, class: "form-control"  %>

              <%= f.label :email, "メールアドレス" %>
              <%= f.email_field :email, class: "form-control"  %>

              <%= f.label :password, "パスワード" %>
              <%= f.password_field :password, class: "form-control"  %>

              <%= f.label :password_confirmation, "パスワード（確認用）" %>
              <%= f.password_field :password_confirmation, class: "form-control"  %>

              <div class="d-flex justify-content-center p-4">
                <%= f.submit "新規登録", class: "btn btn-primary" %>
              </div>
            <% end %>
          </div>
          <%= link_to "利用規約", "#", class: "#" %>
        </form>
      </div>
    </div>
  </div>
</div>
```


初歩的な質問で大変申し訳ないのですが、
ご教授いただけたら幸いです。

よろしくお願いいたします。

Comments

[m.ts10806]

users/new　が２か所読み込ませてるようですが、どういう動きを想定されてますか？
そのusers/new　の内容をご提示ください。

[yozakura_dayo]

ご返信ありがとうございます！
users/newですが、_new.html.erbにモーダル表示の時のコードが入っております。
html.erbではモダール画面表示
create.js.erbでは、保存する際にレンダリングが必要とのことで、
記事のコードをそのままコピーした感じです。

初心者で大変申し訳ないのですが、
よろしくお願いいたします。

[m.ts10806]

質問は編集できます。文章説明よりもコードを。

[yozakura_dayo]

大変失礼しました。
部分テンプレートのコードを載せました。

[m.ts10806]

ん－やはり
> $('#exampleModalCenter').html("<%= escape_javascript(render 'users/new') %>")
これを何のために入れてるのか分かりませんね。

たぶんHTMLこうなりますよ。

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">

モーダルも正しく動作しなくなるのでは。

[yozakura_dayo]

ご連絡ありがとうございます！
おっしゃる通り、JavaScriptファイルを削除し、
ご回答いただいた<form>タグを削除して、
ちゃんとできる様になりました。
お忙しい中誠にありがとうございました。

Answer 1

気になる点だけあげます。

<%= render 'users/new' %>

既にrenderされてるので、HTML内にモーダルは出てると思います。
で

$('#exampleModalCenter').html("<%= escape_javascript(render 'users/new') %>")

なので、
「モーダルの枠の中に同じIDが重なってる」状況になってると思います。

ブラウザデベロッパツールからHTML確認してみてください。
たぶんこうなってます。

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
    //中略
    </div>
  </div>
 </div>
</div>

同じページ内にID重複はできませんので、JavaScriptが正しく動作しなくなる可能性があります。

あと、おそらくこっちが今回起きてる問題の張本人

        <form>
          <%= form_with(model: @user, local: true) do |f| %>

これだとformが入れ子になっています。
formの入れ子はできませんし、外側のformには何も属性が指定されていません。
外側の何もないformタグは不要ではないでしょうか。

Comments

[yozakura_dayo]

ご回答ありがとうございます！
JavaScriptファイルと<form>を消して、
できる様になりました。
同じページにID重複はお恥ずかしい限りです。
ありがとうございました！

[m.ts10806]

ブラウザデベロッパツールからHTML確認　
は必ず行ってください。
HTMLが正しくなければ動作も想定の動きをしてくれません。

[yozakura_dayo]

勉強になります！
ご丁寧にありがとうございました！