Question

我有一个样本预订表单，应该显示用户输入日期和点击提交后的总价格和天数。但是，提交按钮被禁用，并且在单击时不响应。我在这个例子中使用rails / ajax / javascript。我希望在“消息”和“预览”div id中填充值，但没有。

<%= form_for([@post, @post.reservations.new]) do |f| %>

 <div class="row">
  <div class="col-md-6">
    <label>Begin Date</label>
    <%= f.text_field :start_date, readonly: 'true', placeholder: 'Start Date', class: 'form-control' %>
 </div>
 <div class="col-md-6">
    <label>Return Date</label>
    <%= f.text_field :end_date, readonly: 'true', placeholder: 'End Date', class: 'form-control', disabled: true %>
  </div>
</div>

 <%= f.hidden_field :post_id, value: @post.id %>
 <%= f.hidden_field :price, value: @post.price %>
 <%= f.hidden_field :total, id: 'reservation_total' %>

 <h4><span id="message"></span></h4>

 <div id="preview" style="display: none"> 
  <table class="reservation-table">
   <tbody>
     <tr>
       <td>Day(s)</td>
       <td><span id="reservation_days"></span></td>
     </tr>
       <tr>
         <td>Total</td>
         <td><span id="reservation_sum"></span></td>
       </tr>
     </tbody>
   </table><br>
</div>

<br>
<%= f.submit "Book Now", id: "btn_book", class: "btn btn-primary wide", disabled: 'true' %>

<% end %>

<script>

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

$(function() {

 unavailableDates = [];

 $.ajax({
   url: '/preload',
   data: {'post_id': <%= @post.id %>},
   dataType: 'json',
   success: function(data) {

    $.each(data, function(arrID, arrValue) {
      for(var d = new Date(arrValue.start_date); d <= new Date(arrValue.end_date); d.setDate(d.getDate() + 1)) {
          unavailableDates.push($.datepicker.formatDate('d-m-yy',d));
          console.log(d);
      }
    });

      $('#reservation_start_date').datepicker({
        dateFormat: 'dd-mm-yy',
        minDate: 0,
        maxDate: '3m',
        beforeShowDay: unavailable,
        onSelect: function(selected) {
          $('#reservation_end_date').datepicker("option", "minDate", selected);
          $('#reservation_end_date').attr('disabled', false);
        }
      });

      $('#reservation_end_date').datepicker({
        dateFormat: 'dd-mm-yy',
        minDate: 0,
        maxDate: '3m',
        beforeShowDay: unavailable,
        onSelect: function(selected) {
          $('#reservation_start_date').datepicker("option", "maxDate", selected);

          var start_date = $('#reservation_start_date').datepicker('getDate');
          var end_date = $(this).datepicker('getDate');
          var days = (end_date - start_date)/1000/60/60/24 + 1;

          var input = {
            'start_date': start_date,
            'end_date': end_date,
            'post_id': <%= @post.id %>
          }

          $.ajax({
            url: "/preview",
            data: input,
            sucess: function(data) {
              if (data.conflict) {
                $('#message').text("This date range is not available.");
                $('#preview').hide();
                $('#btn_book').attr('disabled', true);
              } else {
                $('#message').text("This date range is OK.");
                $('#preview').show();
                $('#btn_book').attr('disabled', false);
              }
            }
          }); // end ajax

        } // end onSelect
      }); // end reservation_end_date
     }
   });
  });
</script>

AJAX没有填充div

0 个答案: