I have a html and js file (maps_scripts.js) in which I have defined all the google maps function related to the mentioned html page. These two are working really fine.
I've been assigned to include these files to jruby on rails project developed by someone else.
So far these are the steps I took.
copied maps_scripts.js file to \app\assets\javascripts
copied related marker images to \app\assets\images
added
<%= javascript_include_tag 'https://maps.googleapis.com/maps/api/js?key=my_key&libraries=places' %> "
to my html.erb page
include
<%= javascript_include_tag 'map_scripts.js', 'data-turbolinks-track' => true %>
to my html.erb page
Question
I'm getting
Uncaught ReferenceError: google is not defined at map_scripts.self-09044ded37604e5a1f367207911e2c79370a307b67a4be3178923d19f555011c.js:4
Note : I have several
google.maps.*
calls in the maps_scripts.js file. For an instance
google.maps.MarkerImage
google.maps.Size
google.maps.Map
etc.
Either you are missing a script or order of the scripts in map_scripts.js is wrong. try changing the order.
Related
I'm new to javascript, Redmine and RoR. So far I have read and understood the plugin development tutorial. But when I try to do things on my own they won't work...
If I use this:
<% content_for :header_tags do %>
<%= javascript_include_tag 'script', :plugin => 'my_plugin' %>
<% end %>
it will generate the correct link code on page source but there will be no scripts loaded to redmine_root/public/plugin_assets. Is that supposed to happen?
I would like to make this hello world example work.
But as far as I can understand, it will never work on the whole Redmine app if the scripts don't get loaded to redmine_root/public/plugin_assets.
If someone can help me out with understand why the scripts are not loading and how to properly use scripts under Redmine I would be very grateful.
Is code sample copy-paste from your project code? Or You typed it manually with misprints? % and = signs are missed in some places, must be <%= ... %> or <% ... %>
What the content of redmine_root/public/plugin_assets folder?
It must have plugin folder named same as your plugin, then images, javascripts and stylesheets folders, like here:
redmine_root
...
plugins
your_plugin # your plugin name
other_plugins
...
public
...
plugin_assets
your_plugin # your plugin name, must match with your plugin name in redmine_root/plugins
javascripts
your_script.js
images
stylesheets
other_plugins
In this case javascript_include_tag will works correctly with standart parameters (script and plugin names).
I have a rails app and I am trying to organize my javascript into page specific javascript files and only load it if the page requires it.
I use a 2nd manifest file to load page-specific javascript for my "goal_designer" page.
If I do a 'view page source' on my goal_designer page (after I follow a link t it, not reload it) I confirm that the js file has been added:
<script src="/assets/application.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/files/goal_designer.js?body=1"></script>
<script src="/assets/goal_designer_bundle.js?body=1"></script>
However, if I try to use a function that is within this file it does not work.
If I reload the page it works fine and the function is available to use.
In my app/assets/files/goal_designer.js I have:
$(document).on('page:change', function(){
hello_there_1();
});
$(document).on('page:load', function(){
hello_there_1();
});
function hello_there_1() {
alert("hello_there_1");
}
hello_there_1 only gets triggered if I reload the page, not if I navigate to it.
My understanding was that the goal_designer.js should be available as it has been added to on this page and the hello_there_1() function should be available but this does not seem to be the case.
So, once the page:loads then the function should trigger.
Another thing - if I look at the assets list in the Chrome debugger (Sources) the goal_designer.js only appears in the list if I reload the page, not if I navigate to it (even though it is in the 'page source' ok).
I am in development mode so I thought all js would be preloaded or available to be referenced. Is this correct?
If I click into a page, and the page-specific js gets added to the head, how can I bind an addEventListener to an object on the page from within this newly loaded file?
FYI - other info - I think I am doing this bit right.
I use this code in my goal_designer.html.erb:
<% content_for :head do %>
<%= javascript_include_tag 'goal_designer_bundle' %>
<% end %>
And this in my application.html.erb:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= yield :head %>
In my app/assets/javascripts I have a manifest file, goal_designer_bundle.js, which contains:
//= require ./files/goal_designer
By design, Turbolinks doesn't update the <head> section, only the body. The idea is that your JS and CSS is requested once on initial page load and subsequent requests avoid this by using AJAX and simply replacing the body. Thus, with the way Turbolinks is designed to work, your content_for :head block won't work.
Philosophically your approach is very different from how Turbolinks works so if you plan on using it I would just disable Turbolinks.
I have two views, one called dashboard and the other called home, both have their respective index.htm.erb files. The corresponding JavaScript files in the assets/javascripts folder do not seem to map to these views. For example, when I run an alert in home.js and then navigate to dashboard.html.erb the alert still runs.
How do I remedy this to get the functionality I am looking for?
I am confused as to how to write page specific raw JavaScript in Rails.
Edit: I could use the public folder but I had some ancillary issues with that and hence why I started using the files in the assets folder.
One of Rails' "opinions" about javascript is that it should be all concatenated into a single file (application.js), minified, and served to the client. This is an effort to minimize the number of requests the client needs to make when accessing your application (the goal is to have only three, one for your html, one for css, and one for javascript [excluding whatever images may be on the page.])
If you look in your application.js, you'll see a note saying that it is a 'manifest' file, and a line that looks like
require_tree .
Which says "load every javascript file in this folder into this file"
In order to load up some page-specific javascript, you'd need to
put a separate javascript file into app/assets/javascripts [call it custom.js, say]
stub out loading that file into the application manifest by writing stub custom in application.js
Include the custom javascript manually in your view (or, more better probably, a layout which renders your view): <%= javascript_include_tag 'custom' %>
However, I'd encourage you to look at whether you really need to separate this javascript, or whether it's a problem that can be solved by simply localizing your script to the page(s) it's intended for, which will keep the same functionality and keep your loads times ever-so-slightly faster.
$('body.some_custom_class').ready(function() {
alert('I'm running on this page!');
});
you can use content_for in your layout
app/views/layouts/application.html.erb
<html>
<head>
<title> ...</title>
....
<%= yield :javascript %>
....
</head>
....
</html>
and on your view app/views/home.html.erb
<% content_for :javascript do %>
<%= javascript_include_tag 'home' %>
<% end %>
other view content
you would also need to look at application.js and remove the //= require tree . line
In my rails app, in a javascript file in assets/javascripts, the first line is
console.log("This javascript file is included"). In My application.html, I include this right after the head:
<script type = "text/javascript">
console.log("Logging from the application.html")
</script>
I don't explicitly include the javascript file in any of my views, yet the console prints:
This javascript file is included.
Logging from the application.html
You're application.js probably looks something like:
//= require_tree .
"The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file. You can also use the require_directory directive which includes all JavaScript files only in the directory specified, without recursion."
http://guides.rubyonrails.org/asset_pipeline.html
It sounds like you have <% javascript_include_tag :all %> in one of your views or layouts, which causes all files in public/javascripts to be included. Documentation is here.
It's also possible that the file in question has been added to config.action_view.javascript_expansions[:defaults] in config/application.rb, which would cause it to be loaded if you have <% javascript_include_tag :defaults %> somewhere.
Your layout/application.html.erb is base to any your view (see yield instuction). At any view (any controller#method calling) rails render layout this current view file in yield. Obvious, js "Logging from the application.html" run at every refreshing page (not AJAX).
About including external JS, see previous post. If you wanna get page specific js read Best way to add page specific javascript in a Rails 3 app?
Ok Im new to rails in general and these default loaders and cache loaders an all that stuff they make some sense to me. But my question is. If I want to include a certain JS file or 2 or specific script on a particular page how would I do that.
with rails I have
app/views/layouts/application.html.erb in this file I gather is the base template for my site/service, and in there I would put all the moving parts. However I have an occasional need where I only need a javascript file loaded on a particular page. But it needs to be called after the jquery file so jquery is loaded into memory prior to the file I want loaded. So Im not exactly sure how I would approach that. Cause in the layout I have the javascript loader line whatever it is exactly I dont remember but its :default none the less which means jquery and applications will load out by default from what the API tells me.
Which does bring me to another question the guy who initially set up the rails server we have added a file to the defaults I would like to mimic that but don't know how with that either.
The simplest way would be to just include the script file in the view where you need it. jQuery will have already been loaded in the layout.
Alternatively, you can use content_for, as ctcherry mentions. You can find a more detailed explanation here: Javascript Include Tag Best Practice in a Rails Application
Also, regarding you last question, I'm not sure I understand it correctly, but you can add more options to the javascript_include_tag separated by a comma:
javascript_include_tag :defaults, "my_other_file", "etc"
content_for might help you, look at the example that includes the piece of code: <%= yield :script %>
Alternatively, think about ways to allow the JS code to detect if it is begin executed on the correct page (maybe a class or id set on the body tag), and only execute if that condition is met. Then you can serve your entire javascript collection compressed and minified to the user's browser on the first page load, increasing site performance.
May be used for this:
<head>
<title>My blog</title>
<%= yield(:head) -%>
</head>
And send it there from a view:
<%- content_for(:head) do -%>
<%= javascript_include_tag :defaults -%>
<%- end -%>
It's good work!