dimanche 15 avril 2018

How to access variable in an ajax function for timepicker jquery ruby on rails

I'm making a scheduling tool using the jquery-timepicker. I have a @tour that has a start_date and an end_date, that I've passed in through the controller.

In the timepicker, I'd like to limit the hourMin and the hourMax to the current start_date and end_date of @tour, respectively. Right now, I'm getting an error that tour does not exist.

Not really familiar with how ajax code works in terms of getting information from the current start_date and end_date of tour, and how to access this tour variable.

Really appreciate the help in advance!!

<div class="panel-body">
  <%= form_for [@facility, @tour] do |f| %>
    <div class="row">
      <div class="col-md-6">
        <label>Start Availability</label>
        <%= f.text_field :start_date, readonly: true, placeholder: "Start Date", class: "form-control datepicker" %>
      </div>

      <div class="col-md-6">
        <label>End Availability</label>
        <%= f.text_field :end_date, readonly: true, placeholder: "End Date", class: "form-control datepicker"%>
      </div>
    </div>
    <br/>
    <%= f.submit "Save", id: "btn_book", class: "btn btn-normal btn-block", disabled: true %>
  <% end %>
</div>

<script>

  function checkDate(date) {
    dmy = (date.getDate()-1) + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    return [$.inArray(dmy, unavailableDates) == -1];
  }

  $(function() {
    unavailableDates = [];
    $.ajax({
      url: '<%= preload_facility_path(@facility) %>',
      dataType: 'json',
      success: function(data) {

        $.each(data.unavailable_dates, function (arrID, arrValue) {
            console.log(arrValue)
            unavailableDates.push($.datepicker.formatDate('yy-mm-dd', new Date(arrValue)));
        });
        console.log(unavailableDates)

        var startDateTextBox = $('#tour_start_date');
        var endDateTextBox = $('#tour_end_date');

        $.timepicker.datetimeRange(
          startDateTextBox,
          endDateTextBox,
          {
              dateFormat: "yy-mm-dd",
              timeFormat: "H:mm:ss",
              hourMin: tour.start_date,
              hourMax: tour.end_date,
              stepHour: 1,
              stepMinute: 15,
              range: true,
              minDate: '2d',//how many days after current day
              start: {}, // start picker options
              end: {}, // end picker options
              beforeShowDay: checkDate,
              onSelect: function(selected) {
                $('#btn_book').attr('disabled', false);
              }
          }
        );
      }
    });
  });
</script>

Aucun commentaire:

Enregistrer un commentaire