Question

对于这个问题道歉，我还在学习铁路。尝试将我的编辑栏分开设置为使用单个更新按钮在同一页面中的单独选项卡。然后，用户可以在标签之间切换，准备好后，他或她可以按更新。我已经设法让我的观点看起来正确，但每当有人点击更新时，都没有任何反应。我在下面提供了相关代码。非常感谢你。

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在浏览器中加载，浏览器将自动关闭所有挂起的标签。这意味着您的表单标记可能在按钮标记之前关闭或类似这样，因此按钮不再是表单的一部分。

我也稍微调整了bootstrap列。您可以使用col-md-offset-5而不是使用col-md-5类放置一个空div。保持您的代码更短。您可能还想使用＆＃34;行＆＃34;用于分隔行的类（因此您可以删除空的col-md-3 div）。我建议你再看一下bootstrap网格系统。祝你好运！

Rails - 将设计表单划分为单独的选项卡并使用一个按钮提交

1 个答案: