I got a rails app with twitter bootstrapping, I have a data table and I just want to know if I should integrate Table Sorter via Rails or should I use jQuery libs?
So I am trying to achieve something like this: http://tablesorter.com/docs/
What are your recommendations? I would appreciate if I could get some how-tos.
Thanks.
You can include jquery plugins in rails as you would normally include any js file.
Just copy the jquery.tablesorter.min.js from the archive into app/assets/javascripts and add this line to the application.js
//= require jquery.tablesorter.min
Related
I am trying to add a widget in my rails application, in which i am going to display the US states maps as given Demo here in highcharts
The app is using highcharts-rails gem of version 4.0.4, to display some other charts in the application. To use the maps, i am trying to include the js files from gem in application.js file as follows.
//= require highcharts
//= require highcharts/modules/data
//= require highcharts/modules/map
and also the JS file for loading states information in application.html.erb
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
I am able to get the state codes Highcharts.maps['countries/us/us-all'] and also constructed the data from application as required. But the map is not displaying any thing and not seeing any errors in the console also.
But when i remove the including lines from application.js file and add the Java Script files explicitly, the map is loading perfectly without any issues. The below are the two js files that i am adding in my layout.
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
Any help, why it is not loading the maps when i include the files through gem ?
Thanks in Advance.
Finally able to make it work with the gem itself, but i have to explicitly include the
//= require highcharts/modules/map
with the file that is available in http://www.highcharts.com/download for highmaps plugin, available in Highmaps-1.0.4/js/modules/map.src.js
Check the issue in github
I have a best practices question regarding one-off javascript plugins and their role in the Rails asset pipeline.
I'm new to Rails, and am working on a new project. The site template I'm using uses a large collection of js plugins for added functionality. (eq chartjs.org, ckeditor, and about 40 others) Since these are needed on a page-by-page basis, I'm not sure if I should really load them all in the application.js manifest.
Currently, I have the template's assets under the /vendor directory and only the core assets are being loaded from my application.js manifest.
Thoughts on how/where to include the plugins?
As i know that rails default added all js file include in application.js by //= require_tree . so, you can remove it and add only those file which you want to added. and if you want to run only specific function then you can use location.pathname with condition and it will work for only that specific page.
I'm switching from PHP to Ruby on Rails and I'm loving it, the only thing is I'm so used to Twitter Bootstrap for most of my designs and now I feel crippled without it, I followed some tutorials like adding bootstrap-sass and what not to my Gemfile, but I still appear to be missing important things like input-block-level I'm just curious if there is an updated version or a easier tutorial to follow? Thanks.
AFAIK, the easiest and most rails way to integrate the twitter bootstrap to rails is via
twitter-bootstrap-rails gem, they have a pretty good documentation too.
check these screen casts, and this (premium) to get an idea.
and welcome to Rails :)
To to the input-block-level in ERB do something like this
"input-block-level" => "hello_world"
Same as you, I'm coming from PHP and love RoR ;)
With bootstrap you need to import it in your manifest. Read a bit about the assets pipeline in RoR guide.
To import bootstrap, create a file in your app/assets/stylesheets directory, with the name you want, but with the extension .css.scss, and place in it the following line:
#import "bootstrap";
Also if you need to use the javascript helpers from bootstrap, you need to add the following line in your app/assets/javascript/application.js file:
//= require bootstrap
Just download the bootstrap ( CSS, JS ) file and make the updation in that file at regular interval from his official site : Bootstrap
For Bootstrap Tutorials : Click Here
Or you can refer the sample code for reference, because sometimes we dnt get the way to implement such functionality like tooltip.
I am trying to port our rails web app to ember.js (we currently do most of the work rendering views on the server side) and I was wondering how to achieve full modularization of the javascript code. So far, the plugin I liked the most was sprockets-commonjs, which automatically creates commonjs modules for all files that are named .module.js . This would solve most of our problems, except for external libraries, which would still declare globals in the code.
The only solution I can think of is to create common.js modules for each of those libraries.
E.g.: Suppose I want to be able to import Ember.js as a Common.js module. I would then create a file called vendor/modules/ember.module.js, that would contain the following:
//= require ember
module.exports = Ember;
I would then import ember_module (along with the rest of the module wrappers) to the application and use them.
//= require_tree vendor/modules
var ember = require("vendor/modules/ember");
This solution is kinda hacky, but it would improve the modularization of the code. Is there a better way to achieve the same results?
In your ember.module.js, try using //= include ember rather than require. The require directive just adds the file as a dependency; the include directive will actually include the file contents in-place. (See https://github.com/sstephenson/sprockets#sprockets-directives).
Otherwise your solution should work :)
I wanted to know if it's possible to include an external file in the application.js file so it gets combined with the rest of the .js files in the apps/assets/javascript folder
Is there a way to get the following code work in the application.js file:
//= require 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
or something :p
Why would you want to do that? The whole idea of using a CDN is not to load content from your server but other content server. If you would like it to be compiled, just download it to the app/assets/javascripts directory and require it. It is much cleaner that way.