So in the Assets folder there are two folders for javascripts and stylesheets.
So I added a spike.js and a CSS file of spikecss.css to those folders and wrote some Javascript and CSS code fin them.
Now I am in the index.html page and writing something like this? Which doesn't work. How do I wire all these thing together to work?
This is a test app mostly for the javascript side of the deal so I really don't have models, controllers,views at this point. I am drawing D3 chart in the JavaScript file so I just want to show them when I hit the webpage
Javascript file:
var data = [4, 8, 15, 16, 23, 42];
var chart = d3.select("body").append("div")
.attr("class", "chart");
chart.selectAll(chart)
.data(data)
.enter().append("div")
.style("width", function(d){return d*5 +"px";});
Index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Here we go</title>
</head>
<body>
javascript_include_tag :defaults, "spike"
</body>
</html>
UPDATE
Based on Ryan's method used in this railscast, you can have a dynamic index.html.erb page with just these 2 steps (the original, slightly more complex answer can be seen below):
First, set your routes.rb file to look like this:
MyApplication::Application.routes.draw do
root to: 'application#index'
end
Next, move your /public/index.html file to /app/views/application/index.html.erb. Don't just copy it - move it. This means you should not have an index.html file in your /public directory.
Congratulations, you now have a dynamic index page that can handle ERB markup.
ORIGINAL ANSWER
The /public/index.html file is statically served, so you'll need to write it as if you weren't using Rails. Add your css and javascript locations to the <head> section, using <link> and <script> respectively as you would for any vanilla HTML page.
If you prefer to do this the Rails way, you'll need at the very minimum:
an entry in routes.rb
a corresponding empty controller
and an index.html file (or index.html.erb, index.html.haml, etc) at /app/views/some_name/ where some_name is the same as your controller name (minus the word 'controller').
You can then add your custom file names to your /app/assets/javascript/application.js and /app/assets/stylesheets/application.css manifests to have them pulled into the page.
Alternatively, you can edit your /app/views/layouts/application.html.erb template manually using embedded ruby. See here and here for documentation for how to do this.
Oh, one other thing - the javascript you wrote will execute before the DOM has loaded as it stands right now. To avoid this, you'll need to wrap it with something like:
$(function(){ /* your code here */ });
Related
I'm currently trying Rails 6.0.0.rc1 which seems to have moved the default javascript folder from app/assets/javascript to app/javascript. The application.js file is now located in app/javascript/packs. Now, I want to add a couple of js files, but for some reason they don't get imported and I can't find any documentation on how this can be done in Rails 6. I tried a couple of things:
Create a new folder custom_js under app/javascript/packs, putting all my js files there and then add a require "custom_js" to application.js.
Copy all my js files under app/javascript/channels (which should be included by default, since application.js has require("channels")).
Adding require_tree . to application.js, which was the previous approach.
How can I load my own js files inside a Rails 6 application?
Get better-organized code and avoid multiple javascript_pack_tags in your application.html.erb file with this approach:
Add your custom example.js javascript file to app/javascript/packs.
Add require("packs/example") to your application.js file.
I would have liked to add a comment to Asim Hashmi's correct answer. But I don't have enough reputation, so I'll add my suggestion as an answer instead.
It isn't necessary to include the ".js" extension inside of the require.
You need to do the following steps to add custom javascript file to rails 6 (webpacker)
1.Create your custom file named custom.js in app/javascript/packs directory.
For testing purpose, write any console.log in it.
// app/javascript/packs/custom.js
console.log("custom js file loaded")
2. Go to your application.html.erb and add the following line at the end of your <head></head>
<%= javascript_pack_tag 'custom', 'data-turbolinks-track': 'reload' %>
3. Now execute rake assets:precompile
This will pack your javascript code (including our custom file we just added)
Now reload your page and you should see the message
custom js file loaded
In your browser console.
My custom js has functions which will be called by embedded javascript of serveral html pages. Following snippet works in Rails6, compiled by webpacker:
put custom js file in folder app/javascript/packs e.g. app/javascript/packs/my_functions.js
say_hello = function(a_text){
console.log("HELLO "+ a_text);
}
add javascript_pack_tag in html file, e.g. index.html.erb .
<%= javascript_pack_tag 'my_functions' %>
<!-- html here -->
<script>
$(document).ready(function(){
say_hello('ABer')
});
</script>
Note : This line is inside html body, not in head
<script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>
I want to include application.js to all pages base on main.gsp template, but in some reasons application.js included only in few pages.
Theres my config:
ApplicationResources.groovy:
modules = {
application {
resource url: 'css/common.css'
resource url: 'js/application.js'
resource url: 'js/bootbox.min.js'
}
}
Main template(main.gsp):
...
<r:require modules="application, bootstrap, bootstrap-responsive-css, bootstrap-js"/>
...
There's two .gsp files which inherited from main template:
<meta name="layout" content="main"/>
But in one page application.js is exist as (/.../static/bundle-bundle_application_defer.js"), but not exist in other.
Difference between files only in custom layout markup, not in , and so on.
But files belong to different controllers, may be that where problem is?
So what should i check to understand where the problem is?
I think that all the javascript files are bundled together in one file, you can check it in Firebug
I've an app which works fine in development and on my current production server.
I want to move it to FREE heroku (basic config: 1 dyno, 1 worker).
Unfortunately, the pdf generation (using PdfKit) is ok BUT without the pictures defined in my CSS.
I've followed a lot of tips including:
http://blog.mattgornick.com/using-pdfkit-on-heroku
http://jguimont.com/post/2627758108/pdfkit-and-its-middleware-on-heroku
http://code-fu.pl/blog/2011/05/17/pdfkit-heroku
Thoughts?
Found a workaround but I am still eager to know a better option:
I duplicated my view: one dedicated for html, another for pdf.
I removed all css using pics and put it in a separate file, included only in the view dedicated for html
finally, I inserted the css in the view dedicated to the pdf:
.foo { background-image:url(<%= Rails.root %>/public/images/bar.png) }
Very Ugly but works so please tell me if you've better
It's probably an issue with the way the url's are specified in the css. As I recall, they should be file system absolute paths. What does your css look like?
Here is how I answered my needs with:
Just one single view file
Just one css file
The trick was to pass the proper base_url to the css file dynamically, given I expected a pdf or html.
I decided to use LESS. Style compiles css in a different manner, given the base-url I provide in the DOM. This base-url is generated by a helper.
Here were my steps:
changed my style.css to style.less
Added to my view:
<%= stylesheet_link_tag "style.less", :rel => "stylesheet/less" %>
<script id="base_url" type="text/javascript" data="<%= assets_path %>"></script>
<%= javascript_include_tag "less.min.js" %>
In my helper:
def assets_path
if request.fullpath.include? ".pdf"
"#{Rails.root.join('public',"images","pictos")}"
else
"#{request.protocol}#{request.host_with_port}/images/pictos"
end
end
and in my style.less:
#base_url: `document.getElementById('base_url').getAttribute('data')`;
.foo { background-image:~"url(#{base_url}/bar.png)" }
Instead of the page making another request for the CSS, I would like to have the Rails view render the CSS file in the page, so it's only 1 request.
Is this possible?
Altough the typical way to include CSS is using stylesheet_link_tag (in particular so it gets cached by the client), it is possible to put it directly in your <HEAD> in Rails 3.1:
<HEAD>
....
<STYLE type="text/css">
<%= YouAppName::Application.assets["your_stylesheet.css"].to_s.html_safe %>
</STYLE>
</HEAD>
I adapted this from this post.
<%= stylesheet_link_tag :all %> assuming your CSS file is in your public/stylesheets folder (which is the conventional place to store stylesheets). Of course, instead of :all, you can specify a specific file.
in your page's block.
I usually do this in my application.html.erb (which is a layout in your app/views/layouts) folder. But you can do this in any view file with a block.
Good luck!
Just wrap your CSS in
<style></style>
within your view.
How to display a HTML file from my system in iframe using rails?
I will explain my issue...
I have a view file that has an iframe which calls an action through <iframe src="controller/action?param=somevalue"></iframe> and the action renders a HTML file based on the params.
The HTML file called has reference to stylesheets and javascripts in the format <script type="text/javascript" src="../common/About.js"></script>
When viewed in browser the HTML file displays correctly with the styles and javascript but when viewed in the application the styling and scripts are not working from the external file. On viewing the source code for the external files i get "Unknown action" error.
What is that i am doing wrong in this?
(reacting to yr last comment): you need to specify css and js files in the iframed html page separately. html in an iframe is rendered completely independent from the surrounding page.
This is not a rails-related question imho.
I found the mistake I made. Its because of routes being not defined properly. When I give relative urls in the html file, the rails views assumes the full path to be some thing like src="controller/common/About.js". As there is no action defined by the name common I was getting the Unknown action error. I have redefined my routes and its working fine now.