Нужна помощь в передаче значения jQuery UI Slider в форму, используя hidden_field в Ruby on Rails - PullRequest
Новая
       11

Нужна помощь в передаче значения jQuery UI Slider в форму, используя hidden_field в Ruby on Rails

4 голосов
/ 18 марта 2012

Я новичок в Rails, так что извините за чрезвычайно простой вопрос.Я пытаюсь сохранить значение ползунка пользовательского интерфейса jQuery в моей базе данных при отправке формы.Для других элементов, таких как text_area, это можно сделать с помощью <%= f.text_area :my_score %> или для даты с помощью DatePicker ( с использованием плагина jQuery Datepicker Rails ): <%= f.datepicker :my_date %>.Тем не менее, у меня возникли проблемы с поиском плагина для слайдера, и, судя по моим исследованиям, лучше всего использовать скрытое поле.Тем не менее, я не знаю правильной записи для определения значения ползунка и его правильной передачи в форму.Любая помощь будет принята с благодарностью. 

<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>

Ответы [ 2 ]

8 голосов
/ 18 марта 2012

Ваш код просмотра должен быть просто: 

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

У вас уже есть скрытое поле, вам не нужно второе.Также нет необходимости в значении, rails вставит его, если оно уже есть (т.е. при редактировании).

Что касается вашего javascript, у вас будет событие изменения, подобное этому: 

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

Я не знаю точного идентификатора, который будет у вашего скрытого поля, но обычно это имя-модели-поля-имени.Вам нужно будет это проверить.

Последнее, что вам нужно сделать, это установить для ползунка правильное значение при загрузке страницы (при условии, что существует версия редактирования вашей формы и существующее значение может быть там). 

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

Если вы хотите, чтобы значение 100 было значением по умолчанию при создании нового объекта, то вы должны установить эти 100 в модели или там, где вы хотите установить значения по умолчанию, чтобы рельсы предварительно заполнялискрытое поле с этим значением в «новой» форме.Вы можете проверить драгоценный камень как https://github.com/FooBarWidget/default_value_for, если у вас еще нет способа обработать значения по умолчанию.

0 голосов
/ 26 сентября 2018

Я использую nouislider в качестве слайдера, который имеет встроенное скрытое поле.Чтобы передать значение из ползунка в контроллер, я назначаю имя model_table_name[column_name] скрытому полю ввода ползунка и пропускаю его через локальные представления в представлении.

Это выглядит так (только код Ruby, без JS)!): 

.form-group.padding-bottom-4
  %label.control-label= slider_label
  %input.hidden{id: input_id, name: input_name}
  .div.text-center
    %span{id: values_id}
  .div{id: slider_id}
.padding-bottom-4

И я передаю имя: 

 = render partial: 'single_slider', locals: {slider_label: 'label', slider_id: 'slider', values_id: 'values', slider_start: 0, input_id: 'model_table_name', input_name: 'model_table_name[column_name]'}

Контроллер получает значение из ползунка

...