$(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)
Related
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 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
$.noConflict() was added to the application.js in rails 3.2.12 main app to solve the conflict between jquery and bootstrap. However it is not working as expected. Here is the application.js:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require bootstrap
$.noConflict();
When clicking add_more_contact link on the new customer form, there is an error in firebug:
ReferenceError: add_fields is not defined
add_fields is a js function defined in application.js:
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).parent().before(content.replace(regexp, new_id));
}
The calling of add_fields is done through a method in application_controller.rb:
def link_to_add_fields(name, f, association)
new_object = f.object.class.reflect_on_association(association).klass.new
fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
render :partial => association.to_s, :locals => {:f => builder, :i_id => 0}
end
link_to_function(name, "add_fields(this, \"#{association}\", \"#{j fields}\")")
end
The code was working before bootstrap. What's wrong with the use of noConflict()? Do we need to add noConflict() to /views/layouts/application.html.erb as well? thanks for help.
UPDATE:
Here is the header of new customer page:
There is no conflict between jquery and bootsrap, contrary, jquery is a requirement for bootstrap to work.
But there is conflict between jquery-ui and bootstrap, which has been mitigated by a project at http://addyosmani.github.io/jquery-ui-bootstrap/ .
Anyway, I think the above code should work without calling noConflict.
I am able to generate the charts using lazy highcharts but i want those charts to exported as images , here is my code which I am using to generate the charts
#fields= ReportHistory.all_history
#h = LazyHighCharts::HighChart.new('graph') do |f|
f.chart(:renderTo => 'container', :zoomType => 'x',:spacingRight=> 20)
f.title(:text => 'Reports')
f.xAxis(:title=>{:text => 'Days'}, :categories =>#fields.map{|x|x.Date}.last(limit=15))
f.yAxis(:title=>{:text=> 'Jobs_count', :type =>'integer' ,:max => 5000000})
f.series(:name =>'jobs_count', :data=> #fields.map{|x| x.jobs_count.to_i }.last(limit=15))
f.export(:type=> 'image/jpeg')
end
and in my view I to show the chart I have this
<%= high_chart("my_id", #h) %>
I want to have the effect like here where I can download the chart image using the export button.
First, you need to ensure that the export module is available and loaded by your view:
<%= javascript_include_tag "vendor/highcharts/highcharts.js" %>
<%= javascript_include_tag "vendor/highcharts/modules/exporting.js" %>
Second... there's nothing to do. As soon as the exporting modul is loaded, it will add the menu to export your graph.
Notes:
You may need to adapt the paths depending on your setup.
The exporting.js is part of the package you download from Highcharts.
You can add/update the following in your application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/modules/no-data-to-display
//= require highcharts/modules/exporting
If you want also updated vendor assets of highcharts, you can run:
rake highcharts:update
What did I do wrong in this tutorial: https://github.com/grosser/simple_auto_complete
Here are my scripts by the way:
First I put this in my users_controller.rb
autocomplete_for :user, :username, :limit => 15, :order => 'created_at DESC'
In my routes.rb
namespace :profile do
resources :users, :only => [:index] do
collection do
post "search"
get "autocomplete_for_user_name"
end
end
In my application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.autocomplete.js
//= require jquery.js
jQuery(function($){//on document ready
//autocomplete
$('input.autocomplete').each(function(){
var input = $(this);
input.autocomplete(input.attr('data-autocomplete-url'),{
matchContains:1,//also match inside of strings when caching
// mustMatch:1,//allow only values from the list
// selectFirst:1,//select the first item on tab/enter
removeInitialValue:0//when first applying $.autocomplete
});
});
});
In my views (app/views/profile/messages/compose.html.haml)
%div#page-info
%span#title
Compose
%span#desc
Compose a new Message
= form_for :message, :url => send_message_profile_messages_path do |message|
%label{:for => "friend"} To:
%br
=message.text_field :auto_user_name , :class => 'autocomplete', 'data-autocomplete-url'=> autocomplete_for_user_name_profile_users_path
%script{:type => "text/javascript"}jQuery(function($){//on document ready $('input.autocomplete').each(function(){var $input = $(this);$input.autocomplete($input.attr('data-autocomplete-url'));});});
//= collection_select(:message, :friend_id, #friends, :id, :username)
%br
%label{:for => "message"} Body:
%br
= message.text_area :message
%br
= message.file_field :attachment
%br
= submit_tag "Send", :confirm => "Are you sure?"
I am trying to autocomplete the users using their username (s)
Note: I had also installed the gem and I think there's no problem about that.
What am i doing wrong?
In view
remove the comment //on document ready from script, as it is all in single line I think it is commenting the whole line including js code.
or use alternate formatting
:javascript
//on document ready
jQuery(function($){
$('input.autocomplete').each(function(){
var $input = $(this);
$input.autocomplete($input.attr('data-autocomplete-url'));
});
});
add //= require_self to application file for adding its own js code.
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.autocomplete.js
//= require jquery.js
jQuery(function($){//on document ready
//autocomplete
$('input.autocomplete').each(function(){
var input = $(this);
input.autocomplete(input.attr('data-autocomplete-url'),{
matchContains:1,//also match inside of strings when caching
// mustMatch:1,//allow only values from the list
// selectFirst:1,//select the first item on tab/enter
removeInitialValue:0//when first applying $.autocomplete
});
});
});
Also try not to have white spaces between require.
rails warning in application.js says
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
I have been using this autocomplete it works great for me
https://github.com/crowdint/rails3-jquery-autocomplete