Rails : CSS/JavaScript functioning perfectly on local server, facing issues on Heroku deployment

My Rails website features various CSS animation effects and JavaScript elements. While these transitions function smoothly on my local environment, they do not work properly on Heroku.

Examining the Heroku logs:

2013-09-17T17:13:36.081145+00:00 app[web.1]:   Rendered layouts/_shim.html.erb (0.0ms)
2013-09-17T17:13:36.090362+00:00 app[web.1]:   Rendered layouts/_header.html.erb (0.0ms)
... (Heroku log continues)

The JavaScript and CSS files are located in the assets/javascripts and stylesheets directories. These assets are compiled at runtime. Despite being loaded onto Heroku as observed through Firebug's inspection of the head section, the animations still fail to function correctly on the live site compared to the expected behavior demonstrated by this example.

How come the site works flawlessly locally but encounters issues on the Heroku platform?

javascriptcssruby-on-railsheroku

Answer №1

In the production environment on Heroku, all of your JavaScript files are merged into one file called application.js. However, in development, they remain as separate files. The issue you're facing is related to the order in which these files are loaded. To resolve this problem, follow these two steps:

#1 Remove the duplicate jquery *.js file from your assets/javascripts directory since you are already using jquery-rails. #2 Ensure that modernizer loads before the box layout JavaScript file by renaming it accordingly (since files are loaded alphabetically). It should appear before any file starting with the letter 'b'.

I personally use the prefix al-<number>-original-filename because it helps me remember the loading order more easily. Feel free to use a different naming convention if it works better for you. In my case, the files would be renamed as follows:

al-01-modernizr.custom.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incomplete JSON stringification

Could someone provide insight into the reason behind this behavior? let data = JSON let date = '10-7' data['id'] = [] data['id'][date] = [[1,2,3]] data['id'][date].push([1,1,1]) console.log(data) // Outputs: { i ...

javascriptjsonstringify

Adjusting the font color when hovering over multiline text

I am currently in the process of coding a website for my job, and I am working on changing the text color when it is hovered over. However, there seems to be a break in my code causing the text not to highlight all at once. Any guidance or suggestions on h ...

javascripthtmlcsshover

ng-repeat to display items based on dropdown choice or user's search input

Utilizing $http to retrieve JSON data for display in a table. I have successfully implemented a search functionality where users can search the JSON data from an input field. Additionally, I now want to include a feature that allows users to filter the JSO ...

javascriptjqueryjsonangularjs

Using Node to upload various large JSON files into mongoDB

Currently, I am dealing with the task of parsing numerous large JSON files into my mongoDB database. To accomplish this, I have been utilizing the stream-json npm package. The process involves loading one file at a time, then manually changing the filename ...

javascriptjsonnode.jsparsingmongoose

Can a Vue computed property return a promise value?

I have a specific computed property in my code that triggers an API request and retrieves the required data: async ingredients() { const url = "/api/ingredients"; const request = new Request(url, { method: "GET", credentials: "same-or ...

javascriptlaravelvue.jsvuejs2computed-properties

Fade out a component in Material UI/React by setting a timeout in the parent's useEffect hook for when it unmounts

Incorporating a fade out transition into my child component, <Welcome />, using Material UI's Fade component is my current goal. This transition should be triggered by two specific conditions: The timeout set in the useEffect function expires. ...

javascriptcssreactjsmaterial-ui

VUE- the GetElementByClassName function is malfunctioning

I attempted to utilize 'getelementbyclassname' within VUE methods. My reason for doing so is that instead of applying information using :style, I would like to adjust the width of the div where I applied my class named 'classon'. I ...

javascriptvue.jsdata-visualization

Why is it that PHP is used to retrieve the database value, JavaScript increments it, and AJAX saves it back to the database, yet it resets to 0.0 upon page refresh?

I am in the process of creating a page for setting temperature targets. The form allows users to adjust the target temperature by increments of 0.5 using JavaScript buttons. Once the user is satisfied with the new target, they can click 'set' whi ...

javascriptphpjqueryajaxforms

Discover the outcome of clicking on an object (mock tests)

I am just starting out with React and I'm unsure about when to use mocking. For instance, within the 'ListItem' component, there is a 'click me' button that reveals a dropdown for 'cameras'. Should I focus on testing what ...

javascriptreactjstypescriptjestjsts-jest

Comma styling in JavaScript

What is the reasoning behind developers choosing to format commas in code this particular way? var npm = module.exports = new EventEmitter , config = require("./lib/config") , set = require("./lib/utils/set"); As opposed to this formatting style? va ...

javascript

Is there a way to make text fade in and out smoothly instead of abruptly disappearing and reappearing after an animation ends?

I'm seeking a unique animation effect for my right-to-left scrolling text. Instead of the text teleporting back to its origin at the end of the animation, I would like it to smoothly disappear and reappear from the margins. .custom-animation { he ...

htmlcsscss-animations

Variables in an Angular application are not appearing in the HTML rendering

Currently learning AngularJS as I develop a web application. After going through tutorials, I started with a basic list but am baffled as to why my browser only shows {{title}}. In my app.js module, here's the snippet where I defined the controller: ...

javascripthtmldata-bindingangularjs

Issue with CSS3 gradient display in Firefox and IE, functioning correctly only in Chrome

I recently developed a text gradient class that looks great in Google Chrome but unfortunately doesn't display correctly in Firefox and Internet Explorer. In these browsers, there is a visible background gradient behind the text which is not the desir ...

cssgradient

Creating a hash from a string in Javascript

I'm struggling with the process of converting a string into a nested hash in JavaScript. Here is the string I want to convert: "{'btc_usd': {'price': 376.2, 'volume': 42812.69, 'change': -0.5},'btc_cn ...

javascriptjsonhash

Setting the height of a parent element in AngularJS when using ng-repeat

I'm dealing with a ng-repeat that has varying heights. When I set a fixed height, everything looks fine. However, I need the parent panel's height to adjust automatically based on the ng-repeat child elements to avoid overflow issues. Is there a ...

htmlcssangularjs

What is the best way to divide the height of one div evenly among three other divs?

I have three child divs inside a parent div and I'm looking to distribute the height of the parent div evenly among the three children. Here is the HTML code: <div class="frameright"> <div class="divright"> <t ...

htmlcss

Having trouble transmitting data with axios between React frontend and Node.js backend

My current challenge involves using axios to communicate with the back-end. The code structure seems to be causing an issue because when I attempt to access req.body in the back-end, it returns undefined. Here is a snippet of my front-end code: const respo ...

javascriptnode.jsreactjsasync-awaitaxios

Troubleshooting the integration of Text Mask Library with Vue - issue: no export named 'default' available

I was able to implement the vanilla JavaScript version: var maskedInputController = vanillaTextMask.maskInput({ inputElement: document.querySelector('.myInput'), mask: [/\d/, /\d/, '/', /\d/, /\d/, '/ ...

javascriptvue.jstext-mask

What is the best way to eliminate a specific character from the key of an array of objects using JavaScript?

My JavaScript object looks like this: result = [ {"Account_ID__r.Name":"Yahoo Inc Taiwan","Contact_ID__r.Email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42283427302c2d2e2602362a27313 ...

javascriptarraysjsonjavascript-objects

Ways to implement debounce in handling onChange events for input fields in React

I've been attempting to implement debounce functionality in my React app without relying on external libraries like lodash or third-party node modules. I've tried various solutions found online, but none have worked for me. Essentially, in the h ...

javascriptreactjstypescriptredux