0

私のアプリでは、以下のコードを使用して展開/折りたたみ機能を提供しています。

私の.jsファイルの1つ：

$(document).ready(function(){

    $('.row .bundle').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        var $collapse = $this.closest('.collapse-group').find('.collapse');
        $collapse.collapse('toggle');
    });

});

ビューでは、拡張したいものをすべて囲んでいます。

<div class="row" style="text-align:center">
 <div class="collapse-group">
    <h4 class="normal_links">
        <a class="bundle" href='#'>(Expand)</a>
    </h4><br>
  <div class="collapse normal_links" >
    # Code to expand/collapse here
  </div>
 </div>
</div>

morris.jsライブラリを使用していくつかのグラフをアプリに導入し始めるまでは、魅力のように機能しました。その時点で、展開/折りたたみ（したがって、EC）機能は、グラフが表示されているページ以外のすべてのページで機能しなくなりました。ECが機能しないと言うときは、展開リンクをクリックすると、「＃」の後に続くことを意味します。

チャートが属するモデルのanimal.js.coffeeファイルにある私のmorris.jsコード：

jQuery ->
Morris.Donut
  element: 'weight_chart'
  data: [
    {label: "Pounds Sold", value: $('#weight_chart').data('sold')}
    {label: "Pounds Left", value: $('#weight_chart').data('left')}
  ]
  colors: ['#0066CC', "#880000"]

Morris.Donut
  element: 'sales_chart'
  data: [
    {label: "Revenue Made", value: $('#sales_chart').data('sold')}
    {label: "Est. Revenue Left", value: $('#sales_chart').data('left')}
  ]
  colors: ["#336633", "#880000"]

Morris.Donut
    element: 'status_chart'
    data: [
        {label: "Incomplete", value: $('#status_chart').data('zero')}
        {label: "Downpaid", value: $('#status_chart').data('one')}
        {label: "Fully Paid", value: $('#status_chart').data('two')}
        {label: "Received", value: $('#status_chart').data('three')}
    ]
    colors: ["#880000", '#E09050', '#989898', '#000000' ]

ビューで実際にチャートを呼び出す方法の例：

 <%= content_tag :div, "", id: "sales_chart", 
       data: {sold: @animal.rev.round(2), 
              left: @animal.rev_left.round(2)}, 
       class: "morris_chart" %>

チャートのあるページのECと同様に、チャートは完全に表示されます。一見他のすべてのページではなく。そして、morrisコードを含むanimal.js.coffeeファイルを（一時的に）削除すると、問題は解決します。ビューコードをトリプルチェックしましたが、すべて良好です（または少なくとも機能しているコードと同じです）。

おそらくさらに興味深いのは、これが機能したとき、以前は空のanimal.jsファイルがあり、それをmorris関連のコードを持つanimal.js.coffeeファイルに置き換えたことです。実際のmorris.jsおよびraphael.jsコードは、vendors/javascriptsにあります。EC javascriptコードは別のモデルの.jsファイルに完全に含まれていますが、これまでは問題になりませんでした。

何か案は？私は数時間コンピューターから離れますが、戻ってきたら、誰かが望む追加のコードを投稿します。

編集-私のapplication.jsファイルも関連している可能性があると考えました：

// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require raphael
//= require morris
//= require_tree .
4

2 に答える 2

1

animal.js.coffeeをこれに変更してみてください。これには、jQueryに渡す関数内にMorris呼び出しを配置するための正しいインデントがあります。

jQuery ->
  Morris.Donut
    element: 'weight_chart'
    data: [
      {label: "Pounds Sold", value: $('#weight_chart').data('sold')}
      {label: "Pounds Left", value: $('#weight_chart').data('left')}
    ]
    colors: ['#0066CC', "#880000"]

  Morris.Donut
    element: 'sales_chart'
    data: [
      {label: "Revenue Made", value: $('#sales_chart').data('sold')}
      {label: "Est. Revenue Left", value: $('#sales_chart').data('left')}
    ]
    colors: ["#336633", "#880000"]

  Morris.Donut
    element: 'status_chart'
    data: [
        {label: "Incomplete", value: $('#status_chart').data('zero')}
        {label: "Downpaid", value: $('#status_chart').data('one')}
        {label: "Fully Paid", value: $('#status_chart').data('two')}
        {label: "Received", value: $('#status_chart').data('three')}
    ]
    colors: ["#880000", '#E09050', '#989898', '#000000' ]
于 2012-12-02T23:50:51.820 に答える
1

問題は、Coffeescriptが表示されていないページの要素（ "sales_chart"など）を探していたことであるようです。それが起こったとき、物事はうまくいかず、私の他のJavascriptはどれも機能しませんでした。これを修正するために私がしなければならなかったのは、モリスを呼び出す前に要素をチェックすることだけでした。それで：

jQuery ->

    if $('#weight_chart').length
      Morris.Donut
        element: 'weight_chart'
        data: [
          {label: "Pounds Sold", value: $('#weight_chart').data('sold')}
          {label: "Pounds Left", value: $('#weight_chart').data('left')}
        ]
        colors: ['#0066CC', "#880000"]

    if $('#sales_chart').length
      Morris.Donut
        element: 'sales_chart'
        data: [
          {label: "Revenue Made", value: $('#sales_chart').data('sold')}
          {label: "Est. Revenue Left", value: $('#sales_chart').data('left')}
        ]
        colors: ["#336633", "#880000"]

    if $('#status_chart').length
      Morris.Donut
        element: 'status_chart'
        data: [
          {label: "Incomplete", value: $('#status_chart').data('zero')}
          {label: "Downpaid", value: $('#status_chart').data('one')}
          {label: "Fully Paid", value: $('#status_chart').data('two')}
          {label: "Received", value: $('#status_chart').data('three')}
        ]
        colors: ["#880000", '#E09050', '#989898', '#000000']

問題が解決しました。助けてくれてありがとう、そしてCoffeescriptを学ぶ言い訳！

于 2012-12-11T23:00:51.583 に答える