i have https://github.com/tkrotoff/jquery-simplecolorpicker-rails and i have tried https://github.com/tkrotoff/jquery-simplecolorpicker in plain HTML and the plain HTML worked.
I had swapped the code from the HTML to the one in rails but all my jquery functions does not work at all.
The file colorselect.js
$(function(){
$('#print_colorpaper').simplecolorpicker();
});
colorpaper.html.erb
<%= f.select(:colorpaper, Print::MY_COLORS, :selected => '#fbd75b') %>
the only thing i see in rails is the drop down menu which should be transformed into a palette as i see here: http://www.taqisystems.com/fiddle/
my application.js
//= require jquery
//= require jquery_ujs
//= require jquery.simplecolorpicker.js
//= require jquery.multi-select.js
//= require twitter/bootstrap
//= require_tree .
html source of the select:
<select id="print_colorpaper" name="print[colorpaper]"><option value="#7bd148">green</option>
I have it working using the following:
Try change in your app/assets/javascripts/application.js
jQuery(document).ready(function(){
jQuery('#print_colorpaper').simplecolorpicker();
});
Related
I am trying to transform a static website to rails. At the moment I have following javascript:
$(document).ready(function() {
$('#slider').s3Slider({
timeout: 3000
});
});
in app/views/layouts/application.html.erb placed inside head tag. The script is working fine(i.e. sliding few images).
I know this is not the right place to have javascript code.
1. Could anyone help me to place this code in the right place in the assets? and
2. Will it work as it is or I will have to make changes?
Update
In app/assets/javascripts/application.js I have the following:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require welcome
//= require_tree .
aap/assets/javascripts/welcome.js is the file that now contains the above mentioned javascript code
I have couple of js files and I put them into vendor/assets/js. Then I require them in the application js file as;
//= require jquery
//= require jquery_ujs
//= require dropzone
//= require jquery.cookie
//= require toastr
//VENDOR JS BEGINS
//= require pace/pace.min
//JQuery buraya gelecek sonra
//= require modernizr.custom
//= require jquery-ui/jquery-ui.min
//= require boostrapv3/js/bootstrap.min
//= require jquery/jquery-easy
//= require jquery-unveil/jquery.unveil.min
//= require jquery-bez/jquery.bez.min
//= require jquery-ios-list/jquery.ioslist.min
//= require jquery-actual/jquery.actual.min
//= require jquery-scrollbar/jquery.scrollbar.min
//= require bootstrap-select2/select2.min
//= require switchery/js/switchery.min
//= require imagesloaded/imagesloaded.pkgd.min
//= require jquery-isotope/isotope.pkgd.min
//= require classie/classie
//= require codrops-stepsform/js/stepsForm
//= require bootstrap-datepicker/js/bootstrap-datepicker
//= require bootstrap-datepicker/js/locales/bootstrap-datepicker.tr.js
//= require bootstrap-datepicker/js/locales/bootstrap-datepicker.en.js
//= require summernote/js/summernote.min
//= require moment/moment-with-locales.min
//= require bootstrap-daterangepicker/daterangepicker
//= require bootstrap-timepicker/bootstrap-timepicker.min
//= require codrops-dialogFx/dialogFx
//= require ion-slider/ion.rangeSlider.min
//= require owl-carousel/owl.carousel.min
//VENDOR JS ENDS
at the top of the page I require jquery and jquery_ujs belongs to jquery. Right now, I load the application js files as;
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
The thing is, I have couple of js codes inside ..html.erb files, which needs the page loads first. But I would like to merge them in a js file. What I would like to do is call only jquery in the head tag and call application js files in body. But if I remove jquery gem and call it as;
<%= javascript_include_tag 'jquery.min', 'data-turbolinks-track' => true %>
Rails gives an error about jquery_ujs. Ofcourse I can add jquery_ujs there as well. But what is the best practise?
The most rails-esque way to add page specific js code to your rails app (thus avoiding loading js in every page when a library or script is only needed in one page) is to add to the very bottom of your layouts/application.html.erb file right before the closing body tag:
<%= yield :javascript %>
</body>
</html>
Then on the view that you're looking to run some snippets of javascript you should put this at the very bottom of it after all html tags have been closed. Make sure it's not within some divs or anything in that view but at the very bottom of it.
Updated referencing Fred:
<%= content_for :javascript do %>
<script type="text/javascript">
$(document).on('page:load', function() {
all your code here..
});
</script>
<% end %>
This code will now be yielded to the bottom of your layout view only loading on the specific views you need instead of being concatenated along with all other assets in your assets/js folder. I do this with all custom js that isn't application wide and it's very easy to maintain/debug.
I currently try to port this template from startbootstrap.com into my rails app. Most of it already works but the navigation bar does not change its color while scrolling.
The different colors are achieved by the creative.js file. I put this file under assets/javascript and included as in my application.js file:
//= require jquery
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require creative
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I inspected the assets with the Chrome Developer Tools and the creative.js file does not appear there. Since the other javascript files appear in the asset folder the asset pipeline seems to be working.
What do I have to change so that the creative.js file appears in my assets too?
I faced the same issue with my project where I tried to incorporate Bootstrap's creative theme.
The issue for me was that creative.js was not included at the right position (if you notice in the original theme the JS script calls are made at the end of the HTML file, after all the class and id declarations).
Your order of inclusion inside application.js is correct =>
//= require jquery
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require creative
//= require jquery_ujs
//= require turbolinks
//= require_tree .
However, there is a good chance that application.js is not included at the right spot. Ensure that you are including the files after the below code segment has ended =>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
Best of luck!
Try to delete the coffee file with the same name.
In your case creative.coffee
It worked for me!
My Jquery tabs work, but only after I refresh the page. See the images below for more information. What is causing this and more importantly, how can I solve this?
I am not getting any errors. I allready added:
$(document).ready(function(){
$("#functions").tabs();
});
This is my order of code (Ruby, javascript.js)
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require jquery-ui/tabs
//= require turbolinks
//= require_tree .
Code & View before: refresh
Code & View after: refresh
Recently I've got strange error on Rails production - some javascripts not working. Locally there is no problem - everything works perfectly, but production.
my application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require cocoon
//= require jquery.minicolors
//= require widget
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
//= require_tree .
scripts that not working - jquery.minicolors and widget(coffescript).
I've tried to add these scripts to
config.assets.precompile += %w( widget.js.coffee jquery.minicolors.js )
in production.rb, but that's doesn't work too
It's strange but if I remove
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
from application.js the rest scripts work fine
I understand this issue has been closed but I actually had the same issue recently. I fixed it by wrapping my jQuery code inside the following;
$(document).ready(
(custom JS goes here)
)
If you (or anyone in the future) has the same issue, I'd say it's cause of how Rails loads CSS/HTML and jQuery. Apparently jQuery is loaded as the head in a Rails app so it's loaded but can't be accessed after it's been loaded.
I've found a solution with help of question
I removed from application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
and keep only
//= require highcharts/highstock
highstock.js keeps in /vendor/assets/javascripts and contains necessary scripts for highcharts working