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.
Related
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.
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.
I am new to rails and implementing a demo app. I have this code in my 'app/view/layout/applicatio.html.erb' file:
<%= stylesheet_link_tag "scaffold" %>
but when I run it and debug in my browser I see this path expands to:
<link href="/assets/scaffold.css" media="screen" rel="stylesheet" type="text/css">
I am not able to understand that from where this assets folder is coming into picture? this is also causing the problem in the loading of my stylesheets.
Read this stuff here.
http://guides.rubyonrails.org/asset_pipeline.html
In application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
in the applications.css
*= require_tree .
This row means all .css file in app/assets/stylesheets will be included.
I found a layout at https://github.com/evenwu/pinterest-clone-layout that I would like to try. However, I have no idea how to integrate this with my existing rails project. My current layout looks like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
How do I use the layout from the github link?
Add gem 'haml' to your Gemfile and run bundle install.
Copy layout and stylesheets, etc. to your project.
Remember to remove your .erb layout; Rails gives .erb precedence over .haml by default.
Im just looking for a little clarity to better my understanding of the Rails asset pipeline. I have placed my stylesheets and javascripts within app/assets/javascripts and app/assets/stylesheets. Now i am trying to get these views to render on my page but so far nothing is showing.. I wanted to see if someone could confirm if the following looks correct
In my layouts/application i have
<%= stylesheet_link_tag "fullcalendar" %>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "jquery.js" %>
<%= javascript_include_tag "jquery.rest.js" %>
<%= javascript_include_tag "rails.js" %>
<%= javascript_include_tag "application.js" %>
<!-- these are needed for the calendar. -->
<%= javascript_include_tag "jquery-ui-1.8.11.custom.min.js" %>
<%= javascript_include_tag "fullcalendar.js" %>
<%= javascript_include_tag "calendar.js" %>
And my index.html.erb looks like
<html>
<head>
<link href="/stylesheets/fullcalendar.css" media="screen" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='/javascripts/jquery.js'></script>
<script type='text/javascript' src='/javascripts/fullcalendar.js'></script>
<script type='text/javascript' src='/javascripts/calendar.js'></script>
<script type='text/javascript' src='/javascripts/jquery-ui-1.8.9.custom.min.js'></script>
<script type='text/javascript' src='/javascripts/jquery.rest.js'></script>
Am I missing something or just being a real novice ( All constructive criticism welcome)
in Your layouts/application you just need this:
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application", media: "all" %>
and in app/assets/stylesheets/application.css
you just need:
*=require_self
*=require_tree .
and in app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
And there's o need to include all the files
You'll have some problems in production if you include js files, to avoid it, you should add such files, ex: "fullcalendar.js" in config/production.rb, config.assets.precompile += %W(fullcalendar.js), and then run rake asset:precompile
You can see a quick overview in Ryan Bates Video: #279 Understanding the Asset Pipeline.
For more info go to the RailsGuide: Asset Pipeline.
Both helped me a lot.