I'm following a tutorial, here where I am trying to get a modal to come up to create a new event when a date is clicked. I can't get the modal to appear.
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>JandelSchedule</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<header>
<%= render 'layouts/navigation'%>
</header>
<main role="main">
<div class="container">
<%= yield %>
</div>
<div id="remote-container">
</main>
</body>
</html>
I am using an empty div with id remote container to place the _new.html.erb modal partial into when the user clicks on a date in the calendar.
calendar.js
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import bootstrapPlugin from '@fullcalendar/bootstrap';
document.addEventListener('turbolinks:load', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ interactionPlugin, dayGridPlugin, bootstrapPlugin ],
themeSystem: 'bootstrap',
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
events: '/events.json',
select: function(start, end) {
$.getScript('/events/new', function() {
});
},
});
calendar.render();
});
The event should run this file. I think the error is here but can't figure out why.
new.js.erb
$('#remote-container').html('<%= j render "new" %>');
$('#new-event').modal('show');
Here is the modal.
_new.html.erb
<div class="modal" id="new-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Create New Event</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<%= render 'form', event: @event %>
</div>
</div>
</div>
</div>
Lastly, here is the controller
events_controller.rb
class EventsController < ApplicationController
before_action :set_event, only: [:show, :edit, :update, :destroy]
def index
@events = Event.where(start: params[:start]..params[:end])
end
def show
end
def new
@event = Event.new
end
def edit
end
def create
@event = Event.new(event_params)
@event.save
end
def update
@event.update(event_params)
end
def destroy
@event.destroy
end
private
def set_event
@event = Event.find(params[:id])
end
def event_params
params.require(:event).permit(:title, :date_range, :start, :end, :color)
end
end
Console output when date is clicked
Started GET "/events/new?_=1607411496171" for ::1 at 2020-12-08 00:11:37 -0700
Processing by EventsController#new as JS
Parameters: {"_"=>"1607411496171"}
Rendering events/new.js.erb
Rendered events/_form.html.erb (Duration: 20.3ms | Allocations: 6111)
Rendered events/_new.html.erb (Duration: 23.2ms | Allocations: 6463)
Rendered events/new.js.erb (Duration: 25.7ms | Allocations: 6946)
Completed 200 OK in 33ms (Views: 30.5ms | ActiveRecord: 0.0ms | Allocations: 8496)
EDIT: here is the browser console output
main.js:9223 Unknown option 'selectHelper'
warnUnknownOptions @ main.js:9223
main.js:9223 Unknown option 'eventLimit'
warnUnknownOptions @ main.js:9223
VM12:1 Uncaught ReferenceError: $ is not defined
at <anonymous>:1:1
at DOMEval (jquery.js:109)
at Function.globalEval (jquery.js:313)
at textScript (jquery.js:8849)
at ajaxConvert (jquery.js:8100)
at done (jquery.js:8503)
at XMLHttpRequest.<anonymous> (jquery.js:8774)
calendar.js:25 $('#remote-container').html('<div class=\"modal\" id=\"new-event\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">Create New Event<\/h4>\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×<\/button>\n <\/div>\n <div class=\"modal-body\">\n <form class=\"simple_form new_event\" id=\"new_event\" novalidate=\"novalidate\" action=\"/events\" accept-charset=\"UTF-8\" data-remote=\"true\" method=\"post\">\n <div class=\"form-inputs\">\n <div class=\"form-group string optional event_title\"><label class=\"string optional\" for=\"event_title\">Title<\/label><input class=\"form-control string optional\" type=\"text\" name=\"event[title]\" id=\"event_title\" /><\/div>\n <div class=\"form-group select optional event_color\"><label class=\"select optional\" for=\"event_color\">Color<\/label><select class=\"form-control select optional\" name=\"event[color]\" id=\"event_color\"><option value=\"\"><\/option>\n<option value=\"black\">Black<\/option>\n<option value=\"green\">Green<\/option>\n<option value=\"red\">Red<\/option><\/select><\/div>\n <\/div>\n\n <div class=\"form-actions\">\n <input type=\"submit\" name=\"commit\" value=\"Create Event\" class=\"btn\" data-disable-with=\"Create Event\" />\n \n <\/div>\n<\/form>\n <\/div>\n <\/div>\n <\/div>\n<\/div>');
$('#new-event').modal('show');
Edit: modal error
Uncaught TypeError: $(...).modal is not a function
at <anonymous>:2:17
at DOMEval (DOMEval.js:38)
at Function.globalEval (core.js:197)
at textScript (script.js:19)
at ajaxConvert (ajax.js:249)
at done (ajax.js:652)
at XMLHttpRequest.<anonymous> (xhr.js:75)
Any help would be greatly appreciated!
Thanks
