Question

我有一个带有饼图的页面，使用 Chart.js 从数据库中获取一些数据并将其可视化。用户输入两个日期（从/到），然后按下更新图表按钮，并将部分动态加载到页面中。不幸的是，图表仅在刷新后才有效。

我知道关于turbolinks和jquery的交易，但我似乎没有去任何地方。同样的事情发生在网站上的其他jQueries，如果我回去，那么我需要刷新才能加载js代码。

的application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require moment
//= require bootstrap-sprockets
//= require Chart
//= require libs/bootstrap-lifestyle
//= require bootstrap-datepicker
//= require_tree .
//= require turbolinks

_visualise_chart.html.erb

<script>
  // Load jQuery data 

  $(document).on('page:load', ready);
  $(document).on('page:change', ready);
  $(document).ready(ready);

  var ready = function () {

  //
  // Setup Tickets per day of week chart
  //
  var data = [
    {
        value: $('#MyPieChart').data('removed'),
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Removed"
    },
    {
        value: $('#MyPieChart').data('installed'),
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Installed"
    },
    {
        value: $('#MyPieChart').data('updated'),
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Updated"
    }
  ]

  if ($('#MyPieChart')) {
       myNewChart = new Chart($("#MyPieChart").get(0).getContext("2d")).Pie(data, {
          //Number - Amount of animation steps
          animationSteps : 200,
          responsive : true,
          maintainAspectRatio: true
       });
    }

};

</script>

<div class="panel panel-default" style="width: max-width:360px; float:right;">
  <div class="panel-body">
    <div class="label distleft" style="background-color: #FDB45C">
      Updated:
    </div> 
    <%= @logevents_updated %> 
    <div class="label distleft" style="background-color: #46BFBD">
      Installed:
    </div>  
    <%= @logevents_installed %> 
    <div class="label distleft" style="background-color: #F7464A">
      Removed:
    </div> 
    <%= @logevents_removed %> 
  </div>
</div>

<%= content_tag :canvas, nil,  id: "MyPieChart", width: 300, height: 300,
      data: { 
          installed: @logevents_installed,
          updated: @logevents_updated,
          removed: @logevents_removed 
          } %>

visualise.js.erb

$('#piechart').html('<%= escape_javascript(render("visualise_chart")) %>');

visualise.html.erb

<h1>Visualize data</h1>
<hr />

<div class="col-lg-12">
  <div style="max-width: 600px" class="center-block">
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="piechart">
          <%= render "visualise_chart" %>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="col-lg-12">
  <div style="max-width: 600px" class="center-block">
    <div class="panel panel-default">
      <div class="panel-heading">
        Please select from and to dates <br/>
      </div>
      <div class="panel-body">
        <%= form_tag visualise_path, class: 'form-inline',remote: true, :method => 'get', multipart: true do %>
          <div class="form-group">
            <%= text_field_tag :from_date, nil, class: 'datepicker form-control', type: 'text', placeholder: "From date"%>
          </div>
          <div class="form-group">
            <%= text_field_tag :to_date, nil, class: 'datepicker form-control', placeholder: "To date"%>
          </div>
        <%= submit_tag "Update chart", class: 'btn btn-default' %>
        <% end %>
      </div>
    </div>
  </div>
</div>

visualise.js

// Load jQuery data 
$(document).ready(ready);
$(document).on('page:load', ready);
$(document).on('page:change', ready);

var ready = function () {

  //
  // Setup Tickets per day of week chart
  //
  var data = [
    {
        value: $('#MyPieChart').data('removed'),
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Removed"
    },
    {
        value: $('#MyPieChart').data('installed'),
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Installed"
    },
    {
        value: $('#MyPieChart').data('updated'),
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Updated"
    }
  ]

  if ($('#MyPieChart')) {
       myNewChart = new Chart($("#MyPieChart").get(0).getContext("2d")).Pie(data);
  }

};

任何想法？

Answer 1

使用内联javascript是一种不好的做法，因为您混合了行为和内容。使用Turbolinks的内联javascript只是简单的愚蠢 - Turbolinks本质上将你的应用程序变成一个持久的单页应用程序你得到各种奇怪的时间问题，你的脚本可能无法运行直到turbolinks将新页面附加到DOM。到那时，page:change事件可能已经被解雇了。

这就是为什么它只在刷新页面时与Turbolinks加载页面时一起运行。

故障不是Turbolinks - 它是你自己的。穿上大男孩的裤子，将javascript移动到外部文件中。

添加;

创建小部件基本上有两种方法，例如需要外部数据的图形。这是一个通用草图，与您的问题和您使用的任何图形框架无关。

数据属性：

＆＃13;

function Graph(data, el){}

if ($("#graph").length) {
  
  var data = $('#bar>li').map(function(i,el){ 
    return $(el).data() }
  ).toArray();
  $("#test").text( JSON.stringify(data) );

  Graph(data, $("#graph"));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="bar">
  <li data-x="1" data-y="2">A</li>
  <li data-x="2" data-y="3">B</li>
  <li data-x="3" data-y="4">C</li>
</ul>

<pre id="test"></pre>

＆＃13;

的Ajax：

if ($("#graph").length) {
  var promise = $.getJSON('/foo.json');
  promise.then(function(data){
    return $.map(data, function(item){
      return {x: item.foo y: item.bar };
    });
  });

  promise.done(function(data){
    Graph($("#graph"), data);
  });
}

Rails 4.2 jQuery仅在刷新后加载

1 个答案:

添加;

数据属性：

的Ajax：