0

I'm using simple_form and a bootstrap_slider in a nested form. How do I pass the setup parameters in?

I'm using this

<%= f.input_field :proficiency, class: 'agt_prof_slider' %>

which works fine. The class is used by jquery to update another field. the thing I haven't been able to do is set the initial value. Bootstrap_slider wants this:

<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3">

How do I include the "data-slider-value" in f.input_field? This is part of a nested section, so I need the automatically generated IDs, etc. I just need to get the original value into the slider so that the form works for an edit screen.

The class 'agt_prof_slider' is what I use in my jquery, e.g.,

$('.agt_prof_slider').slider()
mpipkorn
  • 153
  • 2
  • 9

1 Answers1

0

The answer ended up being more jQuery. Here's my solution.

In the original form:

<div id="int_skill_container" >
  <%= f.simple_fields_for :int_skills do |skill| %>
    <%= render 'int_skill_fields', :f => skill %>
  <% end %>
  <%= link_to_add_association "Add a Skill Pair", f, :interpreter_skills, :partial => 'int_skill_fields', :class => 'btn btn-primary' %>
</div>

The fields:

<div class='nested-fields'>
  ...
  <td>
    <b><span class="agt_prof_slider_val"><%= f.object.proficiency or 5 %></span></b>&nbsp;&nbsp;&nbsp;
    <%= f.input_field :proficiency, class: 'agt_prof_slider' %>
  </td>
  ...
</div>

and the jQuery

mySlider = $('.agt_prof_slider').slider()
mySlider.each ->
  init_val = parseInt($(this).closest("td").find('.agt_prof_slider_val').text())
  $(this).slider('setValue', init_val)
$('.agt_prof_slider').on 'slide', (slideEvt) ->
  $(this).closest("td").find('.agt_prof_slider_val').text slideEvt.value

$('#int_skill_container').on 'cocoon:after-insert', (e, insertedItem) ->
  insertedItem.find('.agt_prof_slider').first().slider()
  insertedItem.find('.agt_prof_slider').first().on 'slide', (slideEvt) ->
    $(this).closest("td").find('.agt_prof_slider_val').text slideEvt.value

I display the value next to the slider. In the edit form, these values are set in the initial form screen so I grab that to set the initial slider value with 'setValue'.

The second part of the jQuery stuff is really the same, but since I use cocoon for nested variables, I needed to basically repeat the code in a cocoon callback. Here the default slider value of 5 is fine.

mpipkorn
  • 153
  • 2
  • 9