A: Create a Sass file for your component as usual. At the top of your file, import the CSS from the component's distributed files. Underneath that, write your own rules which can override the distributed rules.
- Make sure not to write a tilde (
~
) at the start of the import string - otherwise, WebPack will that you are trying to do a non-relative import. - Why? If you import the 3rd-party distributed CSS in your JavaScript files which get packed into one of your JavaScript packs, your custom CSS will be overridden by this later import. That's why you should import it at the top of your Sass file instead.
@import "jquery-bar-rating/dist/themes/bars-pill.css";
.br-theme-bars-pill .br-widget {
white-space: nowrap;
display: flex;
justify-content: center;
a {
flex-grow: 1;
}
}
A: Make sure that app/assets/javascdripts/application.js
contains this line:
//= require rails-ujs
- Rails UJS is what picks up on the
remote: true
forms or links, and adds the header to accept a response in JavaScript, instead of the regular HTML. If Rails UJS is missing, this functionality will not be implemented.
A: Run ruby bin/webpack
to have Webpack rebuild its JavaScript pack for your application. See here for more information on developing with Webpack in Rails.
Q: In JavaScript, calling submit()
on an 'Ajax' form submits it as a regular HTTP request, instead of an Ajax call
A: Calling submit()
bypasses Rails UJS, which otherwise intercepts form submits and turns them into Ajax requests. Instead of calling submit()
, do one of the following:
// Option 1:
form = document.querySelector('form');
form.dispatchEvent(new Event('submit', {bubbles: true})); // you can specify more options in `Event()` for reliability across different browsers.
// Option 2:
// Use rails-ujs to submit the form
form = document.querySelector('form');
Rails.fire(form, 'submit');
- See more information here.
Q: I have more than one MapBox map on my page. When I display a map that was previously hidden, it renders as a small square. How do I fix this?
A: Once the map has been displayed (eg. when an event is triggered), be sure to call
map.resize()
You will need a reference to the Mapbox map object, so that you can call .resize()
on it.
A: See this article
Q: I added new elements to the DOM after the page loaded. How can I get my existing event listeners to trigger for events on these new elements?
A: See this article on event listening for DOM nodes added after the page has loaded, eg. jQuery dropdown plugins
Q: I want to display a calendar with events, perhaps spanning multiple days. What do you recommend I use?
A: I recommend using FullCalendar. There are instructions for using it with Webpack. Remember to import each CSS file that you need, too! Otherwise it may not render properly on production.
A: The like_system
gem provides an easy solution. Seems to be updated pretty regularly, also.