I am trying to enhance an existing Rails application using React (react-rails gem).
This app has a form built with following code:
<%= form_for #article do |f| %>
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, size: "60x12" %>
</div>
<div class="form-group">
<label><%= f.checkbox :sets_expiration_date %> Sets expiration date</label>
<%= f.date_select :expiration_date, start_year: Date.today.year %>
</div>
<button type="submit" class="btn btn-default">Create</button>
<% end %>
I want this form to have following functionalities:
When the user toggles the checkbox, the three drop-down lists for the expiration_date field shows or hides.
When the user submits, the form data is sent to the server via Ajax for validation and persistence.
When the validation fails, the relevant labels and input fields get surrounded with red border.
When the form data gets saved successfully, the form disappears and a message appears.
In my first attempt, I managed to achieve the goal but I found that I had to write vanilla HTML code a lot.
This is a disappointment for me.
Especially, I don't like to specify the name and defaultValue attributes for each <input> tag
like <input name="article[title]" defaultValue={this.props.object.title}>.
I also had to write rather long JavaScript code to create three drop-down lists for the expiration_date field.
How can I construct such a form using React efficiently? Are there any good plugins?
Related
On the edit page for this form all of the fields outside of the fields_for tag (inbox name, automatic reconciliation, and a few others not listed here) are all populating based on their corresponding db value. However, everything inside the fields_for tag are not, even though they're posting to the db just fine.
I posted :group_member_roles as an example but there are a few other fields inside their own other fields_for that are doing the same thing. It's just confusing that it will post to the db but not display on edit.
The more I read into fields_for the more I feel like I'm not using it correctly. It seems to be more inclined to populating db tables outside of the one your form is currently referencing, but I'm just trying to serialize data within the inbox table. When I look at the :group_member_roles column I want it to be an array/hash containing process true/false, action add/delete, and a string of values.
#_form.html.erb
<%= form_for(#inbox) do |f| %>
<%= f.label :inbox_name %>
<%= f.text_field :name, placeholder: "Inbox Name" %>
<%= f.label :automatic_reconciliation, "Turn on/off automatic reconciliation" %>
<div class="switch small">
<%= f.check_box :automatic_reconciliation, class: "switch-input" %>
<label class="switch-paddle" for="inbox_automatic_reconciliation">
<span class="show-for-sr">Automatic reconciliation</span>
<span class="switch-active" aria-hidden="true">On</span>
<span class="switch-inactive" aria-hidden="true">Off</span>
</label>
</div>
<%= f.fields_for :group_member_roles do |group_member_roles| %>
<h4>Group Member Roles</h4>
<%= group_member_roles.label :process, "Turn On/Off Processing" %>
<div class="switch small">
<%= group_member_roles.check_box :process, class: "switch-input" %>
<label class="switch-paddle" for="inbox_group_member_roles_process">
<span class="show-for-sr">Group Member Roles Processing</span>
<span class="switch-active" aria-hidden="true">On</span>
<span class="switch-inactive" aria-hidden="true">Off</span>
</label>
</div>
<%= group_member_roles.label :action, class: "hide" %>
<%= group_member_roles.select :action, ["Add", "Delete"], { selected: "Add" }, { class: "hide" } %>
<%= group_member_roles.label :values %>
<%= group_member_roles.text_field :values, placeholder: "1234, 1337, 1986" %>
<% end %>
Thanks in advance for any help or guidance.
The fields were being stored as a hash and the field was looking for an object to populate with so I added an OpenStruct dummy object to the fields_for to make it so. If anyone can think of a better way please let me know as this is pretty ugly code.
<%= f.fields_for :group_member_roles, OpenStruct.new(f.object.group_member_roles) do |group_member_roles| %>
I'm fairly new to Ruby on Rails and I'm building a customer database for my father's landscaping company as a pet project. I've run into a roadblock with some code.
I've got three tables interacting with each other here: Clients, Invoices and Services (nested under Invoices). In the clients table, there are prices stored for each service performed (e.g., cut, bushes, mulch). If the client doesn't receive that service, the entry is null. I've stored the prices this way because each client is charged a different set amount for a service depending on the size of their property.
When adding a service to an invoice, I want to check the service selected in the drop-down against the price set in the client table, and give an error if its null (if the customer doesn't receive that service). For example, if "Cut" is selected, I'd like to compared that to (I think) #invoice.client.cut
I'm not entirely sure where to start with this. How would you have code like this run when the submit button is clicked?
Thanks in advance for any and all help!
Here's what the form looks like in its current state:
<%= form_for [#invoice, #service] do |f| %>
<div class="control-group">
<%= f.label :name %>
<div class="controls">
<%= f.select(:name, options_for_select([['Cut', 'Cut'], ["Mulch", "Mulch"],['Bushes', 'Bush'], ['Spring clean-up', 'Spring'], ['Fall clean-up', 'Fall'], ['Snow removal', 'Snow']])) %>
</div>
</div>
<div class="control-group">
<%= f.label :category %><br>
<div class="controls">
<%= f.select(:category, options_for_select([["Maintenance", "Maintenance"], ["Seasonal", "Seasonal"]])) %>
</div>
</div>
<div class="field">
<%= f.label :quantity %><br>
<%= f.number_field :quantity %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I would add at data-attribute somewhere in the view that lists the customer's current services, possible on the label for that dropdown. You can then use javascript to verify that the option selected is available to the user without making a call to the database.
<%= f.label :name, 'data-services' => #invoice.client.services %>
Instead of checking the validity of the selected value when the user chooses it, don't even show the value in the dropdown. The user experience is different than you described, but not necessarily worse.
The architecture of querying the different kinds of services a client has should be improved by an extra model, but using the methods you already have:
<%= f.select(
:name,
options_for_select(
[
['Cut', 'Cut'],
['Mulch', 'Mulch'],
['Bushes', 'Bush'],
['Spring clean-up', 'Spring'],
['Fall clean-up', 'Fall'],
['Snow removal', 'Snow']
].select do |a|
#invoice.client.public_send(a.last.downcase)
end
)
) %>
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'm working on a mobile web app using Rails and jQuery Mobile. I've got a rails model called 'Event' and the corresponding controller and view (generated via scafolding). Now I'm working on the creation of a new Event using a form that has been generated. I'd like to slightly change this form but still be compatible with the rails model.
Here's how it looks now:
<%= form_for(#event) do |f| %>
<div class="field">
<%= f.label :priority %><br />
<%= f.number_field :priority %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
The scafolded view is using some kind of default helper class I guess. But I'd like to change the f.number_field to a jQuery mobile slider which looks like this in html:
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" />
Now, how do I combine the rails model with the jQuery slider, so that when the user clicks submit the clips_controller receives a clip model which contains the priority which has been adjusted using the slider?
Thank you in advance!
You can use range_field helper method
Instead of this:
<%= f.number_field :priority %>
Use this:
<%= f.range_field :priority, :min => 0, :max => 100 %>
I have an Exercise model, which has these columns (pseudo Ruby):
model Exercise do
string :name
calories_burned :float
end
I want that when a user adds an exercise to be able to do it in this fashion:
if previous exercises exist
show a select element with names of existing added
show a checkbox to allow adding a new one, switching the input
field to a textfield
else
show a textfield
The thing is, I don't know how I should put this in my view. Here's how the else case is handled:
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
I have something like this now:
<div class="field">
<% if #exercise_added %>
<div id="select_div">
<%= select_tag :name,options_for_select(#exercise_added) %>
<input type="checkbox" name="custom_type_checked" id="which_type">New type?</input>
</div>
<% end %>
<div id="regular_field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
</div>
In #exercise_added I have a list of names of all exercises from the database. What would be the best/cleanest way of handling this?
EDIT: For now,I have a textfield and a select, and by using Javascript, I'm changing the name of the element ( and hiding the other one ). So far, it's working, but I'd still be interested if other approaches exist.
You can check if the array #exercise_added is empty or not and show the select field or text field accordingly.
<div class="field">
<% if !#exercise_added.empty? %>
<div id="select_div">
<%= select_tag :name,options_for_select(#exercise_added) %>
<input type="checkbox" name="custom_type_checked" id="which_type">New type?</input>
</div>
<% else %>
<div id="regular_field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<%end%>
</div>
I would, by default, have the select box and a button shown, with the textbox hidden unless a variable #show_textbox is true. Something like this:
<div class="field">
<div id="select_div">
<%= select_tag :name,options_for_select(#exercise_added) %>
<%= f.submit "New Exercise" %>
</div>
<div id="regular_field" <%= hidden_unless #show_textbox %> >
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
</div>
Where I've written a helper function
def hidden_unless cond
raw "style=\"display: none;\"" unless cond
end
# this one is helpful, too
def hidden_if cond
raw "style=\"display: none;\"" if cond
end
Then, in my controller, check if the "New Exercise" button was pressed. If so, essentially set #show_textbox to true and then re-render the new form.
def create
# .....
# did we get here because the user pressed "New Exercise"?
if params[:commit].eql?("New Exercise")
#show_textbox = true
# probably some other code to replicate what happens in your #new action
render :action => new
end
# ....
end
You can check in your controller if the :name field has any text in it, and use that to override the select box.
This should work without javascript. I'd add some jQuery to replace the button with either a link or a check box, with the click handler for that connected to a function that shows the textbox, i.e. $('#regular_field').toggle();.
I didn't deal with hiding the select box. I actually think it might be better to leave that available. You could hide it using a similar method, anyways.
What if you used two forms? One form to handle the case when the exercise is in #exercise_added, and a second form to handle the creation of a new exercise. It might even boil down to the difference between a POST and a PUT, depending on what you're doing once an exercise is submitted from the drop-down list.
I'd be curious to see more of the code, as well as the controller, since it seems like this form might be nested?