रेल में AJAX POST अनुरोध के लिए गतिशील मार्ग कैसे पास करें

Question

मेरे रेल ऐप में मैं FullCalendar Rails gem का उपयोग कर रहा हूं और jQuery/AJAX के साथ उपयोगकर्ता "बुकिंग" बनाने का प्रयास कर रहा हूं। मैं वर्तमान में पूर्ण प्रोफाइल पेज जावास्क्रिप्ट को अपने प्रोफाइल शो पेज पर एक स्क्रिप्ट टैग में प्रबंधित कर रहा हूं क्योंकि मुझे यकीन नहीं था कि किसी एआरबी फ़ाइल के बाहर एक गतिशील मार्ग का उपयोग कैसे किया जाए। दुर्भाग्य से मेरा AJAX बिल्कुल काम नहीं कर रहा है। चयन फ़ंक्शन अभी भी व्यवहार करता है जैसा कि इसे करना चाहिए लेकिन AJAX के साथ कुछ भी नहीं हो रहा है क्योंकि मुझे सफलता या विफलता संदेश नहीं मिलता है और मेरे नेटवर्क टैब में कुछ भी दिखाई नहीं दे रहा है। मुझे लगता है कि मेरे पास यूआरएल मार्ग सही ढंग से स्थापित नहीं है और मैं यह भी मानता हूं कि AJAX का मेरा सामान्य सेट गलत हो सकता है। अद्यतन: मुझे वास्तव में एक कंसोल त्रुटि मिल रही है जब मैं पूर्ण कैलकुलेटर जावास्क्रिप्ट फ़ाइल में दिखाई देने वाली एक घटना सबमिट करता हूं: 'अनकॉटेड टाइप एरर: संपत्ति को पढ़ नहीं सकता' _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 मैं वहाँ से वास्तविक प्रारंभ और समाप्ति समय का उपयोग करने के लिए किया था। यदि आवश्यक हो तो मुझे कोड में सुधार करने के लिए अभी भी रुचि है, लेकिन कम से कम यह काम कर रहा है।