In my app I use the below code to give expand/collapse capabilities.
In one of my .js files:
$(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');
});
});
In the view, surrounding whatever I want to expand:
<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>
Worked like a charm until I started using the morris.js library to introduce some charts to my app, at which point the expand/collapse (henceforce EC) functionality stopped working on every page OTHER than the one on which my charts show. When I say EC doesn’t work, I mean that when I click the expand link, it just follows it to ‘#’.
My morris.js code, in the animal.js.coffee file of the model to which the charts belong:
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' ]
An example of how I actually call the chart in the view:
<%= content_tag :div, "", id: "sales_chart",
data: {sold: @animal.rev.round(2),
left: @animal.rev_left.round(2)},
class: "morris_chart" %>
The charts display perfectly, as does the EC on the page with the charts. On seemingly every other page, not. And when I delete the animal.js.coffee file with the morris code (temporarily), the problem goes away. I’ve triple checked my view code, and it’s all good (or at least identical to the code that is working).
Possibly of additional interest is that back when this worked there used to be an empty animal.js file, and I replaced it with a animal.js.coffee file with the morris-relevant code. The actual morris.js and raphael.js code is in vendors/javascripts. The EC javascript code is in the .js file of another model entirely, but that hasn’t been a problem up to this point.
Any ideas? I’ll be away from my computer for a few hours, but when I’m back I’ll post any additional code anybody wants.
EDIT — Figured my application.js file might also be relevant:
// 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 .
The problem appears to have been that the Coffeescript was looking for the elements (“sales_chart”, etc) on pages where it did not appear. When that happened, things went wrong, and none of my other Javascript worked. To fix this, all I had to do was check for the element before calling Morris on it. So:
Problem solved. Thanks for the help, and the excuse to learn Coffeescript!