I am very new to JS & Jquery. I am building a scheduling app. I am storing appointments in a model called "Event". I am using a helper to build the multi-dimensional array from values in columns called "event.time_start" and "event.time_end" for a given day that a user might make an appointment. When a user picks a start_time and end_time from the dropdown menu, times that already have appointments will be grayed out/"disabled". I am using jquery.timepicker by http://jonthornton.github.io/jquery-timepicker/ with rails to blocks certain time values in a given array of time pairs ( [8am, 6pm], [1pm, 2pm]).
I am finding the "other" events on a given day (the ones that inform which times are taken) using the variable @other_events.
this is the helper that pairs the event.start_time and event.end_time
events_helper.erb
module EventsHelper
def taken_times(other_events)
other_events.map { |event| [event.time_start, event.time_end] }
@taken_times = taken_times(other_events)
end
end
I can get the array to work like this in the view:
<% taken_times(@other_events).each do |taken_time| %>
<%= taken_time.first.strftime("%l:%M %P")%>
<%= taken_time.last.strftime("%l:%M %P")%>,
<% end %>
But I can't get it to work in the JS. I am now trying to use the Gon Gem What I need to out put to is this:
events/show.html.erb view
<script>
$('#jqueryExample .time').timepicker({
'timeFormat': 'g:ia',
'disableTimeRanges': [
// start dynamic array
['10:00am', '10:15am'],
['1:00pm', '2:15pm'],
['5:00pm', '5:15pm']
]
//end dynamic array
});
$('#jqueryExample').datepair();
</script>
so I've tried
application.html.erb
<%= Gon::Base.render_data({}) %>
events_controller.erb
def show
@event = Event.new
@other_events = Event.where(date_id: params[:id])
gon.taken_times = @taken_times
end
with the JS
<script>
$('#jqueryExample .time').timepicker({
'timeFormat': 'g:ia',
'disableTimeRanges': [
// start dynamic array
gon.taken_times
//end dynamic array
});
$('#jqueryExample').datepair();
</script>
but this doesn't work. it just kills the dropdown function of the textfields. I'd love to know what these comma separated objects like "'timeFormat': 'g:ia'," and "disableTimeRanges: [....]" are called so I can better search SO for javascript answers. I am very new to JS & JQuery.
Gon seems the right way to handle this but there are various errors in your code:
Where do you write
<%= Gon::Base.render_data({}) %>? It should be in the<head>tag, before any javascript codeYour
event_helper.rbis wrong:If you want to use that, go for something like
The controller has the same problem of previous code
You should rewrite it like:
And finally, you have a big syntax error in your javascript code, that's why everything disappear. Also you are using gon if it's something special. Gon just creates a plain javascript object, you can access it in javascript like you would do with anything else.
Which instead should be
My main suggestion is, read a Ruby book first, not one with Ruby and Rails merged, you clearly need to improve your programming skills before doing anything. Start with something like The Well Grounded Rubyist and follow up with a good book about javascript (which I have yet to find, comments about it are well appreciated). Then go for Rails 4 in Action and at this point you probably understand better what's going on.
This is my recipe to become a good rails developer