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
Related
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
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
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