How to pass a dynamic route to AJAX POST request in Rails

Question

In my Rails app I am using the FullCalendar Rails gem and attempting to create user "bookings" with jQuery/AJAX. I currently am handling the fullcalendar javascript in a script tag on my profile show page as I wasn't sure how to access a dynamic route outside an erb file. Unfortunately my AJAX doesn't seem to be working at all. The select function still behaves as it should but nothing seems to be happening with the AJAX as I don't get a success or failure message and nothing is showing up in my network tab. I'm guessing I don't have the url route set up correctly and I also assume my general set up of the AJAX may be incorrect. UPDATE: I actually am getting a console error now when I submit an event showing up in the fullcalendar javascript file itself: 'Uncaught TypeError: Cannot read property '_calendar' of undefined’. I'm not really sure where that is coming from and there is still nothing showing up in my network tab from the ajax request.

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

The select function above adds an event to the calendar with jQuery. What I would like to have happen with my AJAX is to submit that event to my bookings create action in my bookings controller.

  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

Can anyone help me fix that AJAX call? I haven't really worked with it before so any help would be greatly appreciated! If there's any other info/code I should post, please let me know.

Answer 1

I ended up solving the issue. It had to do with the the format of my data: element of my ajax call. The working code:

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

It had to be wrapped with a booking object and my start and end times we moment.js objects so I had to access the actual start and end time from there. I'm still interested in areas to improve the code if need be, but at least it's working.