Unable to retrieve CSS through JS in Rails application

My Rails app utilizes WYSIHTML in certain sections, and the implementation looks like this:

// richtext
if($('.richtext').length) {
  var editor = new wysihtml5.Editor(document.querySelector('.richtext'), {
    toolbar: 'wysihtml5-toolbar',
    parserRules:  wysihtml5ParserRules,
    stylesheets: '/assets/wysihtml5-stylesheet.css'
  });
}

While everything works fine locally, the issue arises when trying to access wysihtml5-stylesheet.css remotely. I have made attempts to adjust asset pipeline settings and precompilation without success. Any suggestions? This problem seems to have surfaced recently, as it was functioning properly before. No settings other than those mentioned previously have been altered.

Your assistance would be greatly appreciated.

Update

Despite using asset_path, the file remains inaccessible:

stylesheets: '<%= asset_path "wysihtml5-stylesheet.css" %>'
jquerycssruby-on-railsruby-on-rails-4asset-pipeline

Answer №1

The issue likely lies within the way you are referencing your CSS file.

--

During deployment, Sprockets automatically adds fingerprints to asset files by appending large MD5 hashes to their names. This makes it incorrect to refer to them using their original "static" names (as it won't work).

To solve this problem, you should utilize one of the asset_path helpers to call the file (it will handle referencing the file in either its original or fingerprinted form).

You may have already implemented this, BUT I believe that you may need to include .erb in your JS file to ensure its functionality:

#app/assets/javascripts/application.js.erb
if($('.richtext').length) {
  var editor = new wysihtml5.Editor(document.querySelector('.richtext'), {
    toolbar: 'wysihtml5-toolbar',
    parserRules:  wysihtml5ParserRules,
    stylesheets: "<%=j asset_path('wysihtml5-stylesheet.css') %>"
  });
}

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

The link in the HTML code has been prevented from opening in a new

echo "<tr><th align='left'><a href=\"$email\">$name</a></th> I recently transformed a PHP Email App into a saving app. However, I am encountering an issue with opening links within the application. You ca ...

phphtmlcsssqlphpmyadmin

JSPM fails to load dependencies correctly

I have made a fork of the official Bootstrap repository (4.0.0-alpha.6) in order to switch from Grunt to Gulp, and to customize Bootstrap for our specific requirements. The project we are working on utilizes JSPM for package management. However, when atte ...

jquerynpmjspmtether

Is your Flexbox element exceeding the height of its parent container?

Due to design constraints, I implemented flexbox for this scenario and required the btn p elements to behave like display block. This was achieved through a post on another stack exchange thread. However, after setting the "other divs" class to 100%, it ex ...

htmlcssflexbox

Alter the font color once the page has finished loading

Is there a way to change the color of the "View Results" text below? <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script> <noscript><a href="http://polldaddy.com/poll/6352993/"> ...

javascriptjquerycss

Display the menu and submenus by making a request with $.get()

My menu with submenu is generated in JSON format, but I am facing issues displaying it on an HTML page using the provided code. Can someone please assist me in identifying what mistakes I might be making? let HandleClass = function() { ...

javascriptjqueryhtmljsonajax

Testing for ajax failure using Q-Unit in a unit test

While utilizing jQuery's $.when method to manage ajax callbacks, I am also implementing mockjax for simulating various responses in my unit tests. One of these responses results in a status error of 500. Unfortunately, when catching this error using Q ...

jqueryajaxunit-testingqunit

Issue with JQuery's click and submit events not triggering, but change event is working fine

My webpage has a dynamic DOM that includes add and save buttons to interact with elements. Each row also has a remove option for deletion. When a user logs in, the controller redirects them to their homepage in the codeigniter PHP framework. This controlle ...

javascriptphpjqueryhtmlcodeigniter

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

Currently, when I utilize .appendTo(".wrapper") as shown in the code below, it eliminates the animation effect. My goal is to have the div on the far left slide out of view, triggering an overflow hidden effect, and then be placed at the end of the slide c ...

javascriptjqueryhtmlcss

Tips for expanding Bootstrap 5 text area within tabbed interfaces

I am struggling to properly position a text area within a tab and have it stretch both horizontally and vertically within the card body. Despite trying to use d-flex and align-self-stretch, the tab content div does not seem to respond as expected. My att ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Tips for automatically selecting the day when choosing a date

I had created two fields named HolidayDate and HolidayDay with specific attributes as shown below: [Required] [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] [DisplayName(Constants.DisplayN ...

c#jqueryasp.net-mvcasp.net-mvc-4datepicker

Employing JavaScript to set a variable that changes dynamically

In my code, I have a functionality that allows for changing different dropdowns with similar ending IDs. In other parts of the code, I have assigned variables rl and rl_extra as well as rs and rs_extra. Now, when the var prefix is determined to be either ...

javascriptjquery

Guide on using Ajax and spring MVC to dynamically fill a modal form

One JSP page displays database results in a table on the browser, allowing users to edit or delete each row. I want to implement a feature where clicking the edit link fetches specific customer data from the database using Spring MVC and Hibernate, display ...

javascriptjqueryajaxspringhibernate

Creating HTML that adjusts to the size of the viewport

After completing my first webpage, I implemented a parallax/split scroll effect using ScrollMagic.js. However, when testing the page in mobile view using Chrome's developer tools, I noticed that the parallax effect was not working properly due to mis ...

javascriptjqueryhtmlcssresponsive-design

Adjusting solely the depicted data sets in the Highcharts.js library

I have a spline chart with 10 different curves on it - When the page is first loaded, none of the charts are visible as I have set "visible" to false. Users will then click on the curve(s) they want to see. I am looking for a way to dynamically change the ...

javascriptjquerypythonhighcharts

Tips for activating the next tab using the <a> or <button> element in Materialize:

<div class="col s12"> <ul class="tabs"> <li class="tab col s4"><a href="#test1" class="active">tab1</a></li> <li class="tab col s4"><a href="#test2">tab2</a></li> <li class="tab c ...

javascripthtmlcssmaterialize

Whenever I make an AJAX call to update the queryset in my child template, the javascript suddenly ceases to function properly

I am using a comments.html child template with the following structure: <div class="commentsContainer"> {% for comment in comment_list %} ... {{ comment.text }} ... {% endfor %} </div> Whenever I click on a bu ...

jquerypythonajaxdjangodjango-templates

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for updating the color of buttons after they have been selected, along with a question regarding input

I need help with a code that changes the color of selected buttons on each line. Each line should have only one selected button, and I also want to add an input button using AngularJS ng-click. I am using AngularJS for summarizing the buttons at the end ...

javascripthtmlcssbuttonangularjs-ng-click

The subscribe text seems to be displaying outside of the button. Do you have any suggestions on why this is happening and what steps I

I'm having trouble getting the word "Subscribe" to appear correctly inside the button. No matter what I try, it ends up stuck on the right of the button, completely outside of it. I even tried isolating it in a standalone HTML file and the issue persi ...

htmlcss

Tips for extracting data from a JSON file

I'm attempting to retrieve a list of music genres from my json file using PHP and JQuery ajax. Here is the format of my json file [ "12-bar blues", "2 tone", "2-step garage", "4-beat", "50s progression", "a cappella", "accordion", " ...

javascriptphpjqueryjsonajax