Rails - Deviseフォームを別々のタブに分割して1つのボタンで送信

Question

私はまだレールを学んでいます。私の編集レールを1つの更新ボタンで同じページの別々のタブに分割しようとしています。ユーザーはタブを切り替えることができ、準備が整ったら更新を押すことができます。私はすでに正しい見方をするために管理してきましたが、人が更新をクリックするたびに何も起こりません。私は以下の関連コードを提供しました。どうもありがとうございます。

edit.html.erb

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> 
<%= devise_error_messages! %> 
<div class="col-md-12"> 
    <div class="tabbable-panel"> 
    <div class="tab-content"> 
    <div id="trending71" class="tab-pane fade in active"><br> 
    <div class="col-md-5"> 
    </div> 
    <div class="col-md-4"> 
    <div class="form-group"> 
    <%= f.label :avatar, class: 'col-sm-2 control-label' %> 
    <%= f.file_field :avatar %><br /> 
    </div> 
<br> 
    <div class="form-group"> 
    <%= f.label :background, class: 'col-sm-2 control-label' %> 
     <div class="col-sm-6"> 
     <%= f.file_field :background %><br /> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    </div> 
<div id="fire" class="tab-pane fade"> 
    <br> 
    <div class="col-md-5"> 
    </div> 
    <div class="col-md-4"> 
    <div class="container"> 
    <div class="field"> 
    <%= f.label :homecity %><br> 
    <%= f.collection_select :homecity_id, Homecity.all, :id, :Hometown %> 
    <div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    </div> 
</div> 
<div id="essos" class="tab-pane fade"> 
    <br> 
    <div class="col-md-5"> 
    </div> 
    <div class="col-md-4"> 
    <h2>Cancel my account</h2> 
    <p>Unhappy? 
    <br> 
    <br> 
    <%= button_to "Cancel my account", registration_path(resource_name), class: "btn btn-danger", data: { confirm: "Are you sure? You cannot undo this." }, method: :delete %></p> 
    </div> 
    <div class="col-md-3"> 
    </div> 
</div> 
</div> 
<div class="container"> 
<div class="form-group"> 
<%= f.submit "Update", class: 'btn btn-lg btn-block btn-primary' %> 
</div> 
<% end %> 
<div> 

Answer 1

セバスチャンは、あなたの実際のコードだけでなく、SOバージョンに言及していました。あなたの押し込みをより注意深く見てみてください。これは動作するはずです：

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> 
<%= devise_error_messages! %> 
<div class="col-md-12"> 
    <div class="tabbable-panel"> 
    <div class="tab-content"> 
     <div id="trending71" class="tab-pane fade in active"><br> 
     <div class="col-md-4 col-md-offset-5"> 
      <div class="form-group"> 
      <%= f.label :avatar, class: 'col-sm-2 control-label' %> 
      <%= f.file_field :avatar %><br /> 
      </div> 
      <br> 
      <div class="form-group"> 
      <%= f.label :background, class: 'col-sm-2 control-label' %> 
      <div class="col-sm-6"> 
       <%= f.file_field :background %><br /> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
     </div> 
     </div> 
     <div id="fire" class="tab-pane fade"> 
     <br> 
     <div class="col-md-4 col-md-offset-5"> 
      <div class="container"> 
      <div class="field"> 
       <%= f.label :homecity %><br> 
       <%= f.collection_select :homecity_id, Homecity.all, :id, :Hometown %> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
     </div> 
     </div> 
     <div id="essos" class="tab-pane fade"> 
     <br> 
     <div class="col-md-4 col-md-offset-5"> 
      <h2>Cancel my account</h2> 
      <p>Unhappy? 
      <br> 
      <br> 
      <%= button_to "Cancel my account", registration_path(resource_name), class: "btn btn-danger", data: { confirm: "Are you sure? You cannot undo this." }, method: :delete %></p> 
     </div> 
     <div class="col-md-3"> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="form-group"> 
     <%= f.submit "Update", class: 'btn btn-lg btn-block btn-primary' %> 
    </div> 
    </div> 
</div> 
<% end %> 

間違ったインデントほとんどの時間は、HTMLは本当に厄介に見えるようになります。あなたのケースでは、おそらくページがシンプルであるか、視覚的に混乱していないため、気づかなかったでしょう。いずれにしても、htmlがブラウザにロードされると、ブラウザは自動的にすべての保留中のタグを閉じます。これは、フォームタグがボタンタグの前などに閉じている可能性があるため、ボタンがフォームの一部ではなくなったことを意味します。

私も少しブートストラップの列を微調整しました。 col-md-5クラスで空のdivを入れるのではなく、col-md-offset-5を使うことができます。コードを短くします。また、 "行"クラスを使用して行を区切りたい場合もあります（空のcol-md-3 divを取り除くことができます）。ブートストラップグリッドシステムをもう一度見てみることをお勧めします。がんばろう！