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

Question

In my Rails application, I use the FullCalendar Rails gem and try to create custom "orders" using jQuery / AJAX. I am currently processing javascript fullcalendar in a script tag on my profile page, as I was not sure how to access the dynamic route outside of the erb file. Unfortunately, my AJAX doesn't seem to work at all. The select function still behaves as it should, but nothing happens with AJAX because I do not receive a success or failure message and nothing is displayed on my tab on the network. I assume that I do not have the correct URL route, and I also assume that my general AJAX setup may be incorrect. UPDATE: now I get a console error when I send the event displayed in the javascript fullcalendar file itself: "Uncaught TypeError: it is impossible to read the" _calendar "property from undefined. I'm not quite sure where this is coming from, and on my network tab it is still nothing is displayed 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 using jQuery. What I would like to accomplish with my AJAX is to send this event to my orders, create an action in my order manager.

  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 someone help me fix this AJAX call? I have not worked with him before, so any help would be greatly appreciated! If there is any other information / code that I should publish, let me know.

Answer 1

I decided to solve this problem. This is due to the format of my data: an element of my ajax call. Work 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 by the reservation object, and my start and end times were moment.js objects, so I had to access the actual start and end time from there. I'm still interested in areas for improving the code if necessary, but at least it works.

Answer 2

I see some errors in your code.

change this:

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

:

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