So I got a form with remote: true and it work as excepted when I'm on the form page.
But this form is supposed to be in a modal. When I try the form in the modal that doesn't work.
I got 2 cases:
form_for(@report, remote: true, method: 'post')
That throw an error because it's looking for an html template :
ReportsController#create is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: []
And
form_for(@report, format: "js", remote: true, method: 'post')
Just follow the link to the js view.
I'm pretty sure this bug is due to the fact that I load this form asynchronously with:
$.ajax({ url: "/form/url" })
But I can't figure out what to do.
As a complement information, I use Vex lib for modal displaying.
I faced the same problem and still trying to figure it exactly why remote: true won't work inside a modal, but i was able to get the same behavior skipping remote: true and adding the ajax call manually.
So, you can too get around this; check this (reduced) code I used in my _form.html.erb partial that is rendered inside the modal1:
<div>
<%= form_tag company_users_url, id: "company-users-form" do |f| %>
Select file: <%= file_field_tag :file %>
<%= submit_tag "Send" %>
<% end %>
<div>
<script>
$("#company-users-form").submit(function(event){
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: '<%= company_users_url %>',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false
});
return false;
});
</script>
With this setup, i first use a regular remote: true call on a form that opens a modal that renders the above partial. Then, within that partial if i send the form, now the call is sent again as js, so my js.erb view is rendered correctly; in my case just a line with the new modal content:
$('#company-users-modal').html("<%= j(@new_content) %>");
1 Notice the use of formData for simplicity.