加载视图通过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

回答

相关问题