如何在Ruby on Rails中使用Ajax加載部分

Question

當檢測到搜索時，我有部分要加載。 在某些情況下，加載可能需要很長時間，因此，我希望在頁面完全加載后通過Ajax加載，否則很可能會導致超時。

我目前的操作方式導致同步加載。

我還希望顯示一個加載屏幕，直到完全加載為止。 目前，這是有效的，但僅在設置了超時的情況下作為同步負載。

    <% if(params[:q][:name_cont].present?) %>

  <script>
    $( document ).ready(function() {

      function load_partial() {     
        $("div.super_search").replaceWith('<%= escape_javascript(render partial: 'super_search_tp') %>');
                                          }

                                          // use setTimeout() to execute
                                          setTimeout(load_partial, 1000)

      });

  </script>

  <div class="super_search">

    <i class='fa fa-spinner fa-spin'></i> Loading Product Analysis...

  </div>

<% end %>

Answer 1

為控制器中的局部對象創建一個方法：

  def super_search
    @search = @@products
    render :layout => false
  end

重命名partial，因此它是此方法的視圖。

將@@products添加到index方法中，以便可以將搜索中的數據用於新方法中：

@@top_products = @q.result

渲染部分代碼：

<% if(params[:q][:name_cont].present?) %>

      <script>

        $.ajax({
          url: "/products/super_search",
          cache: false,
          success: function(html){
            $("#foo-bar").replaceWith(html);
          }
        });

      </script>

      <div class="super_search" id="foo-bar">

        <i class='fa fa-spinner fa-spin'></i> Loading Product Analysis...

      </div>

        <% end %>