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
Related
I have a hidden field that's activated when clicked on the link using jQuery. When clicking on the link, the field appears just for a second and then disappears.
$('.use-different-card').on "click", ->
$(".card-on-file").hide()
$(".card-fields").removeClass("hidden")
When I remove turbolinks, jQuery seems to work just fine.
I've tryied adding compatibility.coffee but I had no luck.
This is my source tree.
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require compatibility
//= require_tree .
Anything suggestion on what to try next?
The problem you're having is that your jquery isn't reloaded on page "change". Instead of wrapping your functions in a document.ready(), use the following:
$( document ).on('turbolinks:load', function() {
$('.use-different-card').on "click", ->
$(".card-on-file").hide()
$(".card-fields").removeClass("hidden")
})
Update: Also, your jquery.turbolinks is being required after Jquery.ujs! Change your requirements order. As per the gem docs for jquery.turbolinks you need your application.css file to be like:
//= require jquery
//= require jquery.turbolinks /*Notice this must be before jquery_ujs */
//= require jquery_ujs
Once you have this order corrected, you may not need to use the turbolinks:load call anymore.
I'm facing a problem since yesterday. I try to use Paloma gem (v5) to organize my javascript. But I can't see any tutorial for this, in the current version. That's not the problem, there is a good wiki about it.
But I can't use it, and I don't know why...
Application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker-fr
//= require jquery.ui.monthpicker
//= require jquery.timepicker
//= require jquery.validate
//= require jquery.remotipart
//= require redactor-rails
//= require magnific-popup
//= require selectize
//= require jquery-tablesorter
//= require jquery-tablesorter/jquery.tablesorter
//= require jquery-tablesorter/jquery.tablesorter.widgets
//= require Chart
//= require paloma
//= require_tree .
//= require bootstrap-multiselect
$(document).ready(function(){
Paloma.start();
});
My coffeeScript (it's compatible):
console.log 'hello'
Paloma.controller 'Admin/RGrids', ->
show_users: ->
alert 'it works'
And my controller admin/r_grids_controller.rb
class Admin::RGridsController < AdminController
layout 'admin'
load_and_authorize_resource :r_grid
respond_to(:html, :js)
#show_users prints results in the retention grid for a USER
##return [hash] rgrid_for_user
def show_users
rgrid_scoped = RGrid.only_askers
#show = RGridUtility.r_grid_vars(rgrid_scoped)
end
'Hello' is displayed in the console, so the script is loaded. I tried many things like remove :js in respond_to, or use different way to call the action.
Somebody can help me? :-)
Solved. Need to call Paloma.start() in my application.js with my function in r_grids.js inside the application.js
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
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'm having a problem when pushing to heroku in my rails app.
Lots of functions become undefined, because <%= javascript_include_tags %> are being included before application.js, so libraries are not loaded.
I've tried the "defer" in my script tags, but didn't work.
It's happening ONLY in production, not in my dev environment.
How can I specify Rails to load JS in my view the latest?
Any advice would be great. Thanks
CASE:
My application.js
//= require jquery
//= require jquery_ujs
//= require jquery.lockfixed
//= require jquery.base64
//= require jquery.browser.mobile
//= require masonry.pkgd.min
//= require_directory ./utils
//= require_directory ./helpers
//= require tabs
//= require pining
//= require list
//= require handlebars
//= require jquery.cookiesdirective
//= require albums
//= require landing
//= require bxslider
//= require landing/waypoints
//= require landing/animate-waypoints
//= require handlebars-truncate-helper
//= require spots
My view
<%= javascript_include_tag "call_pining_function" %>
Call_pining_function partial
drawStaticPin();
Error in Heroku
Uncaught ReferenceError: drawStaticPin is not defined
Thanks
Hmm, I still aren't completely sure about this case. I assume that
//= require pining
is the file that contains the drawStaticPin, right?
There are few options that I can see here:
First, Put your "call_pining_function" into the requires of application.js
Second, If the call_pining_function is defined after jQuery (DOM) is ready, possibly you could tie the function call to that event
jQuery(document).ready(function() {
drawStaticPin();
};
Third, Ugly but does the job assuming that the code will eventually be loaded
while (typeof drawStaticPin === "undefined");
drawStaticPin();