RailsでAJAX POSTリクエストに動的ルートを渡す方法

Question

私のレールアプリケーションでは、FullCalendar Rails gemを使用していて、jQuery/AJAXでユーザ "予約"を作成しようとしています。私は現在、私のプロフィールショーページのscriptタグでfullcalendarのjavascriptを処理しています。なぜなら、erbファイル以外の動的ルートにアクセスする方法がわからないからです。残念ながら私のAJAXはまったく動作していないようです。 select関数はまだ動作するはずですが、成功または失敗のメッセージが表示されず、ネットワークタブに何も表示されないため、AJAXで何も起こっていないようです。私は正しくURLのルートを設定していないと思うし、私もAJAXの私の一般的な設定が間違っているかもしれないと仮定しています。更新：私は実際にfullcalendar javascriptファイル自体に表示されているイベントを提出するとコンソールエラーが発生します： 'Uncaught 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呼び出しの要素。作業コード：

<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予約オブジェクトと私の開始時刻と終了時刻でラップする必要がありました。私はまだ必要があればコードを改善する分野に興味がありますが、少なくとも動作しています。