如何在Rails中將動態路由傳遞給AJAX POST請求

Question

在我的Rails應用程序中，我使用FullCalendar Rails gem並嘗試使用jQuery/AJAX創建用戶「預訂」。我目前正在處理我的個人資料顯示頁面上腳本標記中的fullcalendar javascript，因爲我不確定如何訪問erb文件之外的動態路由。不幸的是，我的AJAX似乎並沒有工作。 select函數仍然表現得應該如此，但AJAX沒有任何事情發生，因爲我沒有收到成功或失敗的消息，並且沒有任何內容顯示在我的網絡選項卡中。我猜我沒有正確設置url路徑，我也假設我的AJAX設置可能不正確。更新：我實際上得到一個控制檯錯誤，現在當我提交一個事件顯示在fullcalendar JavaScript文件本身：'未捕獲TypeError：無法讀取屬性'_calendar'未定義'。我不確定這是從哪裏來的，而且我的網絡選項卡中沒有任何內容顯示在ajax請求中。

<script> 
$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     defaultDate: '2016-01-12', 
     selectable: true, 
     selectHelper: true, 

     select: function(start, end) { 
     var title = "Unavailable"; 
     var eventData; 
      eventData = { 
       title: title, 
       start: start, 
       end: end, 
       color: 'grey' 
       }; 
     $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
     $('#calendar').fullCalendar('unselect'); 

     $.ajax({ 
     method: "POST", 
     data: {start_time: start, end_time: end, first_name: title, color: 'grey'}, 
     url: "<%= profile_bookings_url(@profile) %>", 
     success: function(data){ 
      console.log(data); 
     }, 
     error: function(data){ 
      alert("something went wrong, refersh and try again") 
     } 
     }) 

     }, 
     editable: true, 
     eventLimit: true, // allow "more" link when too many events 
     events: window.location.href + '.json' 
    }); 
}); 

上面的選擇功能添加一個事件到與jQuery日曆。我想要通過我的AJAX發生的事情是將該事件提交給我的預訂控制器中的預訂創建操作。

def create 
    @profile = Profile.friendly.find(params[:profile_id]) 
    @booking = @profile.bookings.new(booking_params) 
    if @booking.save 
    flash[:notice] = "Sending your booking request now." 
    @booking.notify_host 
    redirect_to profile_booking_path(@profile, @booking) 
    else 
    flash[:alert] = "See Errors Below" 
    render "/profiles/show" 
    end 
    end 

任何人都可以幫我修復那個AJAX調用嗎？我之前沒有真正使用它，所以任何幫助將不勝感激！如果有任何其他信息/代碼我應該發佈，請讓我知道。

Answer 1

我可以在你的代碼中看到一些錯誤。

改變這一點：

url: "{<%= profile_bookings_url(@profile) %>}" 

本：

url: "<%= profile_bookings_url(@profile) %>" 

Answer 2

我最終解決問題。它必須處理我的ajax調用的data：element的格式。工作代碼：

<script> 
$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     defaultDate: '2016-01-12', 
     selectable: true, 
     selectHelper: true, 
     select: function(start, end) { 
    var title = "Unavailable"; 
      var eventData; 
       eventData = { 
        title: title, 
        start: start, 
        end: end, 
     color: 'grey' 
       }; 
     $.ajax({ 
     method: "POST", 
     data: {booking:{start_time: start._d, end_time: end._d, first_name: title}}, 
     url: "<%= profile_bookings_path(@profile, @booking) %>", 
     success: function(data){ 
      console.log(data); 
      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
      $('#calendar').fullCalendar('unselect'); 
     }, 
     error: function(data){ 
      alert("something went wrong, refersh and try again") 
     } 
     }); 
     }, 
     editable: true, 
     eventLimit: true, // allow "more" link when too many events 
     events: window.location.href + '.json' 
    }); 
}); 

它必須與訂票對象被包裹和我的開始和結束時間，我們moment.js對象，所以我不得不從那裏訪問實際的開始和結束時間。如果需要的話，我仍然對那些需要改進代碼的領域感興趣，但至少它是可行的。