Rails submit form that includes ajax loaded partial

Question

in Rails 3.2 i am trying to submit a form that has a select filed which was previously added to this form with ajax. Like this:

1. First form (has :remote => true) responds with js.erb that (among others) renders a select field inside another form like this (select field is in the partial):

   $('#target_variables_div').html("<%= j render(:partial => 'logged_data/select_vars', :locals => { :vars => @vars, :date => @date }) %>") 
   

2. This "another" form (also has :remote => true) has more form fields but these are loaded statically on page load.

The problem is that when I submit this "another" form, it sends only the static params, excluding the select field previously loaded with the partial.

I know it has something to do with jQuery live or on but I am still not able to submit the complete form ...

Thanks for any help!

Answer 1

Jquery live and on methods are for listening for newly added dom elements on your page, such as a button that do not exist on first load, but is added dinamically and needs to have an event attached to it like:

$('#dinamyc_button').on('click', function() {});

In your case, i believe you will have to set the select value manually. Try to create a listener to your form, that on submit will append the select value to your data to be passed to the server:

$('#your_form').submit(function() {
  var formData = $(this).serialize();
  var selectValue = $('#your_select').val();
  formData['select'] = selectValue; // or formData.select = selectValue;
  $.ajax({
    type: 'POST',
    url: whatever,
    data: formData
  })
});

This is just a not polished example, but you got the idea.

Answer 2

Thanks to MurifoX I finally managed to get the form submitted completely. Previously I was running the submit block after the DOM was loaded (inside jquery -> block in my CoffeeScript file). The result CoffeeScript is:

$('#generate-button').on "click", (e) ->
  e.preventDefault()
  formData = $(this).parents("form").serialize()
  selectValue = $('#select_vars_field').val()
  $.ajax
    type: 'POST',
    url: '/logged_data/get_chart',
    data: formData + "&vars=" + selectValue