I am having a text_field_tag in rails.
<%=text_field_tag 'promocode_expiration','',class: "promoExp form-control",id: "datetimepicker1",size: 10%>
On click of this text_field i wish to open a datetimepicker, to add date to the field.
How can i achieve it? Can anyone help please? thank you in advance.
You need to add this two line :
gem 'momentjs-rails', '>= 2.9.0'
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.37'
Then, You need to do :
$ bundle
Then, Add the following to your JavaScript manifest file (application.js):
//= require moment
//= require bootstrap-datetimepicker
And, modify your application.css and add :
*= require bootstrap
*= require bootstrap-datetimepicker
And Lastly, In your view file :
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
This had worked for me.
You need to add the jquery datetimepicker gem to add this functionality. Here is the link: https://github.com/Envek/jquery-datetimepicker-rails
first you need to add datapicker Gem into your Gemfile
gem 'bootstrap-datepicker-rails'
run bundle install
Add this line to app/assets/stylesheets/application.css
*= require bootstrap-datepicker
Add this line to app/assets/javascripts/application.js
//= require bootstrap-datepicker
in view just paste html code
<input type="text" data-provide='datepicker' >
or
<input type="text" class='datepicker' >
<script type="text/javascript">
$(document).ready(function(){
$('.datepicker').datepicker();
});
</script>
Just want to provide an alternatice gem, which doesn't have any other dependency;
gem 'laydate-rails'
https://github.com/AlbaHoo/laydate-rails,
it's working well.
Related
After install CKedit dont work. I used the guides - https://github.com/galetahub/ckeditor
I've tried everything but it does not work
config/initializers/assets.rb
`Rails.application.config.assets.precompile += %w(ckeditor/config.js)`
config/initializers/assets.rb
//= require ckeditor/init
routes.rb
mount Ckeditor::Engine => '/ckeditor'
ActiveRecord + carrierwave
gem 'carrierwave'
gem 'mini_magick'
rails generate ckeditor:install --orm=active_record --backend=carrierwave
everything tried, but anyway dont work, help
Here is simple code try this .No need any gems
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Full page editing with Document Properties plugin</title>
<script src="https://cdn.ckeditor.com/4.11.2/standard-all/ckeditor.js"></script>
</head>
<body>
<div class="container">
<textarea cols="80" id="editor1" name="editor1" rows="10">
</textarea>
</div>
<script>
CKEDITOR.replace('editor1', {
fullPage: true,
extraPlugins: 'docprops',
// Disable content filtering because if you use full page mode, you probably
// want to freely enter any HTML content in source mode without any limitations.
allowedContent: true,
height: 320
});
</script>
</body>
</html>
I am using AngularJS and Rails, and followed http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/ and several other tutorials to get a very simple "Hello World" example up and running on my desktop. The problem is, when I deploy it to a server, none of my code based on Angular works anymore. Instead, I get a Uncaught ReferenceError: require is not defined error in my console.
I realized that part of my problem is that the browser doesn't know what to do with the 'require' function calls, which makes sense so I installed Browserify using browserify-rails. However, it still does not work on the server like I would expect and I get the same error.
Link to the live site: Link
Here's my application.html.erb (simplified):
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>ShibaInu</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
<%= csrf_meta_tags %>
</head>
<body ng-app="shibaInu">
<div class="container">1 + 2 = {{ 1 + 2 }}</div>
<div class="container">
<%= yield %>
</div>
</body>
</html>
index.html.erb:
<div ng-view=""></div>
home.html.erb (rendered inside the container):
<h1>The Home View!</h1>
<ul>
<li ng-repeat="thing in things">
{{thing}}
</li>
</ul>
home.js:
angular.module('shibaInu')
.controller('HomeCtrl', function ($scope) {
$scope.things = ['Angular', 'Rails 4.1', 'Working', 'Together!!'];
});
app.js:
angular
.module('shibaInu', [
'ngRoute',
'templates'
]).config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
$locationProvider.html5Mode(true);
});
application.js
//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-route
//= require angular-resource
//= require angular-rails-templates
//= require bootstrap-sprockets
//= require ng-app/app.js
//= require_tree ../templates
//= require_tree .
I was doing several things wrong, but I'll try to summarize:
I am minifying JS on my server deployment like a good boy, but I was not writing minification-safe JS. See below for my fixed JS.
This wasn't specified in my original post, but I was not using the angularjs-rails gem like I thought I was. I added this to my project.
Related to 2 above, in my initial post I had used bower to install angularjs like the documentation recommends. For my solution, I took this out because it was just making things messy for my purposes.
New home.js:
angular.module('shibaInu')
.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.things = ['Angular', 'Rails 4.1', 'Working', 'Together!!'];
}]);
New app.js:
angular
.module('shibaInu', [
'ngRoute',
'templates'
]).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
$locationProvider.html5Mode(true);
}]);
In a Rails 4.1 app, I have a collection select that is loaded from a hash. I would like to use the select2 boostrap styling, but it doesn't seem to be working.
I have included the select2-rails gem, and updated application.js and application.css as per the instructions.
gem 'select2-rails'
//= require select2
*= require select2
*= require select2-bootstrap
The collection_select is loaded from a constant on the model. I don't think this is especially relevant to the issue, but added it here in case it helps someone.
FLASHCARD_TYPE = {"verb" => "Verb Conjugation",
"name" => "Word",
"number" => "Number",
"quiz" => "Quiz"}
Rails view
<div class="form-group">
<%= f.label :card_type, :class => "col-sm-2 control-label" %>
<div class="col-sm-2">
<%= f.collection_select(:card_type, Flashcard::FLASHCARD_TYPE, :first, :last) %>
</div>
</div>
app/assets/javascripts/application.js
$(document).ready(function(){
$("#flashcard_card_type").select2();
});
The rendered html shows the select2 javascript, and the select shows as:
<div class="form-group">
<label class="col-sm-2 control-label" for="flashcard_card_type">Card type</label>
<div class="col-sm-2">
<select id="flashcard_card_type" name="flashcard[card_type]">
<option value="verb">Verb Conjugation</option>
<option value="name">Word</option>
<option value="number">Number</option>
<option value="quiz">Quiz</option></select>
</div>
</div>
How can this to work properly?
In fact I would also like the option to have a site-wide default for all selects via class, then the ability to override styling by individual id.
I thought this would work as site-wide for all selects, but it also does nothing.
$(document).ready(function(){
$("select").select2();
});
EDIT
As recommended by #San I checked the Javascript console, and got
Uncaught TypeError: undefined is not a function
This the code it failed on
$(document).ready(function(){
$("#flashcard_card_type").select2();
});
EDIT 2
Full application.js file
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-markdown
//= require select2
//= require_tree .
$(document).ready(function(){
$("#flashcard_card_type").select2();
});
EDIT 3
jQuery is finding the element OK
$(document).ready(function(){
debugger;
console.log($("#flashcard_card_type"))
$("#flashcard_card_type").select2();
});
log
[select#flashcard_card_type, context: document, selector: "#flashcard_card_type", jquery: "1.11.1", constructor: function, toArray: function…]
0: select#flashcard_card_type
context: document
length: 1
selector: "#flashcard_card_type"
__proto__: Object[0]
EDIT - What I have tried
removed turbolinks
added the javascript to the page
deleted cache, restarted rails
What I have found
jQuery can find the tag
The select2 library is loaded via the network tab in the js debugger
Any ideas?
Just wondering. Did you run bundle install after adding the gem to the Gemfile?
If you did, the last thing to check is to make sure select2 JavaScript file is loading before your block to use it. Verify that by doing view source on the page and make sure select2.js is listed before application.js file (assuming you are in dev mode).
I cannot get the galetahub ckeditor gem to work with Rails 4 for me. I searched for any problems online but cannot find any. I'm following the instructions exactly.
I include gem "ckeditor" in my Gemfile
I include gem "carrierwave" and gem "mini_magick"
I run rails generate ckeditor:install --orm=active_record --backend=carrierwave
I run rake db:migrate
Inside application.rb I include config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
Inside routes.rb I have mount Ckeditor::Engine => '/ckeditor'
I'm using SimpleForm so I paste the following ERB <%= f.input :description, as: :ckeditor %> in my view.
And I think that's it. But my text area does not convert to a CKeditor area for some reason.
STEP 1: Add gem 'paperclip' and gem "ckeditor" in your gemfile.
STEP 2: Bundle Install.
STEP 3: rails generate ckeditor:install --orm=active_record --backend=paperclip
STEP 4: Place config.autoload_paths += %W(#{config.root}/app/models/ckeditor) in application.rb
STEP 5: Place mount Ckeditor::Engine => "/ckeditor" if not present in routes.rb already and run db:migrate
STEP 6: Open application.html.erb and place this <%= javascript_include_tag 'ckeditor/ckeditor.js' %> in header.
STEP 7: Place this in footer(above the body tag) in application.html.erb
<script type="text/javascript">$(document).ready(function() {
if ($('textarea').length > 0) {
var data = $('textarea');
$.each(data, function(i) {
CKEDITOR.replace(data[i].id);
});
}
});</script>
STEP 8: Restart the WEBrick SERVER.
That's it.
Else
Download the CKEditor Zip file, extract the files and place them in the sub directory “javascripts/ckeditor”, add the main JS file to the layout..
javascript_include_tag 'ckeditor/ckeditor.js'
Place this in footer(above the body tag) in application.html.erb
<script type="text/javascript">$(document).ready(function() {
if ($('textarea').length > 0) {
var data = $('textarea');
$.each(data, function(i) {
CKEDITOR.replace(data[i].id);
});
}
});</script>
I have the same problem using rails 4 and apparently the problem is that the form helper
form.cktext_area
Or in your case
f.input :description, as: :ckeditor
it's not generating what it supposed to generate, and you don't have to load the editor manually, the only thing you need to do is to is to add the class 'ckeditor' to your textarea and it will load automatically, like this:
f.cktext_area :body, :class => 'ckeditor'
Meanwhile the Galetahub gem has been updated, but it has to be updated in your app manually. Read the github page: https://github.com/galetahub/ckeditor.
ajkumar basically answered the question well already, but if you are still lost, all you need to do is download the js file, include it in your html, have a script snippet included in the HTML to activate ckeditor on a certain textarea tag ID, and then change the class of the "textarea" tag you want to change to ckeditor. Quick sample below
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
The galetahub gem is currently broken on Rails 4. This one is working fine though: https://github.com/tsechingho/ckeditor-rails
In case you are having trouble making it work with active admin, make sure to put this:
config.register_javascript 'ckeditor/ckeditor.js'
config.register_javascript 'ckeditor/init.js'
Into config/initializers/active_admin.rb
I'm trying to use a bootstrap-datepicker for my RoR application, specifically this one.
I've downloaded the js file and put it in the assets/javascripts folder
then I made a single view in order to make it work in the simplest way possible, this is what it has
<input type="text" value="02-16-2012" class="datepicker">
<script>
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
</script>
It naturally shows the textfield with "02-16-2012" in it, but it doesn't make the little calendar to pop up at click. Any ideas what I'm missing?
Here's what my application.js file has:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
And what my application.css flie has:
*= require_self
*= require_tree .
*= require bootstrap_and_overrides
*= require bootstrap
The console displays 2 errors
Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:3000/assets/default.css
Uncaught TypeError: Object [object Object] has no method 'datepicker' test:113
Also the output for console.log($('.datepicker')) is:
[input.datepicker, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: ".datepicker", jquery: "1.9.1", constructor: function…]
Your jQuery selector is missing a dot (.), you need to add a dot to capture all the elements having datepicker as class:
<input type="text" value="02-16-2012" class="datepicker">
<script>
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
</script>
You may want to "secure" your datepicker deployment on only inputs having datepicker class:
$('input.datepicker').datepicker({ # match every input having 'datepicker' class
format: 'mm-dd-yyyy'
});
Maybe try the following:
$(document).ready(function() {
$('.datepicker').datepicker();
})
Try adding the datepicker css.
The required markup from the documentation (specifically, you need to add the span.add-on and i.icon-th):
<div class="input-append date datepicker" data-date="12-02-2012"
data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
To get the CSS and Javascript properly packed in rails assets pipeline, I recommend you to use this gem: https://github.com/lubieniebieski/bootstrap-datetimepicker-rails