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
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 am using a Rails app and am trying to get a select field to work properly.
I currently have in my _form.html.erb:
<%= form_with(model: rec, local: true) do |form| %>
<div class="field">
<%= form.label :description %>
<%= form.text_field :description, id: :rec_description, :size => 100 %>
</div>
<div class="field">
<%= form.label :list_id %>
<%= form.select 'list_id', options_for_select(#lists.collect{ |u| [u.name, u.id] })%>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
However, when I go to my edit view, the select field automatically defaults to the first choice in the field. I'd like it to remain what it was previously. Otherwise, the user will have to go back each time and change it.
I tried
<%= form.select 'list_id', options_for_select(#lists.collect{ |u| [u.name, u.id] }, :selected => form.list_id %>
Howevever, I get an error saying: undefined method `list_id'
How should I address this?
I'm attempting to integrate the "Dante" WYSIWYG text editor into my Rails project. I have it installed and displaying on the screen. See screenshot: https://i.imgur.com/lLnEc7n.png
However, in my Rails app I have users that have_many stories. I'd like to use this editor to allow users to create these stories. I need to wire the editor and the form together basically, but I have no idea how to go about doing that, as I've never done something like this before. Would anyone mind giving me some tips please?
Documentation for editor is here: https://github.com/michelson/Dante
Current page:
<%= simple_form_for #story do |f| %>
<%= f.input :title %>
<%= f.input :subtitle %>
<%= f.input :content, :id => "editor" %>
<%= f.button :submit %>
<% end %>
<hr>
<div id="editor">
<h1 id="dante-editor">Click Me Once. Your Title Goes Here.</h1>
<h2>Tell us about your favorite backpacking adventure. This might also be a great place to add a picture.</h2>
<p>Simply replace and highlight any text here to add text. Press "Enter" to add more text or add images. Click on the image to add a caption. It's easy once you get the hang of it, just play around with it for a minute.</p>
</div>
<hr>
<script type="text/javascript">
editor = new Dante.Editor(
{
el: "#editor",
upload_url: "/images.json", //it expect an url string in response like /your/server/image.jpg or http://app.com/images/image.jpg
store_url: "/save" //post to save
}
);
editor.start()
</script>
<%= simple_form_for #story do |f| %>
<%= f.input :title %>
<%= f.input :subtitle %>
<%= f.input :content, :id => "editor" %>
<%= f.button :submit %>
<% end %>
Put the div inside of your form and make it hidden field
into like this
<%= simple_form_for #story do |f| %>
<%= f.hidden_field :title %>
<%= f.hidden_field :subtitle %>
<%= f.hidden_field :content, html: { id: "content"} %> // Use 'id' in your content field and match it in your editor div. Use data field data-field-id="content"
<div id="#editor" data-field-id="content">
<%= #story.cotent.try (:html_safe) %>
// #story is your instance variable and .content is db column from story
</div>
<%= f.button :submit %>
then use jquery to bind the editor content in content field which is
$(document).ready(function(){
$("#editor").bind("input properchange", function(){
$("#story_" + $(this).attr("data-field-id")).val($(this).html())
});
});
NOTE: It only save the text content not the image
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);)
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.