Jak przekazać dynamiczną trasę do żądania Ajax POST w Railsach

Question

W mojej aplikacji Rails używam FullCalendar Rails gem i próbuję utworzyć "rezerwacje" użytkownika za pomocą jQuery/AJAX. Obecnie obsługuję javascript fullcalendar w znaczniku skryptu na stronie mojego profilu, ponieważ nie byłem pewien, jak uzyskać dostęp do dynamicznej trasy poza plikiem erb. Niestety moja AJAX w ogóle nie działa. Funkcja wyboru nadal działa tak, jak powinna, ale nic nie wydaje się dziać z AJAX, ponieważ nie dostaję wiadomości o sukcesie lub niepowodzeniu i nic nie pokazuje się na mojej karcie sieci. Zgaduję, że nie mam poprawnie skonfigurowanej trasy URL i zakładam, że moja ogólna konfiguracja AJAX może być niepoprawna. AKTUALIZACJA: Właśnie dostaję błąd konsoli teraz, gdy przesyłam zdarzenie wyświetlane w samym pliku javascript fullcalendar: "Uncaught TypeError: Nie można odczytać właściwości '_calendar' z undefined". Nie jestem do końca pewien, skąd to się bierze, a na mojej karcie sieci wciąż nie pojawia się nic z żądania 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' 
    }); 
}); 

Funkcja select powyżej dodaje zdarzenie do kalendarza z jQuery. To, co chciałbym mieć z moją AJAX, to przesłanie tego wydarzenia do moich rezerwacji, aby utworzyć akcję w moim kontrolerze rezerwacji.

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 

Czy ktoś może mi pomóc naprawić to połączenie AJAX? Nie pracowałem z tym wcześniej, więc wszelka pomoc byłaby ogromnie doceniona! Jeśli jest jakaś inna informacja/kod, który powinienem opublikować, proszę dać mi znać.

Answer 1

Widzę kilka błędów w kodzie.

zmiany to:

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

przez to:

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

Answer 2

skończyło się na rozwiązaniu problemu. Miało to związek z formatem moich danych: elementem mojego wywołania ajaxowego. Kod pracy:

<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' 
    }); 
}); 

To musiał być owinięte obiektu rezerwacji i moje początkowe i końcowe czasy mamy moment.js obiektów, więc musiałem przejść rzeczywisty czas rozpoczęcia i zakończenia stamtąd. Nadal jestem zainteresowany obszarami, aby poprawić kod w razie potrzeby, ale przynajmniej działa.