My Jquery tabs work, but only after I refresh the page. See the images below for more information. What is causing this and more importantly, how can I solve this?
I am not getting any errors. I allready added:
$(document).ready(function(){
$("#functions").tabs();
});
This is my order of code (Ruby, javascript.js)
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require jquery-ui/tabs
//= require turbolinks
//= require_tree .
Code & View before: refresh
Code & View after: refresh
Related
I am having a issue with javascript not running properly on my production environment. I precompiled my assets with
rake assets:precompile RAILS_ENV=production
before pushing code up to git and heroku but it refuses to execute bootstrap's js functions, google analytics/new relic code, menus, image sliders, etc. Here's my application.js
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require menu
//= require jquery-ui/autocomplete
//= require autocomplete-rails
//= require jquery-ui/accordion
//= require jquery-ui/tooltip
//= require jquery.raty
//= require search
//= require sameheights
//= require nprogress
//= require sweet-alert
//= require sweet-alert-confirm
//= require select2
//= require ratyrate
//= require local_time
//= require tinymce-jquery
//= require fancybox
//= require_tree .
When I inspect the page, there are no errors or warnings. Some of these functions work correctly on development, but not all. I tried removing each of the lines one by one to see if I could find a culprit but no luck. In fact, since the last time I precompiled assets, the only files that were added were menu, search, and sameheights so everything was working fine beforehand.
Additionally, my production environment correctly sees the minified application.js and application.css files with all the pertinent functions and I have already checked for dupes as well. HELP!
It seems that the issue might be with either jquery or bootstrap. I removed both gems and added cdn hosted versions and it seems to have resolved the issues.
I currently try to port this template from startbootstrap.com into my rails app. Most of it already works but the navigation bar does not change its color while scrolling.
The different colors are achieved by the creative.js file. I put this file under assets/javascript and included as in my application.js file:
//= require jquery
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require creative
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I inspected the assets with the Chrome Developer Tools and the creative.js file does not appear there. Since the other javascript files appear in the asset folder the asset pipeline seems to be working.
What do I have to change so that the creative.js file appears in my assets too?
I faced the same issue with my project where I tried to incorporate Bootstrap's creative theme.
The issue for me was that creative.js was not included at the right position (if you notice in the original theme the JS script calls are made at the end of the HTML file, after all the class and id declarations).
Your order of inclusion inside application.js is correct =>
//= require jquery
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require creative
//= require jquery_ujs
//= require turbolinks
//= require_tree .
However, there is a good chance that application.js is not included at the right spot. Ensure that you are including the files after the below code segment has ended =>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
Best of luck!
Try to delete the coffee file with the same name.
In your case creative.coffee
It worked for me!
I have tried given documentation for the select2-rails gem, but my browser console still throws an error.
Uncaught TypeError: $(...).select2 is not a function
I am using rails 4.0.1& select2-rails 3.5.9.3
My application.js
//= require jquery
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require turbolinks
//= require vendor_js
//= require_tree .
$(document).ready(function() {
$("select#team_select").select2();
});
application.css
*= require select2
*= require_self
*= require jquery.ui.accordion
*= require jquery.ui.menu
*= require jquery.ui.datepicker
*= require common
*= require owl.carousel
*= require lazybox
*= require fancybox
*= require owl.theme
*= require 7531339
*= require_tree .
*= require font-awesome
_form.html.erb
<%= f.select(:team_id, #teams.collect {|p| [p.name, p.id]}, {include_blank: "None"}, {id: "team_select"}) %>
What i am doing wrong here? Any help is appreciated.
The problem is surely in application.js: According to their Demo App, the sequence of requiring JS plugins is as follows:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require select2
//= require select2_locale_pt-BR
//= require_tree .
In your case, you have to load turbolinks before select2, leading to:
//= require jquery
//= require turbolinks
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require vendor_js
//= require_tree .
I never encountered this issue while using rails 4.1.5 & select2-rails 3.5.9.3.
However, after upgrading rails to 4.2.4, I get the same exact error described in this question:
Uncaught TypeError: $(...).select2 is not a function
I was able to resolve the error by removing the "select2-rails" gem from my Gemfile and replacing it with:
source 'https://rails-assets.org' do
gem 'rails-assets-select2', '~> 4.0.0'
end
On rails 5 using CoffeeScript and turbolinks I had to use the line:
$(document).on "turbolinks:load", ->
before everything so that the code gets executed when the desired page with the select tag is loaded.
I had the same problem and changing the order of JS plugins didn't help.
I ended up removing turbolinks and it's working now. Probably not the best solution but it was the best thing that I achieve after some hours searching.
So, basicly I removed that line from application.js file:
//= require turbolinks
I'm trying to use the rails-jquery-autocomplete gem but can't seem to get it working.
At first I thought it was the order that I was requiring it in the application.js but based on other posts on SO, I don't think this is the case. Here is that code anyway:
//= require jquery
//= require jquery_ujs
//= require autocomplete-rails
// require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require ckeditor/init
//= require social-share-button
//= require questions
// require_tree .
The error I am getting for it at the moment is:
Uncaught TypeError: undefined is not a function autocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.railsAutocomplete.fn.extend.initautocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.railsAutocompleteautocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.fn.railsAutocomplete.ejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4666
jQuery.event.dispatchjquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4334
jQuery.event.add.elemData.handlejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4575
jQuery.event.triggerjquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4902
jQuery.event.simulatejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:5165
jQuery.each.handler
Any ideas why it's not recognising it?
Thanks
first, have you run rails generate autocomplete:install in your project root?
Also you should include autocomplete-rails after jquery-ui which seems to be missing.
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
....
If that does not help put this in the head of your application.haml/html:
layouts/application.html
....
javascript_include_tag "autocomplete-rails.js"
....
The Doc is quite clear on what you have to do, to get up and running. Good luck
Recently I've got strange error on Rails production - some javascripts not working. Locally there is no problem - everything works perfectly, but production.
my application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require cocoon
//= require jquery.minicolors
//= require widget
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
//= require_tree .
scripts that not working - jquery.minicolors and widget(coffescript).
I've tried to add these scripts to
config.assets.precompile += %w( widget.js.coffee jquery.minicolors.js )
in production.rb, but that's doesn't work too
It's strange but if I remove
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
from application.js the rest scripts work fine
I understand this issue has been closed but I actually had the same issue recently. I fixed it by wrapping my jQuery code inside the following;
$(document).ready(
(custom JS goes here)
)
If you (or anyone in the future) has the same issue, I'd say it's cause of how Rails loads CSS/HTML and jQuery. Apparently jQuery is loaded as the head in a Rails app so it's loaded but can't be accessed after it's been loaded.
I've found a solution with help of question
I removed from application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
and keep only
//= require highcharts/highstock
highstock.js keeps in /vendor/assets/javascripts and contains necessary scripts for highcharts working