需要帮助将jQuery UI滑块的值传递给在Ruby on Rails中使用hidden_​​field的表单

Question

我是Rails的新手，所以非常基本的问题非常抱歉。我试图在提交表单时将jQuery UI Slider的值存储在我的数据库中。对于其他元素，例如text_area，可以通过 <%= f.text_area :my_score %>或带日期选择器的日期（using the jQuery Datepicker Rails plugin）：<%= f.datepicker :my_date %>完成。然而，我很难找到滑块的插件，并且从我的研究中看来最好的方法是通过使用hidden_​​field。但是，我不知道正确的表示法以获取滑块的值并将其正确传递给表单。任何帮助将不胜感激。

<div id="slider"></div> 
<input type="hidden" id="hidden"/> 
<%= f.hidden_field :my_score, :value => (what goes here?) %> 

的Javascript滑块：

<script> 
$(function() { 
    $("#slider").slider({ 
     value:100, 
     min: 5, 
     max: 200, 
     step: 5, 
     slide: function(event, ui) { 
      $("#amount").val(ui.value); 
     }, 

     change: function(event, ui) { 
      $('#hidden').attr('value', ui.value); 
      } 
    }); 
    $("#amount").val($("#slider").slider("value")); 
}); 
</script> 

Answer 1

您的视图代码应该仅仅是：

<div id="slider"></div> 
<%= f.hidden_field :my_score %> 

你已经有一个隐藏字段，不需要第二个。也不需要一个值，如果已经存在的话（例如在编辑时），轨道将会放入一个值。

至于你的JavaScript中，你将有变化的事件是这样的：

change: function(event, ui) { 
    $('input#model_name_my_score').val(ui.value); 
} 

我不知道确切的ID隐藏的领域都会有，但它通常model_name_field_name的。你需要检查一下。

您需要做的最后一件事是在页面加载时将滑块设置为正确的值（假设存在表单的编辑版本并且现有值可能存在）。

$("#slider").slider({ 
     value: $('input#model_name_my_score').val(), 

如果你想100是默认创建一个新的对象时，那么你应该设置在模型100或任何你想设置的默认值，导轨这样会预填充隐藏字段在“新”形式上的价值。如果您还没有办法处理默认值，那么您可以查看像https://github.com/FooBarWidget/default_value_for这样的宝石。