I am looking for the possibility to build a table in my view dynamically, depending on selection.
Currently i have 2 combox ,2 submit buttons and a text_area in my view eg.:
<%= select_tag :user_selected, options_from_collection_for_select(#user, 'id', 'lastname') %>
<%= select_tag(:rights_id, options_for_select([['Read', 1], ['Read/Write', 2], ['Read/Write/Delete', 3]])) %>
<%= submit_tag "add" %>
<%= fields_for :content do |tf| %>
<%= tf.text_area :text , :id => 'text', :cols => '100', :rows => '25' %>
<% end %>
<%= tf.submit 'Save' %>
Every time if i hit the add button, i will expand the table with my selection, but the content from the text_area shoud be unchanged.
Is this possible in rails? If yes, how can i do it?
You can use a remote form + partials, and js.rjs file will refresh the table in main window.
It seems it looks like this getting started example mixed with this ajax mini-tutorial example, both from Rails Guides.
note this, from Working with javascript:
<b>Users</b>
<ul id="users">
<% #users.each do |user| %>
<%= render user %>
<% end %>
</ul>
<br>
<%= form_for(#user, remote: true) do |f| %>
<%= f.label :name %><br>
<%= f.text_field :name %>
<%= f.submit %>
<% end %>
You have to use Javascript or Javascripts frameworks like jquery. You have to write the event on add button in javascript(or jquery)
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'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
In my new views page I have:
<% 10.times do %>
<%= render 'group_member_form' %>
<% end %>
Now this form contains the fields: first_name, last_name, email_address and mobile_number. Basically I want to be able to fill in the fields of all the forms in one click which then submits each into the database as a unique row/id.
What would be the easiest way to accomplish this?
Note: The number of times do is called from a variable. Any advice welcome, thanks!
You should have only one form (you should put only fields in the group_member_form partial). In your view you should have something like:
<%= form_tag "/members" do %>
<% 10.times do %>
<%= render 'group_member_form' %>
<% end %>
<%= submit_tag "Submit" %>
<% end %>
and in _group_member_form.html.erb you should have
<%= text_field_tag "members[][first_name]" %>
<%= text_field_tag "members[][last_name]" %>
<%= text_field_tag "members[][email_address]" %>
<%= text_field_tag "members[][mobile_number]" %>
This way, when the form submits, params[:members] in the controller will be an array of member hashes. So, for example, to get the email adress from the fourth member after submitting the form, you call params[:members][3][:email_adress].
To understand why I wrote _group_member_form.html.erb like this, take a glance at this:
http://guides.rubyonrails.org/form_helpers.html#understanding-parameter-naming-conventions.
You can also use accepts_nested_attributes_for in your model, and use fields_for on your form.
Submitting multiple forms, afaik, only javascript, if the forms are remote: true, and you run through each of them and then submit.
$("form.class_of_forms").each(function() {
$(this).submit();
});
Alternatively a more up to date approach using form_with and fields_for, without removing the form into a partial, could be written like this:
<%= form_with (url: end_point_path), remote: true do |form| %>
<% (1..5).each do |i| %>
<%= fields_for 'cart_items'+[i].to_s do |fields|%>
<%= fields.text_field :first_name %>
<%= fields.text_field :last_name %>
<%= fields.email_field :email_address %>
<%= fields.number_field :phone_number %>
<% end %>
<% end %>
<%= form.submit "Submit" %>
<% end %>
I would like to loop through data in my database inside my form. What I would like to do with the data is put it in labels and textboxes. How could I do this in rails? Would I just use a .each block to loop through it inside the form? The reason I have it in my database is because my client would like to be able to add the form field data himself.
For example here is something I would like to do:
<%= form_for :order do |f| %>
#fields.each do |field|
<%= f.label field.name %>
<%= f.text_field field.name %>
<% end %>
<%= f.submit %>
<% end %>
What the best way to accomplish something like this?
Please don't answer with a railscast :)
Thanks in advance
Yes, that will work, though you missed an end script tag on line two:
<%= form_for :order do |f| %>
<% #fields.each do |field| %>
<%= f.label field.name %>
<%= f.text_field field.name %>
<% end %>
<%= f.submit %>
<% end %>
If you need something more complex than just a label/text field pair - then you can use a partial-template and use the collection keyword:
<!-- in 'order.html.erb' -->
<%= form_for :order do |f| %>
<!-- note: each 'field' is auto-populated from the collection/partial-name, but you need to pass the form in as a local -->
<%= render :partial => 'field', :collection => #fields, :locals => {:f => f} %>
<%= f.submit %>
<% end %>
and
<!-- in '_field.html.erb' -->
<%= f.label field.name %>
<%= f.text_field field.name %>
<!-- and whatever else you want to do... -->
more on partial rendering here: http://api.rubyonrails.org/classes/ActionView/Partials.html
I am trying to hide a checkbox and assign a default value of 1 such that the submit button only shows. Here is my form. Just wondering as the proper format as I am new to rails. I think you can do this with helpers but was wondering if I can just include it in the form. Here is the form:
<% remote_form_for [#post, Vote.new] do |f| %>
<p>
<%= f.label :vote %>
<%= f.check_box :vote %>
</p>
<%= f.submit "Vote" %>
You can certainly do this, but if all you want is to set a parameter without displaying a field, what you probably want instead is a hidden field:
<%= f.hidden_field :vote, :value => '1' %>
If you really do want a hidden checkbox (maybe so you can optionally display it later using javascript?), you can do it like this:
<%= f.check_box :vote, :checked => true, :style => 'visibility: hidden' %>
You could use CSS to hide the checkbox:
<%= f.check_box_tag :vote, 1, true, :style => "display: none;" %>
But if you just want to pass a value you can just use a hidden field:
<%= f.hidden_field_tag, :vote, 1 %>
If you just want to pass the value along, use a hidden field
<% remote_form_for [#post, Vote.new] do |f| %>
<%= f.hidden_field_tag 'vote', '1' %>
<%= f.submit "Vote" %>
<% end %>