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
Related
$(document).ready(function(){
$( 'select' ).select2();
});
When entering the dropdown,it shows two different boxes as one shows dropdown field and another one shows select 2 text suggestions.I have searched a lot.but could
.form-group
%label.cols-sm-2.control-label{:for => "company_type"}
.cols-sm-10
.input-group
%span.input-group-addon
%i.fa.fa-user.fa{"aria-hidden" => "true"}
= p.select(:company_type, User::COMPANY,{}, {:class => "form-control ",prompt: "Select Your Business"})
'nt find the exact solution.
require select2 in application.js and application.css
*= require select2 (application.css)
//= require select2 (application.js)
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.
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'm using ruby (2.0.0), rails (3.2.17), cloudinary (1.0.70), and jquery-rails (3.1.0). I'm getting this error only when the image upload tag is nested multiple levels deep. If it's only one level deep, I'm able to upload properly. The file upload that is generated is (cloudname, signature, and api key replaced with "xxxx" for StackOverflow):
<input
type="file"
name="file"
data-url="https://api.cloudinary.com/v1_1/xxxxxxxxx/auto/upload"
data-form-data="{"timestamp":1399504570,"callback":"http://localhost:8080/cloudinary_cors.html","signature":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","api_key":"xxxxxxxxxxxxxxx"}"
data-cloudinary-field="page[figures_attributes][1399504574259][images_attributes][0][asset]"
class="cloudinary-fileupload
">
Which, from what I have read seems to be correct, however I am still getting {"error":{"message":"Invalid cloud_name undefined"}} when I try a direct upload.
EDIT:
The URL that it hits when attempting to upload is https://api.cloudinary.com/v1_1/undefined/upload. This makes me wonder why the URL from the data-url attribute in the input is not being used and how this URL is generated.
I'm generating the file upload tag like this:
= f.cl_image_upload :asset
My application.js looks like this:
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require ckeditor/init
//= require cloudinary
//= require_tree ../../../vendor/assets/javascripts/.
//= require_tree .
Please let me know if you need any other information. Thanks!
The problem was that I wasn't including the cloudinary_js_config script anywhere. So I just added it to the top of the form like so:
= form_for #page, :html => { :multipart => true } do |f|
= cloudinary_js_config