Question

我正在制作一个电子商务网站页面。它由两部分组成。侧边栏包含所有产品的列表，右侧列显示从列表中选择产品后产品的详细信息。

我正在进行ajax调用以加载应用程序的各个部分。所有产品的侧边栏都是索引，右侧的产品详细信息显示，显示所选产品的详细信息。现在，当我编辑产品（通过模态）时，如何自动重新加载相应的部分，以便反映新的更改。为了看到我必须刷新当前页面的更改，我如何确保部分自动加载一旦我点击编辑模式上的提交。

我的index.html.erb看起来像

  <div class="container">
        <div class="row row-offcanvas row-offcanvas-left">
           <div class="col-xs-8 col-sm-4 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="well sidebar-nav">
              <ul class="nav">
                <div class="jumbotron well">
      <h3>Product Listing Application</h3>
               </div>

                  <%= link_to "New Product", new_product_path, remote: true, class: "btn btn-primary" %>

                <div class="list-group">
                  <%= render "index" %>
                </div>
              </ul>
            </div><!--/.well -->
          </div><!--/span-->   

          <div class="col-xs-10 col-sm-8">
         <div id="page-content-wrapper">
<div class="page-content">
<div class="col-md-12 product-info" id="product-details">

</div>
</div>
</div>
          <div id="product-modal" class="modal fade"></div>
      </div>

        </div><!--/row-->
  </div>

我的_index.html.erb是

<% @products.each do |product| %>
     <%= link_to product_path(product), remote: true, class: "list-group-item"  do %> 
        <h4 class="list-group-item-heading"><%= product.name %></h4>
        <p class="list-group-item-text"><%= number_to_currency product.price %></p>
<% end %>
<% end %>

我的_edit.html.erb是

<div class="modal-dialog">
    <div class="modal-content">
<div class="modal-header">
  <h3><%= "Editing #{@product.name}" %></h3>
</div>
<%= render "form" %>
</div>
</div>

我的_form.html.erb是

<%= form_for @product, remote: true, html: { class: "form-horizontal", style: "display:inline;" } do |f| %>
  <div class="modal-body">
    <ul class="errors"></ul>

    <div class="control-group">
      <%= f.label :name, class:"control-label" %>
      <div class="controls">
        <%= f.text_field :name %>
      </div>
    </div>
    <div class="control-group">
      <%= f.label :price, class: "control-label" %>
      <div class="controls">
        <%= f.text_field :price %>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <%= f.submit class: "btn btn-primary" %>
    <%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %>
  </div>
<% end %>

Answer 1

您可以使用

location.reload();

在你的js.erb上刷新你的部分或你的实例可变你可以直接使用

@post = @post.reload # in palce of @post you can your instance variable

Answer 2

创建与您的页面同名的js文件在其中添加以下代码

edit.js.erb

$("<%= escape_javascript render(:partial => 'ur_partial_page_name')  %>").dialog();
$('#new_comment_link').hide();`

在您的编辑页面表单中，您将调用模态对话框

<%= link_to "edit", edit_product_path (@product, :format => :js), :remote => true %>

在您的产品控制器中

def edit  
    @source = Product.find(params[:id])  
    respond_to do |format|  
        format.html # edit.html.erb  
        format.xml  { render :xml => @product }  
        format.js  
    end  
end

以您的部分形式

<%= form_for (@product, :remote => true) do |f| %>

如何在rails中进行编辑后刷新部分

2 个答案: