In my index.html.erb file I have a form that successfully submits onChange. However, this only works if I use <script> tags placed after my form. Why is the same js in welcome.js not running? Index loads as a /welcome route.
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ace.min
//= require jquery.sortable
//= require chartkick
//= require hammer
//= require_tree .
External js file
# app/assets/javascripts/welcome.js
$('.chart-radio-icon').change(function(){
$('#mega_form').submit();
});
View
# views/welcome/index.html.erb
<%= form_tag mega_chart_path, id: 'mega_form', remote: true do %>
<%= radio_button_tag :metric_type, :followers_count, true, :class => 'chart-radio-icon'%>
<%= label_tag(:followers, 'Followers', :class => 'chart-label chart-label-social') %>
Again, the js works when placed in <script> tags in the view, but not externally.
EDIT:
Since we've determined that your asset files are not being included in development. For a sanity check try this and restart your server:
Rails.application.config.assets.precompile = %w( application.js application.css )
END EDIT
Since you are using a require_tree ., and since the welcome.js file is in app/assets/javascripts, it will be included on all pages in your application. See here.
I think that the problem is that on page load, the event listener is not being assigned to the DOM element. Try wrapping your JS code in:
#app/assets/javascripts/welcome.js
$(document).ready(function(){
....
});
Related
I am facing a javascript issue on Rails;
I used this web app in order to publish a book rating system
I've noticed that when I go to my homepage (index), then I click on the book that I want to rate (, the script loads and everything works fine, but when I go directly to the book without passing by the home page, the script of rating will not load
on application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
on the head of application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
What am I missing ?
It may be caused by turbolinks which uses AJAX to view templates to speed things up. But it will cause JavaScripts to not load without a page refresh. You can try removing the turbolinks gem from your gemfile and run bundle install. Alternatively you can wrap the raty javascript with the following. So put the first line at the beginning of your javascript and close your javascript with the last line.
$(document).on('turbolinks:load', function() {
...your jQuery/javascript goes here...
});
I have couple of js files and I put them into vendor/assets/js. Then I require them in the application js file as;
//= require jquery
//= require jquery_ujs
//= require dropzone
//= require jquery.cookie
//= require toastr
//VENDOR JS BEGINS
//= require pace/pace.min
//JQuery buraya gelecek sonra
//= require modernizr.custom
//= require jquery-ui/jquery-ui.min
//= require boostrapv3/js/bootstrap.min
//= require jquery/jquery-easy
//= require jquery-unveil/jquery.unveil.min
//= require jquery-bez/jquery.bez.min
//= require jquery-ios-list/jquery.ioslist.min
//= require jquery-actual/jquery.actual.min
//= require jquery-scrollbar/jquery.scrollbar.min
//= require bootstrap-select2/select2.min
//= require switchery/js/switchery.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require jquery-isotope/isotope.pkgd.min
//= require classie/classie
//= require codrops-stepsform/js/stepsForm
//= require bootstrap-datepicker/js/bootstrap-datepicker
//= require bootstrap-datepicker/js/locales/bootstrap-datepicker.tr.js
//= require bootstrap-datepicker/js/locales/bootstrap-datepicker.en.js
//= require summernote/js/summernote.min
//= require moment/moment-with-locales.min
//= require bootstrap-daterangepicker/daterangepicker
//= require bootstrap-timepicker/bootstrap-timepicker.min
//= require codrops-dialogFx/dialogFx
//= require ion-slider/ion.rangeSlider.min
//= require owl-carousel/owl.carousel.min
//VENDOR JS ENDS
at the top of the page I require jquery and jquery_ujs belongs to jquery. Right now, I load the application js files as;
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
The thing is, I have couple of js codes inside ..html.erb files, which needs the page loads first. But I would like to merge them in a js file. What I would like to do is call only jquery in the head tag and call application js files in body. But if I remove jquery gem and call it as;
<%= javascript_include_tag 'jquery.min', 'data-turbolinks-track' => true %>
Rails gives an error about jquery_ujs. Ofcourse I can add jquery_ujs there as well. But what is the best practise?
The most rails-esque way to add page specific js code to your rails app (thus avoiding loading js in every page when a library or script is only needed in one page) is to add to the very bottom of your layouts/application.html.erb file right before the closing body tag:
<%= yield :javascript %>
</body>
</html>
Then on the view that you're looking to run some snippets of javascript you should put this at the very bottom of it after all html tags have been closed. Make sure it's not within some divs or anything in that view but at the very bottom of it.
Updated referencing Fred:
<%= content_for :javascript do %>
<script type="text/javascript">
$(document).on('page:load', function() {
all your code here..
});
</script>
<% end %>
This code will now be yielded to the bottom of your layout view only loading on the specific views you need instead of being concatenated along with all other assets in your assets/js folder. I do this with all custom js that isn't application wide and it's very easy to maintain/debug.
Nothing on the internet solved this problem.
I'm running on Rails 4.2.3 and Ruby 2.1.5
After an installation of devise, I got this error.
When I delete the line
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true % from my layout file, the error is gone and everyting looks fine.
I tried everything found on stackoverflow, didn't work.
Right now:
I use <%= link_to "sign out", destroy_user_session_path, method: :delete %> in my layout.
I tried to change the initializer : config.sign_out_via = :delete to "get" also, didn't work. Now remains "delete". Anyway it should be delete in my opinion.
My application.js file includes : //= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Routes.rb file includes devise_for :users, path_names: {sign_in: "login", sign_out: "logout"}. If I don't add this line, it's not working also.
If I delete <%= javascript_include_tag 'application', 'data-turbolinks-track' => true % from my layout file it's working. If I don't, it's not working.
What is the problem with this javascript thing? Any opinion is welcome.
Try using the jquery-turbolinks gem and modify your application.js to look like this:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_tree .
//= require turbolinks
Ok the problem seems like because of Windows. The solution is adding the gemfile : 'coffee-script-source', '1.8.0' and bundle update coffee-script-source This solved.
I am working on a Rails 3.2.13 app, and encountering the following problem:
The Javascript files I wrote in the app/assets/javascripts/ directory don't seem to be run.
I have JS code in a file called menu_list.js in the app/assets/javascripts/ directory, but it does not do anything. Whereas when I put the same code on the view page in a tag, it works.
<script>$("#sortable").sortable();</script>
Here's my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery.purr
//= require jquery-ui
//= require best_in_place
//= require bootstrap
//= require bootstrap-switch
//= require_tree .
my menu_list.js file:
$(function() {
$("#sortable").sortable();
});
It does not make sense to me, as I thought //= require_tree . would include all the javascript files in the directory. I tried other javascript files too, but they don't seem to have any effects.
$("#sortable").sortable();
If this truly is all you have in app/assets/javascripts/menu_list.js it will run as soon as the script is loaded, which is not what you want. You want to run the above code at least after the DOM has fully loaded into the page and not before.
$(function() {
$("#sortable").sortable();
});
If the environment you're running in is :development, and you properly have the following in your layout
<%= javascript_include_tag "application" %>
you will see a separate <script> tag for every Javascript file Sprockets is loading. The //= require_tree . will pick up your app/assets/javascripts/menu_list.js file.
I suggest also making sure you don't have any precompiled version of your assets in place by running the following in shell
rake assets:clean
You can also force debug mode (individual <script> tags for each file) by adding a :debug option to the above include tag
<%= javascript_include_tag "application", debug: true %>
Most common cause for this is that the call to javascript_include_tag that is on the default layout, then you create another layout, forget to add the include there and then nothing works in controllers where you use this new layout.
I'm working on implementing jQuery into a rails project, and have this Javascript tag in the head of my application.html.erb file:
<%= javascript_include_tag "application" %>
And if I put jQuery code into my application.js file, it works as expected in my application. However, if I put the jQuery code into any other .js files in my assets/javascripts folder (home.js, for example), it doesn't work as it should in my application.
Here's my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
It was my impression that the last line of that meant that all my other js files would be compiled into application.js, so having just the <%= javascript_include_tag "application" %> in my application.html.erb file would be sufficient to make all my js files work -- is this a faulty assumption?
These are the contents of my home.js file -- this function works as it should when I put it into my application.js file directly but when it's in my home.js file instead it doesn't work.
$(document).ready(function(){
$("h2").click(function(){
$(this).hide();
});
});
Try to add //=my home in application.js file above //=require_tree .
Hope this helps.