: remote => true / data-remote on a form loaded via ajax

Question

In my Rails application, I have a form loaded via Ajax using the jQuery upload method.

function load_sales_form(product_id) { $("#sales_form").load("<%= url_for(:action => :show_sales_form) %>"/ + product_id); } 

The loaded form has a form_for tag with the option : remote => true , and it adds the data-remote = "true" attribute to the form.

But the form is not submitted using Ajax when the user clicks the submit tag button. It works fine if the form is loaded in the standard way without an ajax, but the form is loaded via ajax after the document is ready, not submitted using ajax, it is a standard form.

From what I have learned so far, this is due to the fact that the rails.js file (which contains material that allows you to send data as remote forms via ajax) does not apply its functions to the html content loaded via ajax.

Is it possible to force a rails.js file to apply its functions to content downloaded via Ajax?

Answer 1

The same situation is here. I have found a solution. Not dynamic loading, but the submit event was not triggered correctly in my case.

I had a Bootstrap modal attribute with data-target and href attributes. This forces the contents inside the .modal-body to load via AJAX from the address specified in href .

The modal was pre-equipped with a save button (outside the loaded form), which was called submit as follows.

 $modal.find("form.loaded_form").get(0).submit(); // INCORRECT 

The first only performs raw submit, but:

 $modal.find("form.loaded_form").trigger('submit'); // CORRECT 

does the trick.