加載視圖通過Ajax

我正在構建一個有很多圖的應用程序。我想通過Ajax加載圖表以減少初始加載時間。這是當前儀表板視圖的樣子。加載視圖通過Ajax

<section class="container"> 
    <section class="row"> 
     <div class="span6 graph-container"> 
     <h3 class="box-header"><i class="icon-truck"></i>Service Levels</h3> 
     <div class="box"> 
      <img src="/assets/loading.gif" class="loading" /> 
      <%= content_tag :div, "", id: "shipments-by-service-type", data: {shipments: @charts[:service_analysis][:spend_data]} %> 
     </div> 
     </div> 
     <div class="span6 graph-container"> 
     <h3 class="box-header"><i class="icon-circle"></i>Weight Summary</h3> 
     <div class="box"> 
      <%= content_tag :div, "", id: "weight-ranges", data: {weight: @charts[:weight_analysis][:spend_data]} %> 
     </div> 
     </div> 
    </section> 
    <section class="row"> 
     <div class="span6 graph-container"> 
     <h3 class="box-header"><i class="icon-road"></i>Zone Summary</h3> 
     <div class="box"> 
      <%= content_tag :div, "", id: "weight-groups-zones", data: {zone: @charts[:zone_analysis][:spend_data]} %> 
     </div> 
     </div> 
     <div class="span6 graph-container"> 
     <h3 class="box-header"><i class="icon-time"></i>Spend Over Time</h3> 
     <div class="box"> 
      <%= content_tag :div, "", id: "shipping-trends", data: {trends: @charts[:shipping_trends][:spend_data]} %> 
     </div> 
     </div> 
    </section> 
    </section>

我當前的想法是要在控制器稱爲charts_controller.rb這將包含所有的邏輯的每個圖表和已具有的方法的視圖或部分的對應，然後通過Ajax加載在這些中的每一個觀點。

class ChartsController < ApplicationController 

    before_filter :authenticate_user!, :company_id 

    def service_level 
    #logic for service_level graph 
    respond_to do |format| 
    format.html 
    format.js 
    end 
    end 

end

例如我是新來使用Ajax的工作軌道內，我不知道如何去這樣做。這種方法有意義嗎？

來源

2013-07-29 rigelstpierre

你的意思是對於圖形的面積將被initiallt空，則用戶觸發一些按鈕點擊並出現？ – MurifoX

是的，這就是我想，在等待它們出現時顯示加載gif。 – rigelstpierre

您可以在服務器端的部分「繪製」圖表。如果您在使用jQuery，那麼你可以使用jQuery.load功能：

$('#graph-div').load('/my_restful_route');

控制器會碰到這樣的：

render partial: 'chart_partial'

來源

2013-07-29 20:22:03 richjhall18

我設置了它，它的工作，但div不斷重新加載它自己。思考爲什麼這可能會發生？ – rigelstpierre

我能想到的唯一的事情就是你有一些jQuery事件監聽器中的jQuery加載代碼，這個代碼被多次調用。我只是將代碼放在文檔中：$（document）.ready（function（）{$（'＃graph-div'）。load（'/ my_restful_route'）;}）; – richjhall18

加載視圖通過Ajax

回答

相關問題