I have rails application with baguetteBox library for image popup effect, but it works properly only after page refresh.
I know that its because of turbolinks so I installed jquery-turbolinks gem but it still doesn't work. //require jquery.turbolinks is in the right spot.
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require baguetteBox.min
//= require turbolinks
//= require_tree .
And i have this piece of code in the bottom of show view
<script>
window.onload = function() {
baguetteBox.run('.step_div');
};
</script>
to initialize the script.
Any ideas?
You need to trigger things slightly differently for turbolinks:
var myFunc = function() {
baguetteBox.run('.step_div');
};
$(document).ready(myFunc);
$(document).on('page:load', myFunc); // Classic Turbolinks
$(document).on('turbolinks:load', myFunc); // Turbolinks 5
This way, your function will be called on a standard page ready trigger, and also when turbolinks loads the page into memory without an actual page refresh.
Obviously, you only need to include the turbolinks event trigger for the appropriate version of turbolinks that you're using.
Have a look here for the other events triggered by turbolinks 5: https://github.com/turbolinks/turbolinks#full-list-of-events
For the original turbolinks, the documentation is here:
https://github.com/rails/turbolinks/#events
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 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
I'm trying to initiate a JS file when clicking on a link "link_to" in my rails app.
I ensured the the asset pipeline is working correctly by testing with
$(document).ready(function() {
alert("test");
});
and the alert popups without a problem.
However, the script only loads when I refresh after the page is loaded. I've tried the code below without any luck but as I said, it works once the page is reload.
var ready;
ready = function() {
//My JS Code
};
$(document).ready(ready);
$(document).on('page:load', ready);
I have the Turbolinks gem file complied Gem file below
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require jquery.slimscroll
//= require app
//= require zopim
//= require turbolinks
I'm sure it's something small I'm missing. I've seen examples using coffee script but I don't know enough about it to use it at this time.
Edit:
While monitoring Network under Chrome Dev tools, I noticed that none of the JS load until I hit F5 to reload the page but I don't seem to have problems with the other scripts. This might be a separate issue.
maybe try this ?
$(document).on('turbolinks:load', ready);
$(document).on('turbolinks:load', function() {
//My JS Code
})
This should work for you.
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
My rails application does not seem to be loading some javascript behavior after being sent to a page via the link_to helper. This is happening in Chrome, but not IE (which hurts me to say). I've seen Chrome not loading behavior in multiple pages for bootstrap-switch, and for some custom functions that I have in my source tree. These will work after I reload the page from Chrome, but not off of the initial link_to.
Here is my application.js:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
//= require bootstrap-switch
//= require jquery-placeholder
//= require jquery_nested_form
Is there some known limitation in how Chrome receives or renders javascript from the link_to helper? Please let me know if I can provide any additional information that will be helpful to resolve this.
I can see from your application.js that you're using turbolinks.
When using turbolinks, $(document).ready(function() { .. is ignored when clicking on internal links because the page never actually reloads in the traditional way.
You have a couple of alternatives, rewrite/restructure your JS so that it plays nicely with turbolinks (by not having page-specific JS includes, by scoping your events appropriately, etc) or you can disable turbolinks if you don't want to use it by:
removing it from your Gemfile
remove the //= require turbolinks from your application.js
remove the 2 references to "data-turbolinks-track" => true in your layouts/application.html.erb.