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

Question

我是Rails的新手,对于非常基本的问题感到抱歉.我正在尝试在提交表单时将jQuery UI Slider的值存储在我的数据库中.对于其他元素,例如text_area,这可以通过datepicker <%= f.text_area :my_score %>或使用jQuery Datepicker Rails插件的日期来完成 :<%= 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 %>

你已经有了一个隐藏的字段,不需要第二个字段.也不需要值,如果已经存在一个值,则rails会将其中一个(即编辑时).

至于你的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或者您想要设置默认值的位置,那么rails将使用"new"上的该值预先填充隐藏字段形成.如果您还没有办法处理默认值,您可以查看像https://github.com/FooBarWidget/default_value_for这样的宝石.