Javascript AJAX未填充div

我有一个示例预订表单，它应该显示总价格和用户输入日期并单击提交后的天数。但是，“提交”按钮被禁用，单击时不响应。在本例中，我使用的是rails/ajax/javascript。我希望在“message”和“preview”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>

开始日期
返回日期
天(s)
全部的




功能不可用（日期）{
dmy=date.getDate（）+“-”+（date.getMonth（）+1）+“-”+date.getFullYear（）；
返回[$.inArray（dmy，不可用日期）=-1]；
}
$（函数（）{
不可用日期=[]；
$.ajax({
url:“/preload”，
数据：{'post_id'：}，
数据类型：“json”，
成功：功能（数据）{
$.each（数据、函数（arrID、arrValue）{
对于（var d=新日期（arrValue.start\u日期）你的问题到底是什么？你不能点击按钮？只要你在提交按钮上禁用了
“true”
，你就不能点击它。或者你得到了一个错误？当我点击按钮时，我希望预览div标签填充总价格和天数，但是当我点击按钮时什么也没有发生在需要调用ajax函数时，请尝试以下操作：
$（'btn_book'）.on（'click'，function（）{$.ajax…}）；
。