Rails& JQuery如何在创建后不刷新时显示新插入的数据

时间:2016-01-25 16:40:52

标签: jquery ruby-on-rails ajax

我在索引视图中有两个部分是_table,它包含所有供应商和& _popup得到了表单,在提交此表单之后它应该隐藏模态并将表格与最后插入的供应商更新到数据库而不刷新,我已经看到很多教程这样做但不是表格或部分 这是我试图用的代码。

这是我的控制器:

def index
  @suppliers  = Supplier.all
  @supplier   = Supplier.new
end

def create
  @supplier = Supplier.new(supplier_params)

  respond_to do |format|
    if @supplier.save
      format.html { redirect_to @supplier, notice:  (t '.notice') }
      format.json { render :show, status: :created, location: @supplier }
      format.js
    else
      format.html { render :index }
      format.json { render json: @supplier.errors, status: :unprocessable_entity }
      format.js
    end
  end
end

index.html.erb



<%- model_class = Supplier -%>
<div class="page-content-wrapper">
  <!-- BEGIN CONTENT BODY -->
  <div class="page-content">
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-dark">
                        <i class="icon-settings font-dark"></i>
                        <span class="caption-subject bold uppercase"><%= t '.title', :default => model_class.model_name.human.pluralize.titleize %></span>
                    </div>
                    <div class="tools"> </div>
                </div>
                <div id="suppliers">
                    <%= render 'table' %>
                </div>
        </div>
    </div>   
    <%= link_to  t('helpers.links.new_supplier') , '#splash', 'data-toggle' => 'modal' , 'class' => 'btn btn-success mb-10' %>                                    

<%= render 'form' %>

  </div>
&#13;
&#13;
&#13;

我创建了一个create.js.erb文件,以便在提交表单

后运行
// hide the popup
$('#splash').modal('hide');
// reset the form inputs
$("#new_supplier")[0].reset();

到目前为止一切正常,但如何重新加载部分表,以便它包含刚刚提交的内容而不刷新页面 我试过看很多教程,但没有包含我正在寻找的东西 任何帮助将不胜感激

1 个答案:

答案 0 :(得分:1)

将它放在你的create.is.erb文件中:

$("#suppliers").html("<%= escape_javascript(render partial: 'table' ) %>");

这样,您可以通过JavaScript重新呈现表,而无需刷新页面。