Ruby on Rails:根据选择框中的更改提交表单作为JS

时间:2012-07-26 17:52:05

标签: jquery ruby-on-rails ruby-on-rails-3

我在Rails中由form_tagselect_tag生成了以下HTML:

<form accept-charset="UTF-8" action="/deployment_group/show_workflow_list" data-remote="true" id="show_workflow_list_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
  <select id="folder_name_foldernames" name="folder_name[foldernames]">
    <option value="RISK_ODS" selected="selected">RISK_ODS</option>
    <option value="DETAIL_ADJUSTMENT">DETAIL_ADJUSTMENT</option>
    <option value="ODS_STAGE">ODS_STAGE</option>
    <option value="FINANCE_DM1">FINANCE_DM1</option>
  </select>
</form>

让我知道我需要编写的JQuery代码,以便我可以在下拉列表中更改选择值时提交表单。请参阅here当我使用:onchange时,它是一个html选项,表单以html的形式提交,而不是作为JS表单提交。所以,我不能使用:onchange。

我明白我需要在application.js文件中写这样的东西:

$(#folder_name_foldernames).change(function(){
    $(#show_workflow_list).submit()
});

我在application.js文件中使用了上面的代码 但我必须删除“require_tree”。因为我得到一些错误 所以我添加了

$('#folder_name_foldernames').change = () ->
  $('#show_workflow_list_form').submit() 

到我的deployment_group.js.coffee文件(deployment_group是我的控制器,与上面的视图相关)

但是当我在下拉菜单中更改选择时,我仍然没有看到任何变化。 请帮忙。

3 个答案:

答案 0 :(得分:1)

我通过以下方式解决了问题:

<%= f.select :foldernames, options_for_select(@folders, @folders.first), {}, {:onchange=>"myfunc()"}%>

我加了

<script type="text/javascript">
function myfunc()
{
    $('#folder_name_foldernames').change(function(){     $('#this_form').submit(); }); 
}
</script>

并且表单以JS而不是HTML的形式提交。如果有人可以解释为什么这是以JS而不是HTML的形式提交,那将会非常有帮助 我写的代码相同:onchange =&gt; this.form.submit,以HTML格式提交

答案 1 :(得分:0)

如果您为id标记提供<form>,则可以使用id

像:

<form accept-charset="UTF-8" action="/deployment_group/show_workflow_list" data-remote="true" id="this_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
<select id="folder_name_foldernames" name="folder_name[foldernames]"><option value="RISK_ODS" selected="selected">RISK_ODS</option>
    <option value="DETAIL_ADJUSTMENT">DETAIL_ADJUSTMENT</option>
    <option value="ODS_STAGE">ODS_STAGE</option>
    <option value="FINANCE_DM1">FINANCE_DM1</option>
</select>

然后:

$('#folder_name_foldernames').change(function(){
    $('#this_form').submit();
});

不要忘记将引号括起来,否则会出现JavaScript错误。

答案 2 :(得分:0)

尝试通过'application.js.coffee'复制'application.js'并在文件中添加#= require_self