需要幫助將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這樣的寶石。