I'm trying to attach a JQuery datepicker to a text field on a form, but I'm not sure how to use the icons that come with the JQuery download.
I have all of the stylesheets in my app/assets/stylesheets folder and there is a subfolder called images which I have also put in the stylesheets folder. I saw a different StackOverflow post saying that I shouldn't put those images into my app/assets/images folder.
Then in my .coffee file I have
$ -> $('.datepicker').datepicker({
buttonImageOnly : true,
buttonImage : "calendar.gif",
showOn : "button"
})
The problem is that I don't have a file called calendar.gif. I've seen a lot of examples for buttonImage and all of them reference files that I don't have. What I do have is several .png files that seem to have all of the icons for the theme in them. Is there something else that I am supposed to download or am I putting the big .png file in the wrong place?
I have tried so many different values for buttonImage that I wont bother to list them all. Here is a selection of stuff I've tried:
ui-icon-calendar
images/ui-icon-calculator.png
images/.ui-icon-calculator.png
images/ui-icon-calculator
Any help is greatly appreciated.
This is how I load my datepicker:
_form.html.haml
.row
.span16
= normal_div_if #purchase_order.errors[:date].empty? do
= f.label :date, "Date, class: "compulsory"
.input
- if #purchase_order.new_record?
= f.text_field :date, id: "datepicker", class: "small"
- else
= f.text_field :date, id: "datepicker", class: "small", value: l(#purchase_order.date)
global.js.coffee.erb (my custom javascript)
$ ->
# Initiate date picker
$("#datepicker").datepicker({dateFormat: "dd-mm-yy", changeMonth: true, changeYear: true, showOn: "button", buttonImage: "<%= asset_path('calendar.png') %>", buttonImageOnly: true});
I put my calendar image is at assets/images/calendar.png
You can get the calendar image at http://www.famfamfam.com/lab/icons/silk/ for free.
I think you're asking about using the datepicker field with the icon trigger. This variant is demonstrated on this page:
http://jqueryui.com/demos/datepicker/#icon-trigger
If this is the case, it appears that the icon image is not an asset that is included with jQuery UI. You will need to create or find a calendar icon.
Related
I am trying to implement a dropdown list in a simple_form but the collection of emails appears behind the main box. See image below:
I have already tried to play with z-index but failed. I have also tried to add some javascript code according to select2 documentation regarding common problems (https://select2.org/troubleshooting/common-problems ) and also failed.
Ruby slim code is:
.reveal id="doubt-material-#{material.id}" data-reveal=true
= simple_form_for [:student, trail, component, material, material_student, doubt], html: { id: "doubt" }, remote: true do |f|
= f.input :recipient, :collection => %w[contato#witseed.com suporte#witseed.com], label: "#{t 'students.materials.index.questions.form_send_email'}", include_blank: "#{t 'students.materials.index.questions.form_blank_line'}"
javascript:
$('#select2-doubt_recipient-container').select2({
dropdownParent: $('#doubt-material-#{material.id}')
});
Html is:
Does anyone have any idea of whats is going on ?
Thx.
I'm creating a leave management app, and I need to input multiple date into a field from calendar (jquery ui datepicker or something like that).
I've tried gem 'multi-dates-picker-rails', but it's not working.
Would you give a solution? Thank you.
You can use below jquery library file
http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/
Javascript
https://raw.githubusercontent.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js
CSS
https://raw.githubusercontent.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css
include these file into assets
In html
<%= text_field_tag :route_dates, nil, class: "gui-input", placeholder: "Select date" %>
coffescript
date = new Date()
$('#route_dates').multiDatesPicker
addDates: [date, date]
dateFormat: 'dd-M-yy'
I am using tinymce-rails gem for Tinymce and I want to add custom menu option. Right now I am doing what is suggested in the readme of gem like:
<%= f.input :content , :label => false , :placeholder => 'Content', input_html: {class: "tinymce"} %>
<%= tinymce %>
I am using simple-form.
I want to add a drop-down in the editor with a bunch of options (I have an array of names) and when user clicks on an option then the selected name should be inserted in the view of editor. And those names will be dynamic.
I tried to pass many options to the initialiser tinymce but unable to get the result.
Rather than using the default initiator from the gem you could initiate tinymce manually and create the menu item at the same time:
http://www.tinymce.com/tryit/menuitem.php
Something like this:
<script type="text/javascript">
tinymce.init({
selector: '.my-class textarea',
toolbar: "styleselect | bold italic | mybutton",
setup: function(editor) {
<% #my_items.each_with_index do |name, index| %>
editor.addMenuItem('<%= name %>', {
text: '<%= name %>',
context: 'tools',
onclick: function() {
editor.insertContent('<%= name %>');
}
<%= index == (#my_items.count - 1) ? '});' : '}),' %>
< % end %>
});
</script>
We use a ternary operator to choose the correct closing tag based on the index of the names.
Theoretically you can also do this in the config/tinymce.yml file, but due to the dynamic nature it's not really plausible.
Something else you may want to look into is passing the menu to the activeEditor like:
tinyMCE.activeEditor.controlManager.get('my_menu')
I have an submit_tag or input button, however you wanna call it, but I can't get the Text + Font-Awesome icon to work together.
I tryied like this
%input{type: "submit", name: "A", "data-theme" => "b"}
%i.icon-time
= "Finish"
But the icon and the text are outside the input tag( ... )
I tryied to use
= content_tag :input, type: "submit", name: "A", "data-theme" => "b" do
%i.icon-time
= "Finish"
but the same problem, the %i was left outside.
with button_tag it looks good, but the content is not submitted to the controller. ( maybe because the html tag is button and not input )
How can I get this working?
Check your console for any errors. I feel like you may just have a css problem. If the button tag works for you, you could easily add a jquery fix.
$('button').click(function() {
$('form').submit();
});
From what I can see that is the only fix for nesting content inside of a form submit.
P.S. You don't have to write = "Finish", you could just write Finish!, HAML will insert it as plain text wither way.
In the application.html.haml I have the following
= javascript_include_tag "application"
= javascript_include_tag "disable_ajax"
In the application.js
//= require jquery.mobile-1.3.0
In the disable_ajax.js
$( document ).bind( 'mobileinit', function(){
$.mobile.ajaxEnabled = false; // Here is where I fix the problem
});
The key is to include the jquery mobile first
I'm using Bootstrap-sass and formtastic in my Rails application, and I'm not sure why the bootstrap-typeahead feature isn't working.
Form partial:
<%= f.input :tag, :input_html => { :'data-provide' => "typeahead", :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]' } %>
application.js manifest:
//= require bootstrap-typeahead //typeahead is correctly loaded, checked with firebug
result HTML source code:
<input :data-minLength="2" data-provide="typeahead" data-source="["hello", "hellow", "heaven", "helo", "herr"]"
In the end, I will need to customize typeahead to get the performance I want, but even this simple javascript isn't working for some reason. I cant find anything wrong with the code. Could anyone help me?
UPDATE:
I tried it in the javascript way as follows:
<script> //call typeahead
$(function() {
$('input#type_ahead').typeahead({
'source' : ["hello", "heaven", "heythere"]
});
})
</script>
<%= f.input :tag_list, :input_html => { :id => "type_ahead" }, %> //input tag
And still it seems like typeahead fails to work. i.e) typing in "he" does not get me a dropdown of those three items in the above array. Does anyone have an idea?
I think you need to set html_safe for:
{ :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]'.html_safe }
Have you called the typeahead() method when your page loads? You need to do something like this;
$(function() {
$('input').typeahead();
})
You'll need to assign a class or id to your input to bind the typeahead to it specifically (Rails probably has assigned an id to it automatically, I'm presuming you've omitted it specifically)
$(function() {
$('input#my-tag-field-with-a-cool-typeahead').typeahead();
})
edit:
The following worked for me. It'll take a bit of modification to the rails part to fit your situation, but this definitely works.
<script>
$(function() {
$('input#type_ahead').typeahead()
}
</script>
<%= text_field_tag :test_type, '', data: {provide: 'typeahead', source: "['hello','heythere','heaven']"} %>