I'm stacked. I'm using select2 and acts_as_taggable to tag my order model. Here is a code
<div class="field">
<%= f.label :tag_list, "TAGS" %><br>
<%= f.select :tag_list, options_for_select([['Human', 'Hs'], ['Mouse', 'Mm'], ['Yeast', 'Sc']]),{},:multiple => true, :class =>"category" %>
</div>
And also script:
<script>
$(document).ready(function() {$(".category").select2(); });
</script>
All works fine without connecting script ( with select2) but if with, it looks like working good but it sends empty strings and after submitting you didn't get any tags here.
Can anyone help?
Related
There is probably a simple solution for this, however, I couldn't find it.
I have a simple form where I have state select box & site text_field:
_form.html.erb
<div class="field">
<%= f.label :state, 'State' %><br>
<%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']] %>
</div>
<div class="form-group">
<%= f.label :site, 'Site'%><br>
<%= f.text_field :site %>
</div>
I would really like to be able to select "VIC" (a state in Australia) and then due to the fact that "VIC" was selected, the :site text_field is automatically populated with another value such as a site name.
For example: "VIC" state is selected -> "Melbourne" site is populated in the text_field on the form (in :site)
I have played around a bit with some example javascript that I have found on the web which seems to update some text on the screen when a certain value is chosen in a select box, however, I cannot seem to form an "if" argument that states: if "VIC" selected, then populate text_field of :site with "Melbourne".
Thanks in advance.
code for javascript that changes to the value selected:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<div id="text_to_be_changed"><%= #day_of_week %></div>
<%= select_tag :days, options_for_select(["Monday", "Tuesday"]), :id => "select_days" %>
<script>
$(document).ready(function(){
$('#select_days').change(function() {
$('#text_to_be_changed').html($(this).val());
});
});
</script>
You can try this:
<script>
$(document).ready(function(){
$('#select_days').change(function() {
$('#text_to_be_changed').html($(this).val());
});
// adding pre-populate data
$("#configfile_state").change(function(){
var selected = $(this).val();
if(selected == "VIC") {
$("#configfile_site").val("Melbourne");
}
});
});
</script>
I hope this help you.
You will need the javascript to "know" the relationship between "VIC" and "Melbourne", or more generally between states and their capital cities. This can be stored in a variety of ways, eg as an array or map in your js code. eg
html:
<div class="field">
<%= f.label :state, 'State' %><br>
<%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']], :id => "state-select" %>
</div>
<div class="form-group">
<%= f.label :site, 'Site'%><br>
<%= f.text_field :site, :id => "city-select" %>
</div>
js:
$(document).ready(function(){
var stateDefaultCities = {
"VIC": "Melbourne",
"NSW": "Sydney",
"WA": "Perth"
//etc
}
$('#state-select').change(function() {
$('#city-select').val(stateDefaultCities[$(this).val]);
});
});
EDIT: this solution is a bit fragile since the states are repeated in the markup and html: eg if you were to add an option to the select you'd need to add a corresponding line to the stateDefaultCities object. But it's just an example.
I am starting use Ruby on Rails and I am having a little problem. I have a form with 3 fields, this is the code:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.text_field :name, autofocus: true, placeholder: "Name" %>
</div>
<div class="field">
<%= f.email_field :email, autofocus: true, placeholder: "Email" %>
</div>
<div class="field">
<%= f.number_field :age, autofocus: true, placeholder: "Age" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
In the email field when you write something that is not an email and try to submit, the browser (chrome or firefox ) display an error saying that the field must content an #. The same happen with the age field, if a letter is entered the browser show an error saying that the field only accept numbers.
I wanna know how to make that the browser show a message when any field is empty when you try to submit. I know how to do it in cakephp so I guess it can be done here in ruby too. I already validate the fields in the model, setting the presence in true but that only works for show a message after you submit and the page reload again.
When you use something like:
f.email_field
It is generating an HTML5 input element that tells the browser it has to be a valid email. HTML 5 also has a required='required' option that can be used to prevent blank fields.
You can add it like this:
<div class="field">
<%= f.email_field :email, autofocus: true, placeholder: "Email", :required => 'required' %>
</div>
This will add required='required' to your form element. Note that in HTML5 you only need the word required in your form element, but the only way I know to add it in Rails is to use the option form I'm showing you here.
This will prevent submitting the form without that field. This works for current versions of Firefox, Chrome, Opera, and IE11. Safari will prevent the submission but doesn't indicate why. It just does nothing.
I would check this out: http://blueashes.com/2013/web-development/html5-form-validation-fallback/
You can set the HTML required attribute to true. Just add required: true to each field.
Here's what your new form will look like:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.text_field :name, required: true, autofocus: true, placeholder: "Name" %>
</div>
<div class="field">
<%= f.email_field :email, required: true, autofocus: true, placeholder: "Email" %>
</div>
<div class="field">
<%= f.number_field :age, required: true, autofocus: true, placeholder: "Age" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
Your case is pretty custom, that's why it looks pretty easy, but what you're really trying to achieve here is called 'client-side validation'.
To be really portable and user-friendly it has to be done in JavaScript. Basically this will be a script that validates the fields and outputs the corresponding error messages to the user, preventing form submission at the same time. This is almost the same that Rails does on the server side when you submit the form.
Once the problem is defined, you can approach it in one of the following ways:
Stay with Rails. Rails is initially designed to handle form validation on the server side. You can just accept the way it is, and it will yield the cleanest, shortest and the most semantic code possible. For it to be more seamless you can easily pull in some AJAX for it, which should be easy (http://guides.rubyonrails.org/working_with_javascript_in_rails.html). To user it'll look like nothing ever got submitted.
Write some custom JS yourself to handle those validations. Either on your own, or with the aid of libraries like http://jqueryvalidation.org/. This is going to be a mess, since you'll basically have to duplicate Rails server-side validation code on the client-side in a different language. And keep it in sync.
Use one of the helper libraries for Rails. E.g. https://github.com/joecorcoran/judge looks promising, but there are others to be Googled. These guys exercise the same idea: you've got server-side validations and they should be easily usable on the client-side. Certain libraries generate JavaScript automatically, others just send the form to be validated to the server behind the scenes.
If I were you, I would choose the 1st way + AJAX. Other ways would make simple matters unnecessarily complex, and instead of writing useful stuff you'll most certainly have to dive into debugging obscure JS and cryptic meta-programmed Ruby/Rails libraries.
Hope that helps!
HTML 5 has required=true option that can be used to prevent form submission with empty fields. In rails form helpers, you can use it like
<%= f.text_field :first_name, required: true %>
<%= f.email_field :email, required: true %>
I dint even understand how to search for my problem scenario in google.
Problem : When a user selects from a drop-down, the below form fields should change accordingly.
Example : If a user selects "Human" from Drop-down , then below form_fields should be shown like "age" field ,"ethnicity" field etc..
If a user selects "Event" from drop-down, below form fields should show "Date", "venue" etc..
and By default we will have "SUBMIT" button.
Can anyone tell how to achieve this ? Any help with simple_form ruby gem also would be helpful.
You can do this with some simple javascript. Lets say you have a form with the following fields
<%= f.select :some_field, %w[Human Cat], {}, {:class => 'my-select'} %>
<div class="human">
<%= f.label :age %><br>
<%= f.text_field :age %>
</div>
<div class="cat" style="display:none;">
<%= f.label :sub_species %><br>
<%= f.text_field :sub_species %>
</div>
Now add some javascript to make it dynamic
<script>
$(".my-select").change(function(){
if($(".my-select").val() == "Human"){
$(".human").css('display', 'block');
$(".cat").css('display', 'none');
}else{
$(".human").css('display','none');
$(".cat").css('display', 'block');
}
})
</script>
This is quite easy to achieve with the simple_form gem and some simple javascript.
View
<%= simple_form_for #object do |f| %>
<%= f.input :attribute_name, :collection => ['Human', 'Event'], :input_html => { :class => 'dropdown' %>
<div class="toggle human" style="display:none;">
<%= f.input :age %>
</div>
<div class="toggle event" style="display:none;">
<%= f.input :date %>
</div>
<%= f.button :submit %>
<% end %>
The key here is wrapping the fields you want to toggle in div with specific selectors.
Then we look for a change event on the dropdown field, and toggle our divs accordingly.
Javascript
$('.dropdown').change(function() {
// hide divs first
$('form .toggle').hide();
// get value from dropdown
var divClass = $('.dropdown').val().toLowerCase();
// show necessary div
$('.' + divClass).show();
});
Using this approach, you don't need to write the specific case for every value of the dropdown, but can use the lower case value of the dropdown as the selector for the div.
Here is a simple example with static markup.
I have a a partial, _form for one of my views in rails. It looks like so:
<%= form_for(#project) do |f| %>
<div class="field">
<%= f.label "Project Status" %><br />
<%= f.select :status, ["In Progress", "Cancelled"] %>
</div>
<div class="field">
<%= f.label "Capital Cost" %><br />
<%= f.text_field :capital_cost %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I'd like the "capital cost" part of the form to be greyed out unless "In Progress" is selected from the dropdown menu, without having to reload the page. Is this possible? I saw some solutions using javascript, but I'm a complete beginner and couldn't get my head around them (unfortunately I don't have the time to learn to use js before I have to finish this project). Cheers!
For this you need some JavaScript. Use an onchange event handler to monitor the <select> input for changes. Compare the input value and conditionally set/unset a disabled attribute on the #project_capital_cost input. You can use jQuery for this.
By default, Rails 3 enables jQuery by including the jquery_rails gem in your Gemfile. Assuming you have jquery_rails included in your app and your <select> and <input> tags have #project_status and #project_capital_cost IDs respectively, add the following script into your _form partial with necessary modification:
<script>
$(document).ready(function(){
if($('#project_status').val() != "In Progress"){
$("#project_capital_cost").attr('disabled','disabled');
}
else{
$("#project_capital_cost").removeAttr('disabled');
}
$('#project_status').change(function(){
if($(this).val() != "In Progress"){
$("#project_capital_cost").attr('disabled','disabled');
}
else{
$("#project_capital_cost").removeAttr('disabled');
}
})
});
</script>
EDIT:
To hide div give some id to it:
<div class="field" id="my_div">
<%= f.label "Capital Cost" %><br />
<%= f.text_field :capital_cost %>
</div>
Then replace
$("#project_capital_cost").attr('disabled','disabled'); with $("#my_div").css('display','none')
and
$("#project_capital_cost").removeAttr('disabled'); with $("#my_div").css('display','block') in script.
To grey out the input, use the HTML input tag attribute disabled.
<input disabled="disabled">
Which from Rails is
<%= f.text_field :capital_cost, :disabled => "disabled", :id => "capital_cost_input" %>
To enable it when "In Progress" is selected will require AJAX and Javascript, but there is some help from Rails.
First
<%= f.select :status, ["In Progress", "Cancelled"],
{},
"data-remote" => true, "data-url" => ..._path %>
This will set the onchange attribute for you and make the AJAX call.
Add a route to handle the AJAX call, and supply the URL for the "data-url".
In the view template for the AJAX action, write the Javascript to enable the input.
Something like
$('#capital_cost_input').removeAttr("disabled")
I decided on using bootstrap-wysihtml5-rails, which is a packaged wysiwyg editor with Twitter bootstrap built in. My question is about how to "activate" the editor inside the form which I created with the form_for helper.
I have the following form which I would like to use the wysiwyg editor in:
<%= form_for(#question) do |f| %>
<%= f.label :title, "Title" %>
<%= f.text_field :title %>
<%= f.label :content, "Content" %>
<%= f.text_area :content %> <!-- make this into wysiwyg editor -->
<%= f.submit "Create question", class: "btn btn-large btn-primary" %>
<% end %>
The instructions noted to simply add the following:
<textarea id="some-textarea" class='wysihtml5' placeholder="Enter text ..."></textarea>
<script type="text/javascript">
$('.wysihtml5').each(function(i, elem) {
$(elem).wysihtml5();
});
</script>
However, I am a bit lost about how I could toggle just my text_area section to make it into a wysiwyg. I looked into the Rails guide for form_for, but didn't see how I could insert javascript or even apply a css class to a particular field. Thanks for your help.
Add html class 'wysihtml5' to any text_area you want to implement the editor on.
<%= f.text_area :content, class: 'wysihtml5' %>
You can either paste the script inline as suggested, or put a global initializer at app/assets/javascipts/application.js:
$(function() {
$('.wysihtml5').each(function(i, elem) {
$(elem).wysihtml5();
});
})