Issues with displaying pop up forms in the Full Calendar Gem for Ruby on Rails

While working through driftingruby's interactive calendar tutorial, I've encountered an issue.

Everything with the calendar seems to be working fine, but when I try to drag and input an event date range, nothing is happening. Can anyone provide some guidance on this problem?

I suspect that the problem lies within my JavaScript files. Here's the code:

//daterangepicker.js

    var date_range_picker;
date_range_picker = function() {
  $('.date-range-picker').each(function(){
    $(this).daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        alwaysShowCalendars: true
    }, function(start, end, label) {
      $('.start_hidden').val(start.format('YYYY-MM-DD HH:mm'));
      $('.end_hidden').val(end.format('YYYY-MM-DD HH:mm'));
    });
  })
};
$(document).on('turbolinks:load', date_range_picker);

//fullcalendar.js

   var initialize_calendar;
initialize_calendar = function() {
  $('.calendar').each(function(){
    var calendar = $(this);
    calendar.fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      selectable: true,
      selectHelper: true,
      editable: true,
      entryLimit: true,
      entrys: '/entrys.json',

      select: function(start, end) {
        $.getScript('/entrys/new', function() {
          $('#entry_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"))
          date_range_picker();
          $('.start_hidden').val(moment(start).format('YYYY-MM-DD HH:mm'));
          $('.end_hidden').val(moment(end).format('YYYY-MM-DD HH:mm'));
        });

        calendar.fullCalendar('unselect');
      },

      entryDrop: function(entry, delta, revertFunc) {
        entry_data = { 
          entry: {
            id: entry.id,
            start: entry.start.format(),
            end: entry.end.format()
          }
        };
        $.ajax({
            url: entry.update_url,
            data: entry_data,
            type: 'PATCH'
        });
      },

      entryClick: function(entry, jsEvent, view) {
        $.getScript(entry.edit_url, function() {
          $('#entry_date_range').val(moment(entry.start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(entry.end).format("MM/DD/YYYY HH:mm"))
          date_range_picker();
          $('.start_hidden').val(moment(entry.start).format('YYYY-MM-DD HH:mm'));
          $('.end_hidden').val(moment(entry.end).format('YYYY-MM-DD HH:mm'));
        });
      }
    });
  })
};
$(document).on('turbolinks:load', initialize_calendar);

//create.js.erb

 $('.calendar').fullCalendar(
  'renderEntry', 
  $.parseJSON("<%=j render(@entry, format: :json).html_safe %>"),
  true
);
$('.modal').modal('hide');

Thank you in advance for any help.

EDIT

Log

Started GET "/entries/new?_=1490713885661" for ::1 at 2017-03-28 17:06:42 +0100
Processing by EntriesController#new as JS
  Parameters: {"_"=>"1490713885661"}
  Rendered entries/_form.html.erb (79.1ms)
  Rendered entries/_new.html.erb (116.2ms)
  Rendered entries/new.js.erb (152.2ms)
Completed 500 Internal Server Error in 207ms (ActiveRecord: 0.0ms)

