Question

我正在尝试创建一个从输入框表中获取值的表单。用户可以手动输入此表中的值，也可以上传Excel电子表格。所有这一切都很好，但我希望用户能够导入电子表格，并在不重新加载页面的情况下更新数据表。存储此信息的主要模型是DataTable对象。

views / data_tables / index.html.erb看起来像这样：

<div id="tabs" class="tabs-bottom">
    <ul>
        <li><a href="#tabs-1">Data Input</a></li>
        <li><a href="#tabs-2">Data Display</a></li>
    </ul>
    <div class="tabs-spacer"></div>
    <div id="tabs-1" class="tab_frame">
        <%= render @data_table %>
    </div>
    <div id="tabs-2" class="tab_frame">
        <%= render "data_display" %>
    </div>
</div>

我正在使用Jquery-UI的标签视图。

部分的views / data_tables / _data_table.html.erb看起来像这样：

<%= nested_form_for @data_table, :remote => true do |f| %>
    <div id="table_pane">
    <table id="table_input" class="table_input">
        <tbody>
            <%= f.fields_for :financial_rows, :wrapper => false do |dr| %>
                <tr class="fields">
                    <td>
                        <%= dr.link_to_remove "x", {:class => "btn btn-danger"} %>
                    </td>
                    <td class="month">
                        <%= dr.text_field :month, :value => (dr.object.month.to_i) %>
                    </td>
                    <td class="year">
                        <%= dr.text_field :year, :value => (dr.object.year.to_i) %>
                    </td>
                   <td class="currency">
                       <% # . . .  %>
                       <% #Multiple fields omitted for brevity %>
                       <% # . . .  %>
                   </td>
               </tr>
            <% end %>
        </tbody>
    </table>
    <%= f.link_to_add "+", :financial_rows, :data => { :target => "#table_input" }, :class => "btn btn-success" %></br>
    </div>
    <%= f.submit :value => "Render Data" %>
<% end %>

<%= form_tag import_data_tables_path, multipart: true, remote: true do %>
    <%= file_field_tag :file %>
    <%= submit_tag "Import Spreadsheet" %>
<% end %>

最后的导入表格是我遇到的麻烦。在我的控制器controller / data_tables_controller.rb中，我的import方法如下所示：

def import
    @data_table = DataTable.new
    if !params[:file].blank?
        imported_file = params[:file]
        spreadsheet = read_file(imported_file)
        header = spreadsheet.row(2)
        (3..spreadsheet.last_row).each do |i|
            data = Hash[[header, spreadsheet.row(i)].transpose]
            f_row = FinancialRow.new
            f_row.attributes = data.to_hash.slice(*FinancialRow.accessible_attributes)

            @data_table.financial_rows << f_row
        end
        respond_to do |format|
            format.html { redirect_to @data_table}
            format.js
            format.json { render json: @data_table, location: @data_table}
        end
        #render('index')
    else
        flash[:error] = "Select a file for import"
        @data_table.financial_rows.build
        #render('index')
    end
end

当我在不尝试使用Ajax的情况下导入文件时，页面重新加载，数据表的文本字段完全填充，但是当我尝试使用Ajax时，页面只是重新加载而不对数据表进行任何更新。我写了一个javascript文件，理论上应该替换数据表所在的div。

views / data_tables / import.js.erb包含：

$("#tabs-1").html("<%= escape_javascript(render(:partial => @data_table)).html_safe %>");

我已经搜索了stackoverflow几个小时，阅读有关如何使用Ajax替换渲染部分的帖子，但我还没有发现任何对我有用的东西。我确信它是一个简单的东西，我忽略了，但是我很难解决使用Rails实现Ajax的方式，以及如何以及为什么要使用format.html，format.js或format上传.json。

我正在使用rails 3.2.12。我正在使用的一些值得注意的宝石是用于处理data_table表单的'nested_form'gem，以及用于处理导入电子表格的'roo'。

Rails - Ajax - 在Partial中更新嵌套表单

0 个答案: