I have created a form, which has a field which onclick() leads to opening up of a pop up (Invite Importer).
In this pop up, the customer has to input certain information and when it is inputted, I want all the information to be saved and email to be triggered with the inputted email. All this should happen when I click on submit (shown in below image as "Speichern").
How would I do it?
I have thought about creating 2 forms. One popup and the other base, but the submit button would lead to both of them being submitted.
how do you i save and submit email with pop up without the other form being submitted.
Make sure the html for the second form is not inside the main form. That will cause issues. You also probably want the modal form to be remote: true so that it will be submitted via AJAX. Instead of:
<%= form_for #model do |form| %>
...
<%= form.text_field :foo, onclick: 'openEmailModal()' %>
<div class="modal etc" id="email-modal">
<%= form_for #email do |form2| %>
...
<% end %>
</div>
<% end %>
You will have:
<%= form_for #model do |form| %>
...
<%= form.text_field :foo, onclick: 'openEmailModal()' %>
<% end %>
<div class="modal hide etc" id="email-modal">
<%= form_for #email, remote: true do |form| %>
...
<% end %>
</div>
In your views you can create a file named create.js.erb for example that would do something like:
closeEmailModal(); // this is just straight javascript
$('#notices').html("<%= escape_javascript(render 'my_partial') %>"); // reuse html your partials in JS
$('#notices').html("<%= j(render 'my_partial') %>"); // or use j (it's an alias for escape_javascript)
alert('I did stuff!');
Related
I'll try to ask this as clearly as I can. I'm doing a Udemy course and we are using nested fields to take in data. The form renders a single nested field initially and then there is a link to add additional fields. This all works and there are no errors in the console. If i put something in the first nested field, and add two more nested fields, only what was entered in the last two nested fields gets saved. When I look at the final result after saving, the first item is not there. I'm sure this has to do with how I'm rendering the initial field, but I can't figure out what it is. Both the initial render and the link_to_add_nested are using the same partial file.
Screenshot of the form
Code from _form.html.erb:
<div>
<%= form_with model: #technologies do |form| %>
<%= render partial: 'technology_fields', :locals => { :form => form } %>
<% end %>
</div>
<div>
<%= link_to_add_nested(form, :technologies, '#Add-Technology', partial: 'technology_fields') %>
</div>
<div class="form-group">
<%= form.submit "Save Portfolio Item", class: 'btn btn-primary btn-block'%>
</div>
<% end %>
</div>
Code from the partial _technology_fields.html.erb:
<div class="form-group nested-fields" id=Add-Technology>
<%= form.label :name %>
<%= form.text_field :name, class: 'form-control' %>
<%= link_to_remove_nested(form, link_text: 'Remove Item') %>
</div>
I can add code from the models and controller if needed, but as the form is working with the dynamically added nested fields, I don't think that's where the problem lies.
Bonus question: The same form is used for new and edit actions. Ideally when the form is used to edit an existing item, I would like the page to render with fields populated with the existing data. As it currently stands I have no way to delete or modify once it has been saved. I can only add new entries.
Thank you very much for any help you can give. I've done a lot of searching but haven't been able to locate the right information.
I'm having a problem with form_for and fields_for.
So, my problem is:
I had a form_for, and inside this form_for, I use a fields_for. Inside this fields_for, I use a form_tag (i used ajax for this form_tag).
But when I view the generated HTML, it didn't display form_tag, it only display form_for. And I didn't understand why.
Please explain for me, why it didn't display form_tag.
Here is my form_for:
<div class="row">
<%= form_for #real_estate, url: admin_real_estate_update_path do |f| %>
<%= f.fields_for(:client) do |client| %>
<%= text_field :real_estate, :assessment_start_at, value: #real_estate.assessment_start_at %>
<%= render partial: "admin/real_estate/form/assessment", locals: {real_estate_id: #real_estate.id} %>
<% end %>
<%= f.submit "Submut", class: "btn btn-primary"%>
<% end %>
</div>
Here is my form_for which i put inside fields_for:
<%= form_tag admin_search_assessment_path(real_estate_id), method: :post, remote: true do %>
<%= text_field_tag :company_name, params[:company_name] %>
<%= submit_tag "Submit" %>
<% end %>
And i tried to add <form></form> follow as:
<div class="row">
<%= form_for #real_estate, url: admin_real_estate_update_path do |f| %>
<form></form>
<%= f.fields_for(:client) do |client| %>
<%= text_field :real_estate, :assessment_start_at, value: #real_estate.assessment_start_at %>
<%= render partial: "admin/real_estate/form/assessment", locals: {real_estate_id: #real_estate.id} %>
<% end %>
<%= f.submit "Submut", class: "btn btn-primary"%>
<% end %>
</div>
And form_tag was display, but form_for didn't display.
Update:
So, i used $("form_2").submit(function() {....}); to solve this problem.
Actually, i still want to use form-nested.
Inside this fields_for, I use a form_tag (i used ajax for this form_tag)
N'est pas possible, mon ami.
--
Here's how it works...
form_for and form_tag both generate pure HTML forms:
<form action="/action" method="POST">
</form>
Many people get confused about how Rails works - it's really quite simple. Rails employs "helper" methods to generate pure HTML which your browser can read.
Browsers only understand HTML/CSS at the moment. Thus, whenever you send a request to Rails - it has to return that data, otherwise a "web page" simply wouldn't be able to be processed.
Thus, when you ask whether you can nest forms, you have to abide by how the forms work in pure HTML (spec):
Note you are not allowed to nest FORM elements!
HTML fill-out forms can be used for questionaires, hotel reservations,
order forms, data entry and a wide variety of other applications. The
form is specified as part of an HTML document. The user fills in the
form and then submits it. The user agent then sends the form's
contents as designated by the FORM element. Typically, this is to an
HTTP server, but you can also email form contents for asynchronous
processing.
In short, it means that everything within a <form> tag is counted as a form by HTTP. This means that if you have another <form> tag, it's going to cause an error, preventing either from working.
You know this already (otherwise you wouldn't have mentioned ajax).
Your main problem is the use of <form></form> inside your current <form> object. This will confuse HTML profusely, and thus I would recommend replicating the submission of a form, without the <form> object itself:
#app/views/admin/real_estate/form/assessment.html.erb
<%= text_field_tag "[company_name]", params[:company_name], id: real_estate_id %>
<%= button_tag "Submit", type: "button" , data: { id: real_estate_id } %>
#app/assets/javascripts/application.js
$(document).on("click", "button", function(e){
e.preventDefault();
var real_estate_id = $(this).data("id");
$.ajax({
url: "path/to/real/estate/form/assessment/" + $(this).data("id")),
data: {company_name: $("input[type=text]#" + real_estate_id).val()}
success: function(data) {
//do something on success
},
error: function(data) {
//do something on error
}
});
});
This code will still output what you need.
The difference will be two-fold:
The user will experience the same functionality (the input will still be present)
The embedded form will be passed to the main "form" submit, but will not be passed through your strong params method (making it
invisible to your controller)
In effect, you're replicating the functionality of an HTML form through Ajax. Whilst I still wouldn't do it this way, it will give you the functionality you require.
Here is the part of code I am working on.
<td class= "block" id=<%= dom_id(Block.find(block.id)) %> colspan=2>
<%= form_for block do |f| %>
<%= f.text_area :content, :size => "5x4" %>
<%= f.hidden_field :id_case %>
<%= f.hidden_field :canvas_id %>
<%= f.submit "Submit", class: "save" %>
<% end %>
</td>
I would like to add another form under this one, still in the "td". And I would like this one to be submitted when I drag a special element in the (which is droppable)
I figured out that forms can have the data-remote attribut, but I didn't really get how we have to use it. Is this attribute made for execute javascript after we've submitted the form or is it a helper that submits the form after a special element ?
If this is the second case, it really fits with my idea but I really didn't understand how to use it.
Thanks for your help
I am not sure exactly what you want to know here, but a form with data-remote="true" means that it will be submitted by Ajax rather than a 'normal' submit. You can add remote: true to your form like this:
<%= form_for(#post, remote: true) do |f| %>
...
<% end %>
The resulting form will have a data-remote="true".
To submit a form by Ajax after you have dropped your element you can do the following using jQuery:
$("#your-droppable-element").droppable({
drop: function( event, ui ) {
$('#your-form').submit();
}
});
I hope that helped :)
I am trying to DRY up my Rails application a bit, so I would like to render a form in my show view but disable all input fields.
// show.html.erb
<%= form_for(#project) do |f| %>
<%= render 'fields', :f => f %>
<% end %>
What would be the best way to do that?
Thanks for any help.
Javascript
One way would be to do it using JS. Include a div with a specific class in the show view :
// show.html.erb
<div class='disable_input'>
<%= form_for(#project) do |f| %>
<%= render 'fields', :f => f %>
<% end %>
</div>
Then in your JS file :
$('.disable_input :input').prop('disabled', true);
Rails
If you want to actually generate it server side, you can pass a variable to your partial that will tell the partial if it has to add the disabled option on each field. It's a bit more work though!
Using a variable, you could do something like this :
<%= form_for(#project) do |f| %>
<%= render 'fields', :f => f, :disabled => true %>
<% end %>
In the partial :
<% disabled ||= false
#We do this so if disabled is not passed to the partial it doesn't crash.
# We default it to false
%>
<% # Then for all your fields, add disabled: disabled %>
<%= f.text_field :some_attribute, disabled: disabled %>
Form builder
Edit : actually, one way to avoid explicitly passing disabled everywhere would be to create a Custom form builder. There's some good resources talking about it, like this one : http://johnford.is/writing-a-custom-formbuilder-in-rails/
In this example, it's done for onkeypress, shouldn't be hard to adapt for your case!
You can wrap all fields in <fieldset disabled>
// show.html.erb
<%= form_for(#project) do |f| %>
<fieldset disabled>
<%= render 'fields', :f => f %>
</fieldset>
<% end %>
You can use stylesheets for this thing.
The show action might be in controller say 'Project', hence you might be having a file in stylesheets with the name of your controller.
Now enclose your form in show.html.erb in a div, and give it a unique id ,say 'disable_input', that you wont be giving to any element in any page.
Now disable all input fields in you css under this div. You can write it like this..
disable_input input{
# whatever you want to do
}
Hence no need to code.
I have a form that displays a set of inputs. I also have a button, and when clicked, I make an ajax request which is supposed to replace the existing inputs with a different set of inputs.
All my ajaxy linking stuff up works fine. The problem is that I'm using a form_for, so in order to display the new form inputs, I need the form builder instance.
View File
<%= simple_form_for #order do |f| %>
<div id="info">
<%= render 'my_first_form_fields_partial', f: f %>
</div>
<%= link_to 'Change inputs', change_inputs_path, remote: true %>
<% end %>
I'd like my js.erb to look like this, but f is only defined within the scope of the form in the view.
$('#info').html("<%= escape_javascript(render 'my_second_fields_partial', f: f) %>");
How can I work it so that I can get f into that partial somehow?
Can you use fields_for in your partial, and pass the #object to it? That way you don't need to pass a form builder?
partial:
<%= fields_for object do |f| %>
f.text_field :field_name
<% end %>
$('#info').html("<%= escape_javascript(render 'my_second_fields_partial', object: #object) %>
Many thanks to #flyfish, his answer helped me solved how to do ajax with nested attributes. I took #flynfish answer and tweeked it for my situation:
<%= fields_for object do |f| %>
<%= f.fields nested_object, child_index: Time.now.to_i do |builder| %>
<% end %>
$('#info').html("<%= escape_javascript(render 'my_second_fields_partial', object: #object), nested_object: #nested_object %>
The child_index is important for without it your params hash will build with [0] and will then overlay any other records built with the initial fields_for which starts at zero and increments from there.