Rails 提交包含 ajax 加载部分的表单答案

【问题标题】：Rails submit form that includes ajax loaded partialRails 提交包含 ajax 加载部分的表单
【发布时间】：2013-02-27 11:56:15
【问题描述】：

在 Rails 3.2 中，我正在尝试提交一个表单，该表单具有一个先前使用 ajax 添加到此表单的选择字段。像这样：

第一个表单（具有:remote => true）以 js.erb 响应，它（除其他外）在另一个表单中呈现一个选择字段，如下所示（选择字段在部分中）：
```
$('#target_variables_div').html("<%= j render(:partial => 'logged_data/select_vars', :locals => { :vars => @vars, :date => @date }) %>") 
```
这个“另一个”表单（也有:remote => true）有更多的表单域，但是这些是在页面加载时静态加载的。

问题是当我提交这个“另一个”表单时，它只发送静态参数，不包括之前加载部分的选择字段。

我知道这与 jQuery live 或 on 有关，但我仍然无法提交完整的表单...

感谢您的帮助！

【问题讨论】：

那么，渲染是否正确？问题是你只得到静态数据？
是的，它可以正确呈现，但是提交表单时选择表单字段数据不包含在参数中...

标签： jquery ruby-on-rails ajax ajaxform

【解决方案1】：

Jquery live 和 on 方法用于侦听页面上新添加的 dom 元素，例如第一次加载时不存在但动态添加且需要附加事件的按钮喜欢：

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

在您的情况下，我相信您将不得不手动设置选择值。尝试为您的表单创建一个侦听器，在提交时会将选择值附加到您要传递给服务器的数据：

$('#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
  })
});

这只是一个不完善的例子，但你明白了。

【讨论】：

感谢您的帮助，但结果仍然相同。我认为问题出在 var selectValue = $('#your_select').val();因为它仍然没有抓取选择字段值...
尝试调试这个提交监听器，看看你是否可以在控制台上抓取选择值。

【解决方案2】：

多亏了 MurifoX，我终于成功地提交了完整的表单。以前我在加载 DOM 后运行提交块（在我的 CoffeeScript 文件中的 jquery -> 块内）。结果 CoffeeScript 是：

$('#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

【讨论】：