Putting a dynamic hash in JQuery using rails

Question

I am newish to rails and new to JQuery. I am using jquery.timepicker with rails and it takes hashes to block out certain time ranges in a given list of times (ie, between 8am and 6pm, 1pm-2pm is not available). On a static page, the JQuery is written as so:

  <script>
    $('#someTextfieldPair .time').timepicker({
        'timeFormat': 'g:ia',
        'disableTimeRanges': [
          ['11:00am', '12:00pm'],
          ['3:00pm', '4:00pm']
        ]
     });
   </script>

Instead of static times, I'm trying to create the hashes based on the values @other_events.time_start and @other_events.time_end. I've tried this, but I don't really know how to combine JQuery and rails.

 <script>
    $('#someTextfieldPair .time').timepicker({
        'timeFormat': 'g:ia',
        'disableTimeRanges': [
        <%= @other_events.each do |e| %>
          ['<%= e.time_start.strftime("%l:%M %P") %>', '<%= e.time_end.strftime("%l:%M %P") %>'],
          <%end %>
        ]
     });
   </script>

I am using this jquery.timepicker: http://jonthornton.github.io/jquery-timepicker/

score 1 · Accepted Answer · answered Mar 24 '15 at 22:27

1

I suggest you to check https://github.com/gazay/gon gem, it's fantastic for rails: it generates a javascript object on top of page, so you can access your time ranges (per page!) in javascript like you would do with any variable.

answered Mar 24 '15 at 22:27

Francesco Belladonna

11,361
12
77
147

Hey, I've been trying to work with Gon and I asked another question here: http://stackoverflow.com/questions/29303678/placing-a-dynamic-rails-array-in-javascript-using-gon ...I'd love you're help, if you have the chance , as I can only checkmark this question if gon eventually works. – NothingToSeeHere Mar 27 '15 at 16:19
Added a rather big answer ;) – Francesco Belladonna Mar 28 '15 at 12:42

Sonalkumar sute · Answer 2 · 2015-03-24T13:52:54.610

0

In helper.rb

def create_array(array_values)
   your logic......create your Hash or Array here
end

In your js file

<script>
    $('#someTextfieldPair .time').timepicker({
       'timeFormat': 'g:ia',
       'disableTimeRanges': $('#someTextfieldPair .time').after("#{escape_javascript create_array(@other_events)}")
   });
</script>

edited Mar 24 '15 at 13:52

answered Mar 24 '15 at 13:18

Sonalkumar sute

2,565
2
17
27

Putting a dynamic hash in JQuery using rails

2 Answers2