0

入力ボックスのテーブルから値を取得するフォームを作成しようとしています。ユーザーは、このテーブルに手動で値を入力するか、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 %>

最後のインポート フォームは、私が問題を抱えているものです。私のコントローラ controllers/data_tables_controller.rb では、インポート メソッドは次のようになります。

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 を使用しようとすると、データ テーブルが更新されずにページが再読み込みされます。理論的には、データテーブルがある div を置き換える必要がある JavaScript ファイルを作成しました。

views/data_tables/import.js.erb には以下が含まれます:

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

Ajaxを使用してレンダリングされたパーシャルを置き換える方法に関する投稿を読んで、何時間もstackoverflowを精査しましたが、うまくいったものは何も見つかりませんでした. 私が見落としているのは単純なことだと確信していますが、Rails で Ajax を実装する方法と、format.html、format.js、または format を使用する方法と理由について頭を悩ませています。 .json.

Rails 3.2.12 を使用しています。私が使用しているいくつかの注目すべき gem は、data_table フォームを処理する「nested_form」gem と、スプレッドシートのインポートを処理する「roo」です。

4

0 に答える 0