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...
});
Related
I am still a newbie at Ruby on Rails. This framework has been really amazing for me. However, since I uploaded it into the production, I still do not understand why Ruby on Rails 5.2.3 on some random occasion does not load JavaScript properly. Sometimes it loads properly at the first try on opening the page, but when it does not, user has to refresh even sometimes several times until it is loaded properly. Also I get error from the browser where it says
GET .../assets/jquery-ui-1.8.16.custom.css net::ERR_ABORTED 500
when I did not in any way import or even writes a single line of code to import that file since I used the JQuery UI 1.12.1 loaded from CDN.
What is really important is, why Ruby on Rails 5.2.3 on some random
occasions does not load the JavaScript properly?
Not only does it happen on production mode, also on the development mode this problem occurs on random ocassions as well.
I will post the application.js and application.scss and also the head part of the application.html.erb to give the insights of what I am doing wrong in this case:
application.js
//= require jquery3
//= require jquery-ui/core
//= require jquery-ui/widgets/slider
//= require rails-ujs
//= require popper
//= require cocoon
//= require social-share-button
//= require social-share-button/wechat
//= require rippleria/js/jquery.rippleria.min
//= require_tree .
application.scss
/*
*= require gmaps-auto-complete
*= require social-share-button
*= require jquery-ui/core
*= require jquery-ui/slider
*/
#import "pretty-checkbox/dist/pretty-checkbox";
#import "rippleria/css/jquery.rippleria";
application.html.erb
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_link_tag 'sub/style' %>
<%= stylesheet_link_tag 'sub/components.min' %>
<%= stylesheet_link_tag 'sub/custom' %>
<%= stylesheet_link_tag 'sub/chat.min' %>
<%= javascript_include_tag 'application', async: Rails.env.production? %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
I would hugely appreciate it if you guys could let me know what solutions I can do in order to avoid such random behaviors? Thank you very much for your time. :)
Never mind, I already solved the problem. The main issue that Ruby on Rails had is that if we use the JQuery provided by Rails 5.2.3 by the dependency written below
gem 'jquery-rails'
it will generate the application CSS file with the following line
#import 'jquery-ui.1.8.6.custom.css'
that involuntarily imports JQuery UI Custom CSS although the assets folder does not have the file written above
SOLUTION:
I would recommend you AGAINST using the JQuery provided by Rails 5.2.3 and change the JQuery using CDN method for best performance. So you can remove the following line on application.js
//= require jquery3
then load order of JQuery before application.js on application.html.erb like the following line:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<%= javascript_include_tag 'application', async: Rails.env.production?, :cache => 'cached/all' %>
Hope my solution could help. :)
I have put the tag javascript into my body application.
In my console I am getting this error:
Rails-ujs has already been loaded.
In development mode the app works, however it doesn't work in production.
I have deployed my rails application on Heroku.
I try to move the tag javascript into the head, but then all function js is not working.
Any solution?
If you're using webpack and a separate front-end, you might have two instances of your javascript tag in application.html.
= javascript_include_tag 'application', 'data-turbolinks-eval' => false
= javascript_pack_tag 'application'
You'll want to remove the first instance; similarly if you've used pack_tag to render your stylesheets, you may be experiencing CSS classes being called twice (you'll see stacked classes on an element in dev tools).
I solved bringing my javascript into the head and simply including all my functions below:
$ (document).on('turbolinks: load', function () {
})
If you do not use webpack then use as like:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', 'data-turbolinks-eval': false %>
<%= javascript_include_tag 'frontend_application', 'data-turbolinks-track': 'reload' %>
</body>
in application.js file
//= require rails-ujs
//= require activestorage
//= require turbolinks
in frontend_application.js file
//= require compress.min
//= require custom
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(){
....
});
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 unable to delete or display a confirm box in Rails 3.1.
I have the following lines in my application.hmtl.erb layout :
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
I have also tried to change "application" to :defaults or "prototype" or "jquery" but it didn't change anything.
Need help with this !
Confirm boxes and routing to REST actions are done by the the unobtrusive javascript file. You have this problem, because you don't have it included.
Check inside your application.js if you have the following lines (before any actual javascript code):
//= require jquery
//= require jquery_ujs
This example assumes that you have the jquery-rails gem in your Gemfile. If you have prototype-rails, you should switch to:
//= require prototype
//= require prototype_ujs