I've 2 scroll down menus like
<%= f.label :term_id, "TERM *"%>
<br>
<%= f.collection_select :term_id, Term.order(:id), :id, :name, include_blank: true %>
<br>
<%= f.label :lesson_id, "LESSON *" %>
<br>
<%= f.grouped_collection_select :lesson_id, Term.order(:name), :lessons, :name, :id, :name, include_blank: "Ders Seçiniz" %>
and the javascript code is like that
jQuery ->
lessons = $('#demand_lesson_id').html()
$('#demand_term_id').change ->
term = $('#demand_term_id :selected').text()
options = $(lessons).filter("optgroup[label='#{term}']").html()
if options
$('#demand_lesson_id').html(options)
else
$('#demand_lesson_id').empty()
I need to reset when I click to reset button. but all forms elements are cleaned except lessons group collection.
How can I manage it?
The form reset button should restore all your select's default options. But if you need something to override whatever it is overriding the reset button behaviour, here's some plain old jQuery (Sorry, but I'm not familiar with CoffeeScript).
See it at the following jsFiddle
$(function(){
// reset button click
$('#myReset').click(function(){
// cycle through each option and restore to default
$('#myForm select option').each(function(){
$(this).prop('selected', $(this).prop('defaultSelected'));
});
});
});
Related
I have a dropdown menu that allows the user to select a time period (ie: January 2018, 1st Trimester, Summer 2018, etc.). At the very bottom there's an option labelled "Other". How can I make it so that if the user selects "Other", and text-input form appears beneath that so that they can elaborate on what "Other" means? Here's my current code:
HTML:
Time Period:
<% if f.object.award.add_period? %>
<div class="time_period_<%= f.object.award.id %>" id="otherBoolID">
<%= f.select :time_period, Award::TimePeriods, {:include_blank => true}, { :class => "date_dropdown"} %>
</div>
<% end %>
<div id="boolID" <%= "hidden" %>>
<%= f.input :time_period, :label => false, placeholder: "Other (please specify)", :input_html => { :class => 'awardform' } %>
</div>
JavaScript/JQuery:
$('#otherBoolID').change(function () {
var x = document.getElementById('otherBoolID').value;
if (x == "Other") {
document.getElementById('boolID').style.display = 'visible';
}
});
Any idea what's going wrong? Currently the "other" form is hidden on page load, but doesn't become visible if you select "Other" in the dropdown menu. If it's worth mentioning, I'm working with a ruby on rails framework.
Could the issue be that the id="otherBoolID" is on the <div> rather than <select> tag?
I am new to Javascript and Jquery in Rails so apologies if something like this has been asked before. I have been stuck on this issue all day now.
I have three fields in a form, "from location," "to location," and "quantity". When the "from location" select field is changed, I'd like for:
the "to location," to change to remove the selected field in the "from location"
the "quantity" to reflect the available quantity at the "from location."
I am writing this in my edit.js.erb file for my item model.
I have given all fields different classes and am referencing the specific field by class but the .on change() is firing for all select fields.
(The variable fohInventoryItems is provided via a script block in this model's index page.)
Here's my code:
var selectedItemClass = <%=#item.id%>
(document).on('change', $('select.' + selectedItemClass + "." + 'from-select').eq(0), function() {
});
And her is my code in _form.html.erb for this model:
<%= form_for item, remote: true, format: "js" do |f| %>
<%= f.label :from_location %><br>
<%= f.collection_select :location_ids, item.locations.uniq, :id, :name, {selected: item.locations.uniq.first}, { class: "form-control #{item.id} from-select", } %><br>
<%= fields_for :line_items, item.line_items.build do |l| %>
<%= l.label :to_location %><br>
<%= l.collection_select :location, Location.all, :id, :name, {}, { class: "form-control #{item.id} to-select" } %><br>
<%= f.label :quantity %><br>
<%= f.select :quantity, (Array (1..item.quantity)), {}, { class: "form-control #{item.id}" } %>
<%end%>
<br>
<div style="text-align: center;">
<%= f.submit "Move", class: "#{item.id} submit" %><br>
</div>
<% end %>
When using on() as a delegated event handler, the second argument is used as a filter internally to check if the elements match a selector.
The documentation clearly states that the syntax is
.on( events [, selector ] , handler )
With seleector being
selector
Type: String
A selector string to filter the descendants of
the selected elements that will call the handler. If the selector is
null or omitted, the handler is always called when it reaches the
selected element.
The reason for it being a string, is that the elements will be checked against it, so it can't be another jQuery collection.
...meaning you have to change your code to
$(document).on('change', '.' + selectedItemClass + 'from-select', function() {...
I want to have a button for retweets in my web-application. When I press the button I want a form to display in order to add my own text to the tweet.
I implemented this . However I have a problem: all my forms and buttons contain the same id and class, so you can imagine that when I press a button it will display the first form with that id/class instead of the one that it has to show. How can I show the form that I have to show ?
Here are only the parts of the code that contain retweet part(the other parts are not important I think for the problem but I can post them if someone wants me to) :
<button type="buton" id="retweet-button">retweet</button>
<%= form_for(current_user.tweets.build,url: retweet_act_path, method: :post, html: { multipart: true, :class => "retweet_form" }) do |f| %>
<%= f.hidden_field :original_tweet_id, value: tweet.id %>
<%= f.text_area :content, placeholder: "Add a message to the tweet..." %>
<%= f.submit "Retweet"%>
<% end %>
And the JS:
<script type="text/javascript">
$(document).ready(function() {
$('.retweet_form').hide(); //Initially form wil be hidden.
$('#retweet-button').click(function() {
$('.retweet_form').show();//Form shows on button click
});
});
</script>
How can I show the form that I have to show when pressing a certain button ? (I guess I have to have a different ID for every button and form , but how ? )
As I understood from the code, you use one button/form pair per tweet. So that, you are able to use tweet ID to generate form ID. To connect button to appropriate form, use data-* fields.
Generation of forms and buttons on Rails side (NOTE: syntax highlight is broken):
<button type="button" class="retweet-button" data-target-form-id="<%= "#retweet-form-#{tweet.id}" %>">retweet</button>
<%= form_for(current_user.tweets.build,url: retweet_act_path, method: :post, html: { multipart: true, :class => "retweet_form", id: "retweet-form-#{tweet.id}" }) do |f| %>
<%= f.hidden_field :original_tweet_id, value: tweet.id %>
<%= f.text_area :content, placeholder: "Add a message to the tweet..." %>
<%= f.submit "Retweet"%>
<% end %>
And JS:
$('.retweet_form').hide();
$('.retweet-button').click(function() {
var formId = $(this).data('target-form-id');
$(formId).show();
});
I have a form which contains a dropdown of 3 values QUESTIONS_TYPES = {'single', 'multiple', A text}
<div class="field">
<%= f.label :question_type %><br>
<%= f.select :question_type, Question::QUESTIONS_TYPES, prompt: 'Select a question type' %>
</div>
Using Jquery, this dropdown shows other fields(in the block whose class is .answers_list) depending of the choosing value.
$(document).ready(function(){
$('#question_question_type').change(function(){
var qst_type = $('#question_question_type option:selected').text()
if (qst_type == 'Multiple' || qst_type == 'Single'){
$('.answers_list').show();
} else{
$('.answers_list').hide();
}
});
});
The thing is when I access to the form via a link:
<%= link_to 'New Question', new_question_path %>
My dropdown doesn't respond the jQuery action, once i refresh the page it does. Any suggestion?
Thanks!!
use
$( ".target" ).toggle();
see
Click here
I want to have form which shown fields based on the Type of Publications you select. I have used Single Table Inheritance (according to this [link] http://blog.thirst.co/post/14885390861/rails-single-table-inheritance) to create Publication model (base model), and subclasses (book_chapter, book_whole, conference_article, journal_article). Fields of Publications model are as follows: type, author, title, year, publication, volume, issue, page, keywords, abstract, publisher, placeofpublication, editor, seriestitle, seriesvolume, seriesissue, issn, isbn, area, url, doi.
So, based on the Type that will be chosen (for instance book_chapter), I want to have particular fields of Publications.
I handled to create dropdown list with types, but when select the type and create publications the Type record do not saved on database. This is the code for type dropdown
list
<%= f.label :type, :class => 'control-label' %>
<div class="controls">
<%= f.collection_select :type, Publication.order(:type), :id, :type, include_blank: true, :class => 'text_field' %>
</div>
</div>
Are you sure type is permited as an accessible param in your controller
def publication_params
params.require(:publication).permit(:type)
end
Are you sure the values for your options in the select are the right ones ?
Why is your collection_select containing :id
<%= f.collection_select :type, Publication.order(:type), :id, :type, include_blank: true, :class => 'text_field' %>
instead of :type
<%= f.collection_select :type, Publication.order(:type), :type, :type, include_blank: true, :class => 'text_field' %>
Regarding your second question, the answer will rely on a javascript / client side implementation.
Using jQuery you would implement something like this
# JS ($=jQuery)
# assuming your type select has id='type_select'
# assuming your fields inside your form have class 'field'
$('#type_select').change(function(event){
current_type = $(e.target).val();
$(e.target).parents('form').children('.field').each(function(el,i){
if($.inArray($(el).attr('id'), form_fields_for(current_type)){
$(el).show();
}else{
$(el).hide();
}
});
});
var form_fields_for= function(type){
{ book_chapter: [field1_id, field2_id, field3_id, field4_id],
book_whole: [field1_id, field2_id],
conference_article: [field1_id],
journal_article: [field1_id, field2_id, field3_id, field4_id, field5_id]
}[type];
};
Another solution would be to set specific classes for each fields for each of your types:
If we take the same assumptions as above, you would have rails to show a form like this:
# pseudocode (html form)
form
field1 class='book_chapter book_whole conference_article journal_article'
field2 class='book_chapter book_whole journal_article'
field3 class='book_chapter journal_article'
...
And then you would hide or show these specific classes
# JS ($=jQuery)
$('#type_select').change(function(event){
current_type = $(e.target).val();
$('.' + current_type).show();
$(e.target).parents('form').children('.field').each(function(el,i){
if(!$(el).hasClass(current_type)){
$(el).hide();
}
});
});