New developper on RoR, I’m using Select2 to display some companies or departments.
Select2 was working fine for some weeks, and now, display is broken on every select2 input.
I used github history to detect why it’s failing now, but no indications of modifications which can explain that.
It's displaying a very small square or nothing. However, selecty2 is working when I click on the small square for exemple.
small square display,
Select2 working but display is broken
I used Github History pomber and inspect all files concerned. Nothing to explain why the display is broken now. Is the a way to detect the cause of the issue ?
I'm using Bootstrap 4 with rails 5.2.1
app/javascript/components/select2.js :
import $ from 'jquery';
import 'select2';
import 'select2/src/scss/core.scss';
import 'select2-bootstrap4-theme/dist/select2-bootstrap4.css';
$('.select2-form').select2({
theme: "bootstrap4"
});
// Requiring CSS! Path is relative to ./node_modules
app/javascript/packs/application.js
import '../components/select2';
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application', media: 'all' %>
<%= stylesheet_pack_tag 'application' %>
<!-- bootstrap animation carousel -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- bootstrap animation carousel -->
<!-- Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<!-- Select2 -->
</head>
<body>
<%= render 'shared/navbar' %>
<%= render 'shared/flashes' %>
<%= yield %>
<%= render 'shared/footer' %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%#= javascript_pack_tag "map" %>
</body>
</html>
I expect the input should be display correctly.
If it used to work, and now it doesn't, you can git bisect to determine which commit introduced the regression. When that is done, you should be able to pinpoint the guilty piece of code, again by adding the changes in this commit one by one and see when the regression pops up. Then you might be able to understand the reason for the regression.
Related
I'm new to web development, so I'm sorry if this is basic stuff. I'm not sure how to connect the code in my application.html.erb or crop.hmtl.erb to the actual files I downloaded. Specifically, I downloaded the files for Jquery UI and Jcrop(which is reliant on Jquery UI) and moved both of them into my application's vendor file (home/website/vendor). I then followed a Jcrop tutorial to install the plugin,but it doesn't work. I think my application isn't successfuly accessing one or both of the downloaded files. The Jcrop guide gave me a suggestion for what to put in my application.html.erb but said I might have to adjust the code according the actual paths. I don't know how to do this or even what to look up to research it. Can anyone help?
Application.html.erb: this is what the Jquery UI guide (http://learn.jquery.com/jquery-ui/getting-started/) told me to put
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
This is what the Jcrop guide (http://deepliquid.com/content/Jcrop_Manual.html) suggested I put into my application.html.erb, but said I may have to adjust:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
crop.html.erb
<% content_for(:head) do %>
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#cropbox").Jcrop();
});
</script>
<% end %>
<%= image_tag #thing.avatar.url(:large), :id => "cropbox" %>
Asset files (such as Javascript and CSS) should go in their respective folders inside of app/assets. For instance, if you place your files at the following locations within your application:
assets/javascripts/jquery.Jcrop.min.js
assets/stylesheets/jquery.Jcrop.css
You can then reference these files within your application.html.erb file (or crop.html.erb, using content_for) using the rails asset helpers:
<%= stylesheet_link_tag "jquery.Jcrop" %>
<%= javascript_include_tag "jquery.Jcrop.min" %>
Additionally, there is a jcrop-rails-v2 which may make the inclusion of JCrop assets easier.
I've already finished my project, and it seems working fine.
But, I've just found that there's more things to do with optimization.
Google's PageSpeed Insight just told me that
I have to Remove Render-Blocking JavaScripts, Optimize CSS Delivery and Leverage Browser Caching
About Remove Render-Blocking JavaScripts, and Leverage Browser Caching, it says that I have to work with my Assets Javascripts.
They are currently stated just like this in view
<%= javascript_include_tag 'application.js' %>
<%= javascript_include_tag 'illuminate.js' %>
<%= javascript_include_tag 'bootstrapSwitch.js' %>
<%= javascript_include_tag 'bootstrap.js.coffee' %>
<%= javascript_include_tag 'rails.js' %>
and its html ouput is this
<script src="/assets/application-21cb698a1b325807d74e3f5588e.js" type="text/javascript"></script>
<script src="/assets/illuminate-1a2b0535b4a3f7468aec74882e25f3.js" type="text/javascript"></script>
<script src="/assets/bootstrapSwitch-ae37e5eb28f943501b59b08ac6234.js" type="text/javascript"></script>
<script src="/assets/bootstrap-1b52926900736585a26c3fe0975f73.js" type="text/javascript"></script>
<script src="/assets/rails-e46b066113d4a1ff96120b8493021d9.js" type="text/javascript"></script>
How can I change this to change this in order to archive?
and about Optimize CSS Delivery, it says that I have to optimize these
<%= stylesheet_link_tag "application","http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" %>
<%= stylesheet_link_tag 'bootstrapSwitch' %>
and this is its html ouput
<link href="/assets/application-e8a61afef574ba15cb71a3730d2b6b8e.css" media="screen" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrapSwitch-b3ea2e51b3529f79637f5a8a9ef54712.css" media="screen" rel="stylesheet" type="text/css" />
How can I modify all of these?
Try :
1) minifying your javascripts : smaller the size, the faster will your pages load
2) using a CDN to host your assets : this helps to load your assets faster and hence a better response time
3) #depa gave some nice pointers to asset pipelines in rails, check that out as well
and you'll be good.
When I do something like:
<%= c.title %>
Rails render it like this:
"
Title
"
This behavior isn't the same if I wrap the string with a tag. Can someone please explain me why Rails acts like this?
UPDATE
Github's Repo link
This has to do with ERB instead of Rails. When the template is processed it outputs any values from output ERB tags (<%= %>) to the output buffer and simply executes any other code.
Everything else is left untouched. Whitespace before and after the ERB tags is untouched. The most that you can do is to use - in the tags to have it strip some of the whitespace.
<!-- -->
<% for i in 1..10 %>
<%= i -%>
<% end %>
<!-- -->
Will output
<!-- foo -->
1 2 3 4 5 6 7 8 9 10<!-- foo -->
Note the two spaces that still show up before each number, take out that whitespace and it will look like one long number.
Compare this with
<% for i in 1..10 %>
<%= i %>
<% end %>
Will output
<!-- -->
1
2
3
4
5
6
7
8
9
10
<!-- -->
Here's the output from your test page after select View Source from the context menu.
<!DOCTYPE html>
<html>
<head>
<title>Testapp</title>
<link href="/assets/application-1b13569e9620782f423d4cd3ce931750.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/application-9a717ea62eac3463d689b2ba0a4e85b4.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="/hfgtJZWzxaQ2d7txQMAt2b+21MWSTYcf6/2F7Pei1k=" name="csrf-token" />
</head>
<body>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
What's wrong with me?
<!-- -->What's wrong with me surrounded by html commet<!-- -->
</body>
</html>
You probably have some indentation in your layout file or another file that renders this view.
Your application.html.erb may look like this :
<html>
<head>...</head>
<body>
<%= yield %> <!-- Some whitespaces at the beginning of this line -->
</body>
</html>
Rails simply replaces the <%= %> tags with the value of the expression in it, nothing more.
I don't see the problem. Here's the rendered HTML:
<!DOCTYPE html>
<html>
<head>
<title>Testapp</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="cOfMPm5S/tCHCEHkeRTeQTITAiz800s+3Q4ZgNWCNlY=" name="csrf-token" />
</head>
<body>
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
What's wrong with me?
</body>
</html>
The relevant layout section:
<body>
<%= yield %>
</body>
I got the same problem with you!
The solution for me is to change the file Encoding from UTF-8 to UTF-8 without BOM
I'm using sinatra, glad to share with you!
I have implemented Omniauth and Koala7 gems to integrate my application with Facebook.
Everything works well, except one minor problem with posting custom actions with custom objects.
The problem is that my object url should be the show page of a newly created post, such as /posts/1. To make this page recognized as a facebook object, I need to put facebook metatags on top of the show.html.erb like this:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# sdff: http://ogp.me/ns/fb/sdff#">
<meta property="fb:app_id" content="myid" />
<meta property="og:type" content="sdff:post" />
<meta property="og:url" content="<%= "http://sdff.herokuapp.com" + post_path(#post) %>" />
<meta property="og:title" content="Sample" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
</head>
The problem is that facebook object debugger recognizes this as a type:webpage instead of type:post. I think this is because there's already the default head tag in /layouts/application.html.erb, like so:
<head>
<title>sdff</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
I assume this because the object debugger specifically points out:
Meta Tags In Body: You have tags ouside of your . This is either because your was malformed and they fell lower in the parse tree, or you accidentally put your Open Graph tags in the wrong place. Either way you need to fix it before the tags are usable.
So how do I solve this problem?
I need to place the facebook metatags in my show.html.erb, but the page itself is already a part of the body of the entire application layout.
Based on the error message you posted, I gather that your meta tags are not in the <head> as they should be. This is a great case to use a content_for block. In your show.html.erb view, place your desired meta tags into a content_for :head block. This saves the html and allows you to insert it somewhere else in the layout.
<% content_for :head do %>
<meta property="fb:app_id" content="myid" />
<meta property="og:type" content="sdff:post" />
<meta property="og:url" content="<%= "http://sdff.herokuapp.com" + post_path(#post) %>" />
<meta property="og:title" content="Sample" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
<% end %>
Then just add a yeild(:head) to your application template. The html you placed in the show view will be inserted into this spot in the application template. We check for nil here so that the yield is considered optional.
<head>
<title>sdff</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= content_for?(:head) ? yield(:head) : '' %>
</head>
I'm attempting to keep the application layout in my Rails 3 app for the stylesheets and javascript files I use most frequently (application.js, jquery, style, etc.). However there are plugins I'm using on certain pages and want to include those stylesheets/javascripts properly. For example, I'm looking to use slides only on my homepage. If my application layout is like the one below, what's the best way to include page-specific files?
<!doctype html>
<head>
<title>Title</title>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="screen and (min-width:481px)">
<!--[if IE]>
<link rel="stylesheet" href="http://localhost:3000/stylesheets/style.css" media="all"><![endif]-->
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width">
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body>
</html>