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

Connect button with entry field

I want to create a connection between an input element and a button, where the button triggers the input and the input remains hidden. Here is a solution that I came across: <a href="javascript:void(0)" id="files" href=""> <button id="uploadDe ...

javascriptjquerycsshtml

Executing several API endpoint requests using an array in Node.js

Having difficulty utilizing values from an array to make API calls to endpoints. The array contains necessary data to retrieve the information needed from the endpoint. However, when attempting to parse the JSON text received from the API call and extract ...

javascriptjsonnode.js

How can we achieve a seamless fade transition effect between images in Ionic 2?

My search for Ionic 2 animations led me to some options, but none of them quite fit what I was looking for. I have a specific animation in mind - a "fade" effect between images. For example, I have a set of 5 images and I want each image to fade into the ...

csstypescriptanimationionic2

Is there a way for me to monitor the ngSrc attribute of an image element and retrieve the updated width and height within my personalized directive?

Here is a snippet from index.html: <img ng-src="{{ImageURL}}" my-image/> This is from app.js: var app = angular.module('plunker', []); app.controller('MyCtl', function($scope) { $scope.ImageURL = ""; $scope.ImgWidth = 0; ...

javascriptangularjs

Is it possible for my node.js to become unresponsive when comparing lists?

In my node.js app, I have two lists - one retrieved from a database and the other created by listing file names on a server. Both lists contain approximately 750,000 strings each, and now I need to search for each string in one list within the other. As a ...

javascriptnode.jslistperformancecpu

The function $.post(...) is failing to detect the JSON content in the

I am attempting to send a POST request to the server using the following code: var body = { PatientAgeFilter: { CompareOperator: parseInt(self.patientAge()), MoreThanVal: { AgeSpecifier: 0, AgeValue: parseInt(se ...

javascriptjqueryasp.net-mvcjsonknockout.js

Tips for displaying an image using the image tag in jQuery

I am looking to dynamically append a share button image after every image tag that meets certain criteria. For the code snippet and demonstration, you can visit this fiddler link here. $(document).ready(function() { $("img").each(function() ...

javascriptjqueryhtmlcss

SharePoint 2013 on a mobile device does not support scrolling within iframes

Recently, I set up a SharePoint 2013 website with a few iframes. However, when I access the site on my mobile devices (iPad and Android), I am unable to scroll through the entire page by touching within the iframe. I attempted to solve this issue by inclu ...

androidioscsssharepointiframe

What is the best way to customize the style of a react.js component upon its creation?

Is there a way to set the style of a react.js component during its creation? Here is a snippet of my code (which I inherited and simplified for clarity) I want to be able to use my LogComponent to display different pages of a Log. However, in certain ins ...

javascriptcssreactjsmaterial-uireact-with-styles

Issue: .catch(error) function in Node / Express not returning as expectedDescription: After

I'm currently developing a REST API and focusing on effectively managing all error scenarios. Upon successful completion of the API call, I make sure to return the success object to the calling function and then send the response to the client. Howev ...

javascriptnode.jsrestexpress

Organize the Div elements in the form of a message

Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...

htmlcsstwitter-bootstrap

Why won't my AngularJS checkbox stay checked?

In my application, I have the following code: <input type="checkbox" ng-checked="vm.eduToEdit.test" /> {{vm.eduToEdit.test}} <input type="checkbox" ng-model="vm.eduToEdit.test"> The value of vm.eduToEdit.test is displaying t ...

javascriptangularjs

How to retrieve the chosen option from a drop-down menu in WebDriver using JavaScript without relying on the Select Class

Currently, I am in the process of utilizing Webdriver with Java. My goal is to retrieve the selected value from a combobox without relying on the Select class provided by Webdriver. The specific markup that I am dealing with is as follows: <select nam ...

javascriptwebdriverselenium-webdriverui-automation

Understanding the getJSON MethodExplaining how

$.getJSON( main_url + "tasks/", { "task":8, "last":lastMsgID } I'm a bit confused about how this code functions. I'm looking for a way to retrieve messages from a shoutbox using a URL or some sort of method that the function here ...

javascriptjqueryjsongetjson

Invoke a function within the React library through ReactDOM.render

Within my index.js file, I have the following code: const store = createStore( combineReducers({ i18n: i18nReducer }), applyMiddleware(thunk) ); syncTranslationWithStore(store) store.dispatch(loadTranslations(translationsObject)); stor ...

javascriptreactjs

table: column with percentage-based width AND a minimum width in pixels

Here is an example I'm working with: https://stackblitz.com/edit/js-ivvupc?file=index.html I need my table to be responsive, meaning it should become scrollable when the window size is reduced. The basic setup for this is already in place within the ...

htmlcsshtml-tableresponsive

Issue arises when Protractor is unable to compare a variable with a web element due to unresolved promises

My strategy for this examination was to extract the inner text of an element, modify it, and then verify that the change had taken place by comparing the element with the variable. var fixedValue = element(by.xpath('/html/body/section/div/section/sec ...

javascriptangularjsselenium-webdriverjasmineprotractor

What is the most effective method for discerning the availability of fresh data?

Many highload websites are able to notify their users of new messages or topics in real-time without the need for page refreshing. How do they achieve this and what approaches are commonly used? There appear to be two main methods: Continuously querying ...

javascriptajaxperformancewebwebsocket

Emails can be sent through a form without the need for refreshing

I am currently working on a webpage that utilizes parallax scrolling, and the contact box is located in the last section. However, I encountered an issue where using a simple HTML + PHP contact box would cause the page to refresh back to the first section ...

javascriptphpjqueryhtml

Tips for creating a drawing grid with a table

I am currently working on a project where I need to create a canvas-like table with around 10,000 cells. The goal is to allow users to draw on this canvas by moving their mouse over it while holding down specific keys (e.g. ctrl for blue, shift for red). ...

javascripthtmlcsscanvashtml-table