there is a way to put an input dynamically from button?
Example:
this is the form:
<%= form_for(#order) do |f| %>
.
...
<div class="field">
<%= f.label :productlist %><br>
<%= f.select :productlist, #products, :prompt => 'Select one!' %>
<%= link_to 'Add More', '#', id: 'products-link' %>
</div>
<div id="newproduct">
<p>load here the new input on Add more link</p>
</div>
<div class="field">
<%= f.label :status %><br>
<%= f.text_field :status %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
so i thinked up to ajax and a way to load a partial input into the form, but im not understanding the correct way to do this.
Thank you
In your javascript file add:
$("a#products-link").click(function(){
$.get('/partials/products_form', function(data){
$("div#newproduct").append(data);
}, 'html');
});
Essentially what is happening is that you are going to send a get request via ajax to a form in /partials/products_form or wherever you choose to keep your form partial. And then this html will be appended to whatever div/identifier you choose in this case div#newproduct.
Related
I have a model to be fill with a form, consisting of a title and a body of text. Optionally, I want the ability to submit a link as well as a part of this model. If this is filled out, it is submitted, otherwise ignored. The form would have title and body fields at top of page, for instance.
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
Now, I want to add the field for the link, but in a different location on the page (so as to indicate that it is optional).
<%= f.text_field :link %>
I tried doing this all in one partial,
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
<! insert other content here >
<%= f.text_field :link %>
</div>
<%= f.submit "Post" %>
<% end %>
But this would lead to very messy nesting of partials and I'm not sure how to get this to work correctly. Alternatively, I was wondering if it was possible to have one form_for at the top of the page, and another form_for at the bottom of the page that are somehow "synced", so that by pressing the submit button at the top, the value entered in the bottom form_for is collected and submitted as well.
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
<%= form_for(#micropost, remote: true) do |f| %>
<! somehow sync this with the other form >
<%= f.text_field :link %>
<% end %>
One option is to have an auxiliary text field for link attribute. Copy it's value to hidden variable mapping the link attribute
Assuming you are going to use jQuery,
<%= form_for(#micropost, remote: true) do |f| %>
<%= f.hidden_field :link %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
Somwhere on the same page
<%= text_field_tag 'micropost[link]', '', id: 'aux_link' %>
<script>
$(function(){
$('form').on('submit', function(){
$('#micropost_link').val($('aux_link'));
});
});
<script>
This is just an approach. Adjust code as per your form element ids.
One issue with this approach is it will be difficult to validate if link attribute is compulsory.
Just make the form_for be the root of the view
You can just use the form_for like a container div.
Then put the <input> and <button> as you want like making your normal webpage.
Then, because you want to make some inputs optional, you can do that in rails controller.
def create_or_update
params[:micropost].delete(:link) if params[:micropost][:link].blank?
# continue the task
end
This trick is useful for all optional fields like password
I found here that the canonical way to do this is to use the "form" attribute. Give the form an id, from which the field can refer back to the form, even if the field is placed outside of the form. For instance,
<%= form_for(#micropost, remote: true, html: { id: "micropost_form" }) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
We can then use fields_for to place the desired field elsewhere, linking back to the original form.
<%= fields_for #micropost do |f| %>
<%= f.text_field :link, form:"micropost_form" %>
<% end %>
I have the following view
<%= form_for #survey do |f| %>
<div class="field">
<%= f.label :title %><br>
<%= f.text_field :title %> <br><br>
<%= f.label :description %><br>
<%= f.text_field :description %><br><br>
</div>
<%= f.fields_for :survey_sections do |builder| %>
<%= builder.text_field :title, :placeholder => "Abschnittsbeschreibung" %><br>
<%= builder.fields_for :questions do |quest| %>
<%= quest.text_field :text, :placeholder => "Frage" %> <br>
<%= quest.fields_for :answers do |ans| %>
<%= ans.text_field :text, :placeholder => "Antwort" %> <br>
<%end%>
<%end%>
<%= select_tag("question_type",options_for_select([["Radio", "radio"],["Checkbox", "check"]])) %>
<% end %>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I want to render a partial in this view after selecting one of the options.
How can i do this?
Easiest way is render the partial with display:none
<div id='foo' style='display:none'>
<%= render :foobar %>
</div>
And when a user select something, show it by JS(jQuery).
$('[name=question_type]').change(function() {
$('#foo').show();
});
If you are using jQuery, then try this:
VIEW
<%= select_tag("qustion_type",options_for_select([["Radio", "radio", {:onclick => "someFunction(#{controller_path})"}],["Checkbox", "check", {:onclick => "someFunction(#{controller_path})"}]])) %>
JAVASCRIPT
function someFunction(url) {
jQuery.ajax({
url: url,
data: {some_data: "data_value"},
success: function(data) {
//data has the html code that you render in controller
}
});
}
EDIT (See Comments)
As you asked that you need to render a partial on each option select. So, for each option select you need to hit a controller method. In my example url is that controller end point(eg:- render_radio_some_controller_path).
def render_radio
render :partial => "radio"
end
After this, it will go to the success block of Ajax call and data will have the html defined in radio.html.erb. Now, you just have to use jQuery to update the desired div html with data(Eg:- jQuery("#some_div").html(data);)
The edit view page has the following dropdown:
<%= select_tag "Voiture", options_from_collection_for_select(#vehicles, :id, :model, params[:id].to_i) %>
When used, I would like to reload the page with the Vehicle chosen in the dropdown. I don't know whether to use :onchange => submit() or :action => 'edit'. Thanks.
Let's say we have a form like this(which is common for edit & new action)
and dynamically we are assigning ID to this form, hence for edit action this forms id will
Be 'edit_customer_form'
#_form.html.erb
<%= form_for(#customer, html: {id: params[:action] + '_' +'customer_form'}) do |f| %>
<div class="field">
<%= f.label :name %><br>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :vehicle_id %><br>
<%= f.select :vehicle_id,
options_from_collection_for_select(#vehicles, :id, :name) %>
</div>
<%= f.submit %>
<% end %>
Now, we want when the value in the selection box is altered the edit form(#edit_customer_form) should get submitted.
#application.js
$(document).ready(function(){
$('#edit_customer_form').on('change', '#customer_vehicle_id', function(){
$('#edit_customer_form').submit();
});
});
Here #edit_customer_form is the edit forms ID and #customer_vehicle_id is the ID of the selection box.
Check the complete code in below gist link:
https://gist.github.com/AjayROR/0a633ee493d78ff30332
I have this form:
<fieldset data-model="idea-art" class="idea-edit">
<h2>Artwork Specs</h2>
<%= form_for #idea do |f| %>
<div data-attribute="art_status" class="edit-field">
<%= f.label :art_status, "Art Status" %>
<%= f.select :art_status, Idea::ART_STATUSES %>
</div>
<div data-attribute="artist" class="edit-field">
<%= f.label :artist_id, "Artist" %>
<%= f.select :artist_id, User.artists.collect{|x|[x.full_name, x.id]}, :include_blank =>
true %>
</div>
<div data-attribute="default_size" class="edit-field">
<%= f.label :default_artwork_id, "Default Artwork" %>
<%= f.select :default_artwork_id, #idea.artworks.collect{|x|[x.dimensions, x.id]},
:include_blank => true %>
</div>
<div data-attribute="colors_offered" class="edit-field">
<%= f.label :colors, 'Colors Offered' %>
<%= f.collection_select :color_ids, Color.master_colors.order(:name), :id, :name, {},
{multiple: true}%>
</div>
<div data-attribute="base" class="edit-field">
<%= f.label :base, "Base" %>
<%= f.check_box :base %>
</div>
<div data-attribute="special_instructions" class="edit-field">
<%= f.label :special_instructions, "Special Instructions" %>
<%= f.text_area :special_instructions %>
</div>
<div data-attribute="artwork" class="edit-field">
<%= f.fields_for :artworks do |artworks_f| %>
<%= render 'artwork_fields', f: artworks_f %>
<% end %>
<p>
<%= link_to_add_fields "Click To Add Artwork", f, :artworks %>
</p>
</div>
<%= f.submit %>
<%end%>
</fieldset>
when I click submit my changes are not updated. I have tried many things and nothing seems to work. I am new to ruby and have read the RailsGuide to form helpers and I still can't quite figure it out.
Is there something I am missing?
Thanks
Do you see the request in Rails server log? If so, look for a Rollback in the log, which might indicate that ur models are invalid, perhaps due to strong parameters settings. If the request is not making it to the server, inspect for javascript errors on the page, then make sure you're not using (or intend to use) ajax requests, in which case you might need to require jquery_ujs in application.js along with csrf_meta_tag in you layout.
I'd like to have a single form that has 2 or more field-set_tags and I'd like to have a single submit button to update the changes for all field_set_tags at once, but that's not working ; if I create a form for each field_set_tag and one submit button per form, it works fine ; anyone can help? my simplified partial view _form.html.erb has the following structure
<%= form_for(#my_form) do |f| %>
<%= field_set_tag "Field Set A" do %>
<div class="field>
<%= f.label :"Configure A" %>
<%= f.check_box :ConfigA %>
<%= f.label :"Login" %>
<%= f.text_field :A_Login, {:size => 12} %>
<%= f.label :"Password" %>
<%= f.password_field :A_Password, {:size => 12} %>
<!-- more Ruby code here -->
</div>
<% end %>
<%= field_set_tag "Field Set B" do %>
<div>
<%= f.label :"Configure B" %>
<%= f.check_box :ConfigB %>
<%= f.label :"Login" %>
<%= f.text_field :B_Login, {:size => 12} %>
<%= f.label :"Password" %>
<%= f.password_field :B_Password, {:size => 12} %>
<!-- more Ruby code here -->
</div>
<% end %>
<div class="actions">
<%= f.submit "Update" %>
</div>
<!-- more field_sets and Ruby code here -->
<% end %>
I also tried this with no luck either
<input type="submit" value="Update" />
My issue was caused by a button I configured as a place holder for future use like this
<div class="field">
<%= button_to "Advanced" %>
</div>
When I removed that button, all worked fine
In a similar way, I configured 2 successive submit buttons like this
<div class="actions">
<%= button_to "Update", :type => "submit" %>
</div>
<div class="actions">
<%= button_to "Update", :type => "submit" %>
</div>
the 1st one does submit but the 2nd one generates this error
Unknown action
The action '4' could not be found for L2CircuitTestsController
2 or more successive "Advanced" buttons cause the same behavior : only the 1st one does the job and the other are eclipsed!