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.
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.
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
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 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
I think I'm missing something... probably minor but I couldn't find a solution for the past few hours. I'm beginning with websites so forgive the noob question
I'm using this library (I've tried many...)
https://github.com/bootstrap-ruby/bootstrap-editable-rails
I do everything as instructed (see steps below)
I refresh my webpage and I have no error (meaning everything has loaded), but when I click on "superuser", nothing happens. No pop-up, no error message, just nothing. I'm thinking something is missing. Maybe some javascript isn't enabled or something... Can't tell
My application.js is like this:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-editable
//= require bootstrap-editable-rails
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .
Turbolinks.enableProgressBar();
I have added the file bootstrap-editable.css to my app/assets/stylesheets folder
and changed my application.css.scss to
//= require ./bootstrap
//= require rails_bootstrap_forms
//= require font-awesome
//= require_tree .
//= require_self
//= require bootstrap-editable
I then go in my class partial and add the following "dummy" snippet of code
<td>superuser</td>
I refresh my webpage and I have no error (meaning everything has loaded), but when I click on "superuser", nothing happens. No pop-up, no error message, just nothing. I'm thinking something is missing
Thanks for your help!
I don't know if you still need an answer but try the following.
Download this https://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.1.zip ( include corresponding files to your app directories).
Add something like that in your view:
<a name='name' href="#" id="username">MyUserName</a>
Add some javascript into your application.js:
$(document).ready(function() {
$('#username').editable({
type: 'text',
url: '/edit',
title: 'Enter username'
});});
Read more details here:
https://vitalets.github.io/x-editable/docs.html