I'm trying to learn Ruby on Rails and understand the asset pipeline. I figured a good way to do this would be to create my website in Rails and learn with it. However, upon implementing my JS, it seems to add it to the file, but do nothing with it as the scripts aren't working (or some of them...)
I have just set it up on Heroku as I assume that's the easiest way for you to see the code? https://secret-citadel-76066.herokuapp.com/
I haven't yet called owl carousel so I'm sure that would fix the main sections as they're all owl carousels, but what's not working is the navigation and also a scroll to next section should scroll in, and at the bottom a scroll to top should scroll in.
However, somethings work - such as the scrollbar (nicebar).
Any suggestions?
EDIT:
//= require jquery
//= require jquery_ujs
//= require jquery.easing.1.3
//= require detectmobilebrowser
//= require isotope.pkgd.min
//= require wow.min
//= require waypoints
//= require jquery.counterup.min
//= require jquery.nicescroll.min
//= require gmaps
//= require materialize-sprockets
//= require common
//= require stuart-green
//= require turbolinks
note: I deleted the tree because I want to have more control over what loads when
We have the same issue in our project just like yours.
sometimes our js files not working but no error.
try to remove
//= require turbolinks
Related
I am using jquery.bootstrap.wizard to implement paper-bootstrap-wizard, I don't know why am getting the below issue.
TypeError: $navigation.find(...).tab is not a function
$navigation.find('a:first').tab('show');
This is my application.js file
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.min
//= require toastr
//= require owl.carousel.min
//= require parsley.min
//= require jquery.bootstrap.wizard
//= require jquery.validate.min
//= require paper-bootstrap-wizard
//= require home
This is a sneaky problem. It is because $navigation (or whatever you want to select via the .find()) isn't a valid jquery object. Does it exist?
The reason you get that error is not because the plugin doesn't exist, but because the element doesn't and the plugin tries to 'tab' it.
// This will likely give the same error:
$("#nonExistingElement").tab{ /*... */}
If you want to check if your file is being loaded, add a simple alert('test'); to the beginning of the plugin file. If it alerts, its loaded.
While you are responsible for your own code, it is a bit sloppy from the plugin builder not to have a simple check for this.
I am working on a rails app. It is a standard app, using server rendered pages, and jquery. I have had a decently hard time wrangling together the jquery and i am not sure why.
I am using jquery for a couple things: a datepicker and a timepicker. That is only used for a form a user can use, and is rendered in a users section where they can create/edit.
The structure of my javascript is right now i am using 1 javascript file called main which is required in my application.js. That is all the JS i am using.
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap.min.js
//= require jquery.raty.min.js
//= require jquery.turbolinks
//= require chosen-jquery
//= require turbolinks
//= require main
//= require_tree .
main.js
$(document).ready(function() {
// users profile stuff
if ($('table.calendar tbody tr td ul').hasClass('active-trip')) {
$('.active-trip').parent().css('background-color', 'orange');
}
$("#trip_start_date").datepicker({
minDate: 1
});
$("#start_date").datepicker({
minDate: 1
});
$("#end_date").datepicker({
minDate: 1
});
// ==========
// js in user's trips
$('#trip_start_time').timepicker();
$('#trip_end_time').timepicker();
// ===========
});
The problem that I am having is I am using a bootstrap navbar, with some JS effects on it (dropdowns). On this one page (a resource called "Gyms", or /gyms) the JS completely breaks and leaves the navbar useless. The error that I am getting is
Uncaught TypeError: $(...).timepicker is not a function
And I notice when I get that error once, it then starts repeating and I get it on every page. But yet, when I go back to the form where i use this code, it works completely fine even with the error?
This might be a turbolinks issue, but I am really not sure. I am using these gems
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jquery-turbolinks'
if that helps anything. I have also played around with using the jQuery CDN script rendered in application.html.erb but that doesn't really seem to help or hurt anything and is pretty much neutral. Any help would be much appreciated
Try changing the order of requiring:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
put jquery.tubolinks before all other scripts but right after jquery
After realising my rails app was experiencing the well known issue of $(document).ready) not working with turbolinks I installed jquery.turbolinks exactly as the docs suggest but I'm still experiencing the same issue. Whenever turbolinks are used to navigate none of the JavaScript in my $(document).ready) function works.
Here is some of my code:
In application.js:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_tree .
//= require turbolinks
Example of JavaScript not working:
$(document).ready(function() {
$('.notice:empty').hide();
$('.alert:empty').hide();
$(".notice").delay(2000).fadeOut();
$(".alert").delay(2000).fadeOut();
});
In this case function will load after turbolinks !
function runner(){
$('.notice:empty').hide();
$('.alert:empty').hide();
$(".notice").delay(2000).fadeOut();
$(".alert").delay(2000).fadeOut();
}
$(runner);
$(document).on("turbolinks:load", runner);
Turned out to be a simple error, I had a small script actually in the application.js file and I didn't realise that //= require turbolinks needed to go beneath that too
In my rails application my dropdown menu is not working after deploying code on server but in locally its work fine.I cant understand what is the main issue. Even I try this link twitter bootstrap drop down suddenly not working. But its not working for me.Code was run good before But suddenly its not working.My application.js is
//= require jquery
//= require jquery_ujs
//= require_tree ./bootstrap
//= require jquery.remotipart
//= require jquery-1.7.2.min
//= require jquery.loadmask
//= require highcharts
//= require exporting
//= require highcharts-3d
//= require jquery.cslider
//= require modernizr.custom.28468
//= require owl.carousel
// require app
This is my forth day with this problem I am still in trouble. In my app/asset/javascript/bootstrap directory bootstrap.min file present.
I am trying to get rangeslider.js working in Ruby on Rails. I have used their GitHub page as a reference, but couldn't find any help for Rails.
http://andreruffert.github.io/rangeslider.js/
Application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require rangeslider.js
//= require rangeslider.min.js
//= require_tree .
I came across the following error message
Sprockets::FileNotFound
(in C:/Users/rmatthews/Documents/repos/pcbuilder/app/assets/javascripts/application.js:17)
Line 17, was //= require rangeslider.min.js
The files are located on my computer, but in my /downloads/rangeslider.js-0.3.7 directory
My guess is that Rails does not search that directory.
Do I need to place them somewhere else, like /vendor/assets?
I've been following this as a Reference, but couldn't find much
http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline
I've seen a couple of similar questions, but since they were discussing jquery, they didn't seem to be of much help.
Rails does not search random directories that exist outside of your application. You will need to place this file at vendor/assets/rangeslider.js.
Then require it by:
//= require rangeslider