Question

我有一个_form，我必须在同一页面上使用bootstrap模式显示它。

我有admin.html代码（我有我的模态代码）。

admin.html.erb

<div id="user_form" class="modal fade " tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body ">

          <!--  I want to display the _form.html.erb here to edit the details  in the modal
           when the user clicks on link_to (which goes to the edit_reseller_path(reseller.id) path )-->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
        </div>
      </div>
    </div> 
    </div>
    <span style="float: right">
      <%= link_to "&nbsp;&nbsp;<i class='fa fa-pencil'></i>".html_safe, edit_reseller_path(reseller.id) ,title: "Edit Profile", "data-toggle" => "modal",  "data-dismiss=" => "modal" "data-target" => "#user_form" %>
    </span>

我必须用bootstrap模式编辑的形式是这个。

_form.html.erb

<div id="user_form" >
  <!--[form:user]-->
  <div class="splitcontentleft">
    <fieldset class="box tabular">
      <legend><%=l(:label_information_plural)%></legend>
      <p><%= f.text_field :login, :required => true, :size => 25  %></p>
      <p><label for='reseller[firstname]'>Name<span class="required"> *</span></label>
        <%= f.text_field :firstname, :required => true, :no_label => true %>
      </p>
      <p><%= f.text_field :mail, :required => true %></p>
      <p><%= f.text_field :contact_number%></p>
      <p><%= f.select :language, lang_options_for_select %></p>

      <!-- Some logic code goes here -->
  </div>
  <div class="splitcontentright">
    <%= image_tag @reseller.avatar.url(:medium) unless @reseller.avatar.url(:medium) == "/avatars/medium/missing.png"%>
  </div>
</div>
<div style="clear:left;"></div>
<!--[eoform:user]-->

目前，当我点击link_to铅笔图标时，它会重定向到要编辑的新页面。但我想使用模态在同一页面上编辑它。我怎样才能做到这一点？请帮我。我尝试通过跟踪模式和表单中的表单ID但不起作用。

Answer 1

您的链接标记缺少data-target属性：

<%= link_to "&nbsp;&nbsp;<i class='fa fa-pencil'></i>".html_safe, edit_reseller_path(reseller.id) ,title: "Edit Profile", "data-toggle" => "modal",  "data-dismiss=" => "modal", "data-target" => "#user_form"%>

Rails 4 ：

<%= link_to "&nbsp;&nbsp;<i class='fa fa-pencil'></i>".html_safe, edit_reseller_path(reseller.id), title: "Edit Profile", data: { toggle: 'modal', dismiss: 'modal', target: '#user_form'} %>

admin.html.erb

<div id="user_form" class="modal fade " tabindex="-1" role="dialog" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body ">
        <%= render partial: 'form' %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
      </div>
    </div>
  </div>
</div>
<span style="float: right">
  <%= link_to "&nbsp;&nbsp;<i class='fa fa-pencil'></i>".html_safe, edit_reseller_path(reseller.id), title: "Edit Profile", data: { toggle: 'modal', dismiss: 'modal', target: '#user_form'} %>
</span>

_form.html.erb

<div id="some_id" >
  <div class="splitcontentleft">
    <fieldset class="box tabular">
      <legend><%=l(:label_information_plural)%></legend>
      <p><%= f.text_field :login, :required => true, :size => 25  %></p>
      <p><label for='reseller[firstname]'>Name<span class="required"> *</span></label>
        <%= f.text_field :firstname, :required => true, :no_label => true %>
      </p>
      <p><%= f.text_field :mail, :required => true %></p>
      <p><%= f.text_field :contact_number%></p>
      <p><%= f.select :language, lang_options_for_select %></p>
    </fieldset>
  </div>
  <div class="splitcontentright">
    <%= image_tag @reseller.avatar.url(:medium) unless @reseller.avatar.url(:medium) == "/avatars/medium/missing.png"%>
  </div>
</div>
<div style="clear:left;"></div>

友情提示：尽量不要使用内联样式。

Ruby on Rails中的Bootstrap模式编辑表单

1 个答案: