So im trying to install gem foundation-rails and it keeps giving me an error:
console error:
Browser error
Solution worked:
removing //= require foundation from appliaton.js fixed the problem but i dont think this is the right solution. any suggestions that worked for you guys? thank you.
Application.css
*= require_tree .
*= require_self
*= require foundation_and_overrides
Application.js
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
I think you have to include the gem 'execjs' and gem 'therubyracer' in your gem file . Add gem 'execjs' and gem 'therubyracer' to the gemfile and bundle install.
Related
In my production environment, I noticed Turbolinks was not caching assets between pages. When I come on the first page of my application, my javascript bundle gets loaded, so as my CSS. When I then get to another page with a link, I can see in the chrome devtools, network tab, that they are reloaded (HTTP code 200).
application.html.erb
<html>
<head>
<title>My title</title>
<meta name="description" content="My description">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
</head>
<body class="<%= body_user_class %> <%= controller.controller_name %>">
// Stuff
</body>
</html>
application.js
//= require turbolinks
//= require jquery
//= require jquery.slick
//= require jquery-ui/sortable
//= require rails-ujs
//= require_tree ./components
The fingerprint of the assets remains the same between the first and the second page, so I don't think the issue comes from there.
I can understand why my bootstrap asset is reloaded, as it is referenced as a classical resource without using rails. But why are my application's js and css reloaded?
In your application JavaScript bundle, you have the following:
document.addEventListener("turbolinks:before-visit", function(e) {
e.preventDefault(),
window.location = e.data.url
})
This cancels the default Turbolinks behaviour. If you remove this event listener, it should work as expected.
This is what I have on my application.html.erb file.
<head>
<title>Software & Cia.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolineks-track': 'reload' %>
<%= csrf_meta_tags %>
</head>
If I delete the application stylesheet_link_tag, bootstrap works just fine, but I want to add my own styling to some parts. Sorry for the noobish question, but tried to find a solution and can't get it working.
My application.scss is
#import "bootstrap-sprockets";
#import "boostrap";
My application.js is
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree . here
If you want to use Bootstrap in rails, it's a good way to use the bootstrap gem (same for jquery)
gem 'turbolinks', '~> 5'
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
This way you keep your application <head> clean:
<head>
<title>Software & Cia.</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
Now your assets/stylesheets folder can be organize like that:
stylesheets
|_ custom_folder
| |_ custom1.scss
| |_ custom2.scss
|
|_ application.scss
|_ another_custom.scss
And you import all these files, bootstrap included, in your application.scss:
#import "bootstrap";
#import "custom_folder/custom1";
#import "custom_folder/custom2";
#import "another_custom";
If you have multiple files inside a custom folder, you can even
create an index.scss where you import all your files and just import
"custom_folder/index" in application.scss
If you override some boostrap variables in a file, import this one before bootstrap
I am trying to learn Rails and during this time I wanted to make my pages a little more stylish. To do so I went ahead and downloaded Bootstrap 4 and followed all the installation instructions I could find. To test it I tried to add a simple navigation bar. The bar loads all the text fine but there is no CSS applied to it :(
All the bootstrap css and js files are in assets/stylesheet and /javascript
At this point I am not too sure what I am doing wrong or what needs to be changed. I am guessing it is something simple.
Gemfile
gem 'rails', '4.2.4'
gem 'execjs'
gem 'sass-rails', '~> 5.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '~> 1.8.0'
gem 'bootstrap', '~> 4.0.0.alpha6'
gem 'jquery-rails'
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', media: 'all', "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Test</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
</html>
This is my
/assets/stylesheets/application.scss
#import "bootstrap";
This is my /assets/javascript/application.js
//= require jquery
//= require bootstrap
//= require bootstrap.js
//= require bootstrap.min.js
//= require jquery-3.1.1.min.js
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Thank you
I Think I found the issue.
I had two sass entries in the gemfile
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.6'
I commented out sass-rails and everything started working.
Using the polymer-rails gem with Rails 4.2 I am able to use the predefined polymer elements such as the paper element set and the iron element set.
However when I make my own elements they are not rendered.
E.g. I created an element with this command
rails g polymer:component testing
and I left it untouched
/app/assets/components/testing/testing.html looks like this:
<dom-module id="testing">
<link rel="stylesheet" href="testing.css" />
<template>
<h2>Testing</h2>
</template>
<script src="testing.js"></script>
</dom-module>
/app/assets/components/testing/testing.js looks like this:
Polymer({
is: "testing"
});
/app/assets/components/application.html.erb has this:
//= require polymer/polymer
//= require paper-styles/paper-styles
//= require iron-icons/iron-icons
//= require paper-tooltip/paper-tooltip
//= require easy-paper-tabs/easy-paper-tabs
//= require testing/testing
the <head> of /app/views/layouts/application.html.erb is this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title><%= full_title(yield(:title)) %></title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
<%= csrf_meta_tags %>
<%= favicon_link_tag %>
<%= html_import_tag 'application', 'data-turbolinks-track' => true %>
</head>
When I put the tag <testing></testing> into a view I expect to see the h2 heading "Testing", but I don't. Instead nothing is rendered there. When I inspect the page I just see the empty tag <testing></testing>.
What am I missing?
I've tried putting the <testing></testing> tag into different views
I've tried replacing <%= html_import_tag 'application', 'data-turbolinks-track' => true %> with <%= html_import_tag 'application' %> in /app/views/layouts/application.html.erb
I've tried putting the custom component into /vendor/assets/components/testing/ instead of /app/assets/components/testing/
For each thing I tried I restarted the server.
I noticed the console logged an error that said
Failed to execute 'registerElement' on 'Document': Registration failed for type 'testing'. The type name is invalid.
so I googled it and found that the web-components spec bizarrely requires all user-created elements to have a hyphen in their name! There's not much documentation about this - it's like secret knowledge.
Putting a hyphen in the name of the element fixes my problem.
Where exactly does that line of code go for a Rails application? Which file, and is there any additional surrounding syntax? Does anyone have a complete example of how to disable jQuery loading messages? I've read the documentation but I think there's just something really basic I'm missing that's not explicitly covered in the documentation.
Thanks
application.js
//= require jquery
//= require jquery_ujs
//= require jquery.mobile
application.mobile.js
//= require jquery.mobile
application.css
*= require_self
*= require jquery.mobile
*= require scaffolds.css
application.mobile.css
*= require_self
*= require jquery.mobile
Gemfile
source 'http://rubygems.org'
gem 'rails', '3.2.2'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'pg'
gem 'thin'
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier'
end
gem 'jquery-rails'
gem 'mobylette'
gem 'jquery_mobile_rails'
group :test, :development do
gem 'rspec'
gem 'rspec-rails'
gem 'sqlite3'
end
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Mobile Version!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<%= javascript_include_tag "application" %>
<script type='text/javascript'>
$.mobile.hidePageLoadingMsg();
</script>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application.mobile.js" %>
<%= stylesheet_link_tag "application.mobile.css" %>
<%= csrf_meta_tags %>
</head>
<body>
<div data-role="page">
<%= yield %>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<%= link_to notes_path, :class => ("ui-btn-active" if action_name == 'index'), :"data-icon" => "home", :"data-iconpos" => "top" do %>
Home
<% end %>
</li>
<li>
<%= link_to new_note_path, :class => ("ui-btn-active" if action_name == 'new'), :"data-icon" => "plus", :"data-iconpos" => "top" do %>
New Note
<% end %>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I think you may be misunderstanding the $.mobile.hidePageLoadingMsg(); method a bit. I can certainly understand the confusion though. In JQM you can programatically show the loading message using $.mobile.showPageLoadingMsg(); and then you would use $.mobile.hidePageLoadingMsg(); to hide the message. You could use that in your own ajaxing of certain content.
To disable the loading message you can use my example here.
<script src="//code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script src="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
The mobile init binding is used to configure defaults for JQM. It must be placed in between your jQuery and JQM references to work properly. You can find more default settings here.
To get that run everywhere, on all your pages, all the time, probably the best bet would be in app/views/layouts/application.html.erb. This assumes you are using an application wide layout. If you had just created a new rails app using 3.X, that's where you'd do it.
The simplest way to get it working is just stick it in the head of the layout, (ignoring the assets pipeline for now).
It sounds like (I'm not sure) that that's one bit of jquery where you DON'T want to wait for the DOM to load before you run the bit of code. So I'd put in in a script tag right after the default javascript_include_tag that the rails app generator placed in the layout:
<%= javascript_include_tag "application" %>
<script type='text/javascript>
$.mobile.hidePageLoadingMsg();
</script>
If that still doesn't do the trick, you'd have to delve into the app/assets/javascripts/application.js manifest, and enter a new line right after the one that loads jquery, and that line would call a javascript file that contains that one line of code.
Ok so basically, the moral of the story here is DONT user Gems for jQuery Mobile. Saying they don't work would be an understatement...they get 95% of the job done but then they puke so spectacularly that it's almost comical to think you tried to use them in the first place. These gems seem to (1) have an innate ability to explode when literally ANYTHING is updated that is remotely related to Rails and/or jQuery Mobile, (2) get abruptly and inexplicably delisted by their github owner, (3) throw awesomely rare and automagical errors, and (4) all for the awesome benefit of including MORE lines (that are by the way really sensitive to breaking) of code than if you were to just use jQuery Mobile hotlinks in the first place.
Save yourself a ton of headaches and just use hotlinks. If not, you'll win an all-expense paid vacation to suckville, sponsored by jQuery Mobile Gems, Inc (the latest versions of which, by the way, are almost guaranteed to be out of date and completely useless).
application.html.erb
<title>Hello</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>