I'm trying to implement jQuery Datepicker into my Rails 5.1.3 app, but I get this error message:
ActionView::Template::Error at /users/2/absences/new File to import
not found or unreadable: jquery-ui/widgets/datepicker. Load paths:
/Users/acandael/Sites/absence_registrator/app/assets/config
/Users/acandael/Sites/absence_registrator/app/assets/images
/Users/acandael/Sites/absence_registrator/app/assets/javascripts
/Users/acandael/Sites/absence_registrator/app/assets/stylesheets
I have added the jquery-ui-rails gem to the Gemfile
Then I configured the app/assets/javascripts/application.js file:
//= require jquery-ui/widgets/datepicker
and I also configured the app/assets/stylesheets/application.scss file:
#import "jquery-ui/widgets/datepicker";
finaly I configured the Datepicker in the view template:
<%= f.text_field :date, class: "form-control", id: "datepicker" %>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Update
I made some progress by changing
//= require jquery-ui/widgets/datepicker
to
//= require jquery-ui/datepicker
in app/assets/javascripts/application.js
In app/assets/stylesheets/application.scss
I changed
#import "jquery-ui/widgets/datepicker";
to
/*
*= require jquery-ui/datepicker
*/
but the Datepicker that appears is not styled.
So my question now is how implement css styling for the Datepicker
Update
I fixed the styling issue by importing:
#import 'jquery-ui/datepicker.css';
into app/assets/stylesheets/application.scss
Thanks for your help,
Anthony
I tried your approach and several others. They all error'd out or didn't show the JS control where they should.
Ultimately I used this gem instead, and followed their pretty simple instructions and success! Rail 5.0.6.
https://github.com/TrevorS/bootstrap3-datetimepicker-rails
Related
So I have been using rails for quite a while. But with Rails 6 I have been really struggling to get moving. I have some custom gems I use for assets and things and I cannot figure out how to load the js files.
What I am used to
application.js
//= require activestorage
//= require jquery-3.3.1.min
//= require popper.min
//= require bootstrap
//= require mdb
//= require wysiwyg
//= require addons/pickr.min
//= require modules/buttons
//= require modules/cards
//= require modules/waves
//= require activestorage
//= require turbolinks
//= require_tree .
But this does not load in Rails 6 with Webpacker. I was unable to find a basic solution online for this that did not involve adding multiple js files and lines of code to the app to patch a solution together. What I did try was
app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require ("jquery-3.3.1.min").start()
require ("popper.min").start()
require ("bootstrap").start()
require ("mdb").start()
require ("wysiwyg").start()
require ("addons/pickr.min").start()
require ("modules/buttons").start()
require ("modules/cards").start()
require ("modules/waves").start()
require("#rails/activestorage").start()
require("channels")
The assets are in the correct place inside the gem (so the first version in a rails 5 app does load everything as expected). I can add some of these with yarn, but I want to use the actual files from the gem, not just get bootstrap working, is there a straightforward solution to this? I also tried adjusting the path in the require but that did not work either.
Thanks for any help!
You need to import js files via gem. Maybe this can help you:
import jQuery from 'jquery'
<%= File.read(File.join(Gem.loaded_specs['bla_bla_gem'].full_gem_path, 'lib', 'assets', 'javascripts', 'bla_bla.js')) %>
Related issue comment
So to answer in rails 6 you will notice the use of the javascript folder app/javascript this means that anything you do with JS should be done from there. The reliance on gems for these is now minimal and replaced by yarn.
I will give you an example of my process for using js libraries. for the example i will call bootstrap using yarn. I have included the custom files to help you call each library.
this is a process I like to use which I have modified from something i read on medium a while back
# app/javascript/packs/application.js
import '../stylesheets/application'
# app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
in the console run
yarn add bootstrap#4.3.1 jquery popper.js
then
# config/webpack/environment.js
...
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
...
then
# app/javascript/packs/bootstrap_custom.js
import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/carousel'
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/index'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/popover'
import 'bootstrap/js/dist/scrollspy'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/toast'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/js/dist/util'
And link it in your app/javascript/packs/application.js file.
# app/javascript/packs/application.js
import './bootstrap_custom.js'
then
# app/javascript/stylesheets/application.scss
#import './bootstrap_custom.scss'
then
# app/javascript/stylesheets/bootstrap_custom.scss
#import '~bootstrap/scss/_functions.scss';
#import '~bootstrap/scss/_variables.scss';
#import '~bootstrap/scss/_mixins.scss';
#import '~bootstrap/scss/_root.scss';
#import '~bootstrap/scss/_reboot.scss';
#import '~bootstrap/scss/_type.scss';
#import '~bootstrap/scss/_alert.scss';
#import '~bootstrap/scss/_badge';
#import '~bootstrap/scss/_breadcrumb';
#import '~bootstrap/scss/_button-group';
#import '~bootstrap/scss/_buttons';
#import '~bootstrap/scss/_buttons.scss';
#import '~bootstrap/scss/_card.scss';
#import '~bootstrap/scss/_carousel.scss';
#import '~bootstrap/scss/_close.scss';
#import '~bootstrap/scss/_code.scss';
#import '~bootstrap/scss/_custom-forms.scss';
#import '~bootstrap/scss/_dropdown.scss';
#import '~bootstrap/scss/_forms.scss';
#import '~bootstrap/scss/_grid.scss';
#import '~bootstrap/scss/_images.scss';
#import '~bootstrap/scss/_input-group.scss';
#import '~bootstrap/scss/_jumbotron.scss';
#import '~bootstrap/scss/_list-group.scss';
#import '~bootstrap/scss/_media.scss';
#import '~bootstrap/scss/_modal.scss';
#import '~bootstrap/scss/_nav.scss';
#import '~bootstrap/scss/_navbar.scss';
#import '~bootstrap/scss/_pagination.scss';
#import '~bootstrap/scss/_popover.scss';
#import '~bootstrap/scss/_print.scss';
#import '~bootstrap/scss/_progress.scss';
#import '~bootstrap/scss/_spinners.scss';
#import '~bootstrap/scss/_tables.scss';
#import '~bootstrap/scss/_toasts.scss';
#import '~bootstrap/scss/_tooltip.scss';
#import '~bootstrap/scss/_transitions.scss';
#import '~bootstrap/scss/_utilities.scss';
If you choose to follow this follow it precisely, do not change the scss lines etc it will mess it up
You'll need to get them directly from the gem files.
Change your application.js to application.js.erb and follow demir solution. You can also use the next to import more than one file.
<% ['file_1', 'file_2'].each do |file| %>
import "<%= File.join(Gem.loaded_specs['my_gem'].full_gem_path, 'app', 'assets', 'javascripts', file) %>";
<% end %>
I think the location of file may be creating an issue for your case:
File should be in app/assets/javascripts/application.js while the your file is in
app/javascript/packs/application.js
Hope this will help you.
I am using Rails 5 with react-rails gem. I want to use server-side rendering, but I see this error:
React::ServerRendering::PrerenderError in Home#index
Encountered error "# ExecJS::ProgramError: TypeError: Cannot read property 'serverRender' of undefined" when prerendering Main with {}
This is my /assets/javascripts/application.js:
//= require rails-ujs
//= require jquery
//= require react
//= require react_ujs
//= require_tree .
This is javascripts/components.jsx:
class Main extends React.Component{
render(){
return (
<h1>Hello</h1>
);
}
}
and this is the view:
<%= react_component('Main', {}, {prerender: true}) %>
Without prerender option, everything works.
I've had a similar issue and here's how I solved it
run command rails generate react:install
This will create the components folder and some required files under your javascripts/ dir.
Now, place your components.jsx in /assets/javascripts/componets directory
refresh the page.
I'm running rails 4.2.10 and haven't tested rails 5 but I'm guessing this should do the trick.
Let me know how you get on
I'm working with Rails 4 and AngularJS. I've got my app working. Controllers, directives, services, etc. However, my main app.js file refuses to fire the config and run functions. I've got some console.logs in there to test how far it gets. Here's the code:
angular-app/app.js
'use strict';
console.log('we see the app.js file'); // This works
var app = angular.module('bruno', [])
console.log(app) //This works
// This is where is stops working
app.config(function ($httpProvider) {
alert('config'); // Can't see this
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
})
app.run(function () {
console.log('App is running'); // Can't see this
});
Like I said, my other controllers are working just fine. The console doesn't show any errors and everything loads just as it should.
Rails application.js file:
//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers
I've re-written this every which way I can think of, but to no avail. I'm kinda stumped. I've done it with and without the var app. Hoping this wonderful community can at least help me see something I can't.
Additional Info
I'm using gem 'angular-rails-templates'
Rails 4.2.3
AngularJS 1.3.16
If you need anything else from me just ask. Who knows, maybe by tomorrow morning I'll see things differently. :-)
As it turns out, I was mistakenly re-using the same module name inside another controller. Which was overwriting the module name in app.js. All fixed now.
I'm building a Rails application and I decided to use bootstrap and sass.
I follow the guide on the github page:
https://github.com/twbs/bootstrap-sass
So, now i have my gem installed ('bootstrap-sass', 'sass-rails'), my application.css (now application.sass) looks like this:
1 #import "bootstrap-sprockets";
2 #import "bootstrap";
My application.js file looks like this:
1 // This is a manifest file that'll be compiled into application.js, which will include all the files
2 // listed below.
3 //
4 // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5 // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6 //
7 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8 // compiled file.
9 //
10 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
11 // about supported directives.
12 //
13 //= require jquery
14 //= require jquery_ujs
15 //= require turbolinks
16 //= require bootstrap-sprockets
17 //= require_tree .
And then the guide pretty much ends.
The problem is that I don't have bootstrap in my application(I can't see it anywhere in the page by viewing the source) and I do not know how to use sass.
What should I do next? Did I miss something?
It sounds like it should all be ready to go but you will have to start writing some code that it can apply. Perhaps test it with this. In your application.html.erb file under body put the following:
<div id="container">
<div class="main">
<h1>Main Content</h1>
</div>
then in the css file try this
#container {
.main {
width:600px;
h1 {
color: $red;
}
}
Make sure you have restarted your server after the bundle install.
The list of bootstrap variables can be found here http://getbootstrap.com/customize/#less-variables
I found the error: I wrote all the import tag between the html
<title>
tag instead of the
<head>
tag.
I have basic onclick functions* in my ruby on rails app, when i look at application.js, they're all available but in the frontend, when i actually click on the element, the function does not trigger, although when i try the HTML version equivalent, its working well.
The app has the jquery-rails Gem installed and just to double confirm, I also tried inserting the jquery.js file in the vendor folder, but neither of these solved it unfortunately
*example
$('#openSidebarButton').on('click', function() {
$('#openSidebarButton').addClass('hidden');
$('#sidebar').removeClass('hidden');
});
Please make sure you have the following in your application.js:
//= require jquery
//= require jquery_ujs
i found the solution..a bit silly of me but essentially, i did not include the function within document.ready, that's why it wasn't working :-)
to summarize, what i did was made the above mentioned on click within a function
$(document).ready(function() {
openSideBar();
});
function openSideBar {
$('#openSidebarButton').on('click', function() {
$('#openSidebarButton').addClass('hidden');
$('#sidebar').removeClass('hidden');
});
}