如何在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对象，所以我不得不从那里访问实际的开始和结束时间。如果需要的话，我仍然对那些需要改进代码的领域感兴趣，但至少它是可行的。