ActionView::Template::Error (undefined method `entries_index_path' for #<#<Class:0xa441290>:0xb949cc0>):
    1: <%= simple_form_for @entry, remote: true do |f| %>
    2:   <div class="form-inputs">
    3:     <%= f.input :title %>
    4:     <%= f.input :date_range, input_html: { class: "form-control input-sm date-range-picker" } %>
  app/views/entries/_form.html.erb:1:in `_app_views_entries__form_html_erb__139031211_82152084'
  app/views/entries/_new.html.erb:9:in `_app_views_entries__new_html_erb__484549457_82186272'
  app/views/entries/new.js.erb:1:in `_app_views_entries_new_js_erb___326163301_82413240'


  Rendered [...]

Answer №1

Examining your Rails console logs here would be beneficial, as they will indicate if the JS is triggering the request and its destination.

This portion appears questionable:

$.getScript('/entrys/new', function()

You are performing a GET /entrys/new request, but you have provided code for create.js.erb in the question.

Were you intending to use POST /entrys instead?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React-Redux Error: The function this.props.AppendCharacter is not defined

I have been looking for a solution to my issue but couldn't find anything that matches it. I am working on creating a calculator app using React & Redux, and whenever I click on one of the number buttons, I receive an error message saying "this.props. ...

Discover the maximum value within a collection of hash elements in Ruby

I am working with an array that consists of multiple hashes and I need to identify the hash with the highest value for a specific key/value pair, then output the name associated with that hash. In this case, I have an array of student information where I w ...

What is the most effective way to incorporate the DOMContentloaded event listener into the document using nextJS?

I am working on integrating an HTML code snippet into my Next.js project. The snippet includes an external script with a createButton function. <div id="examplebtn"></div> <script type="text/javascript"> //<![ ...

What is the process of retrieving the return value after creating data in Firestore

I have been experimenting with creating data using firestore in the following manner: createData({state}) { return db.collection('items').add({ title: state.title, ingredients: state.ingredients, creat ...

How to use PHP and JavaScript to update a location marker on Google Maps

I'm new to web development and in need of some help, please. I have a code that is supposed to update the marker location with coordinates retrieved from a database. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AP ...

Retrieve information from jsonObject

Can anyone help me with counting the number of passes and fails for each subject in a JSON object array? Here is an example: [{"Subject":"Maths","status:"Pass"},{"Subject":"Maths","status:"Pass"}, {"Subject":"Maths","status:"Fail"},{"Subject":"Maths ...

Using React to create a fadeout effect and decrease the length of the photo

Is there a way to create a fade-out effect for each photo card and then shorten the length of the photos following the fade out? I have tried implementing a solution, but it doesn't seem to work when I click on each photo. Any suggestions or insights ...

Sending data to a MySQL database using AJAX with PHP

While attempting to use ajax to insert a value in PHP, I am encountering an issue where the data is not getting inserted into the database. The code snippet I am using was sourced from answers provided on this site. Can someone please point out where I m ...

How can we simplify deeply nested ajax callbacks in programming?

I have come across JavaScript code where the success callback of an Ajax handler triggers another Ajax call, which in turn may trigger yet another Ajax call. This results in deeply nested anonymous functions. Is there a smarter programming approach that ...

How can you verify the anticipated log output in the midst of a function execution with Jest unit testing?

Below is a demonstration function I have: export async function myHandler( param1: string, param2: string, req: Request, next: NextFunction, ) { const log = req.log.prefix(`[my=prefix]`); let res; If (param1 === 'param1&a ...

Changing a single variable into an array that holds the variable in JavaScript

Is there a way to change 5 into [5] using JavaScript? I need this functionality for a method that utilizes jQuery's $.inArray. It should be able to handle both scalar variables and arrays, converting scalars into arrays with a single element. ...

Accessing data from a Vue component externally

Utilizing Vue loaded from a script (not a CLI) in a file named admin.js, I have multiple components that interact with each other by emitting events. No Vuex is used in this setup. Additionally, there is another file called socket which creates a websocket ...

Could this be a problem with synchronization? Utilizing Google Translate to link-translate terms

Trying to create a script that will show how a word changes through multiple translations using Google Translate, but struggling with Javascript. The problem I'm facing is hard to pinpoint: function initialize() { var word = "Hello"; var engl ...

Arranging elements in an array based on two different properties

Trying to organize an array of elements (orders details). https://i.stack.imgur.com/T2DQe.png [{"id":"myid","base":{"brands":["KI", "SA"],"country":"BG","status":&qu ...

Initiating change notification when utilizing service communication

So I am facing an issue with two unrelated components where I am attempting to establish communication between them using a service and a BehaviorSubject. Despite successfully exchanging data, calling the service from one component does not trigger change ...

What are the steps to execute a filter operation on a table by utilizing two select box values with jQuery?

I have a challenge with two dropdown menus. One contains names and the other subjects, along with a table displaying information in three columns: name, subject, and marks. I would like to implement a filter based on the selections in these two dropdowns. ...

Utilizing Vue.js to pass a slot to a customized Bootstrap-Vue Table component

I am currently in the process of developing a wrapper for the bootstrap-vue Table component. This particular component utilizes slots to specify cell templates, similar to the following example: <b-table :items="itemsProvider" v-bind="options"> ...

SailsJs: Model.find().exec() can sometimes generate unexpected properties

I recently created a service function in api/services/SomeServices.js getCreditDebitNotes:function(vid){ console.log('resolving credit and debits'); var deferred=sails.q.defer(); CreditDebitNotes.find({vendorID:vid,status:1},{selec ...

Move through different screens using React JS

Can anyone help me with this issue I'm facing in React Js? I am trying to implement a button that changes to another screen when clicked, but I keep getting an error message: TypeError: Cannot read property 'push' of undefined. I have tried ...

The Javascript function is malfunctioning, unable to assign the 'onclick' property to null

Here's the code snippet I'm working with: var exit = document.getElementById("exit"); exit.onclick = function() { "use strict"; document.getElementById("fadedDiv").style.display = "none" ; }; However, when I check the console, it shows ...