Примечание: я предполагаю, что вы используете Rails 6. Я также предполагаю, что вы добавили format.js к своему действию создания.
Забудьте о create.js.erb, он вам здесь не понадобится.
Кроме того, вы не должны помещать свой код в app/javascript/packs/application.js.
Комментарии в этом файле гласят:
Этот файл автоматически компилируется Webpack, вместе с любыми другими файлами, присутствующими в этом каталоге .Вам рекомендуется поместить действительную логику приложения в соответствующую структуру в app / javascript и использовать только эти файлы пакета для ссылки на этот код , чтобы он был скомпилирован.
Вот как вы бы это структурировали:
- Создайте папку
app/javascript/calendar и внутри этой папки создайте файл index.js с вашим кодом в нем:
// import your calendar object (put it in a file calendar.js in the same folder)
import Calendar from './calendar';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2018-01-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
events: '/events.json',
select: function(info) {
$.getScript('/events/new', function(){
$('#event_date_range').val(moment(info.start).format('YYYY-MM-DD HH:mm') + ' - ' + moment(info.end).format('YYYY-MM-DD HH:mm'));
$('#start_date').val(moment(info.start).format('YYYY-MM-DD HH:mm'));
$('#end_date').val(moment(info.end).format('YYYY-MM-DD HH:mm'));
});
}
});
// actually, you want to put that addEventListener on your form
// more on 'ajax:success': https://guides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers
document.body.addEventListener('ajax:success', function(event) {
var detail = event.detail;
var data = detail[0], status = detail[1], xhr = detail[2];
if (status === 'OK') { // upon success
// do something
// re-render the calendar
calendar.render();
}
})
calendar.render();
});
Обратите внимание на часть, которую я добавил:
// actually, you want to put that addEventListener on your form
// more on 'ajax:success': https://guides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers
document.body.addEventListener('ajax:success', function(event) {
var detail = event.detail;
var data = detail[0], status = detail[1], xhr = detail[2];
if (status === 'OK') { // upon success
// do something
// re-render the calendar
calendar.render();
}
})
Далее вы создаете файл пакета app/javascript/packs/calendar.js и внутри него просто ссылаетесь на свой модуль так:
// importing calendar module
import '../calendar';
Теперь Webpack автоматически скомпилирует ваш файл.
Осталось использовать помощника javascript_pack_tag, который добавляет тег сценария, который ссылается на файл именованного пакета, скомпилированный webpack: <%= javascript_pack_tag 'calendar' %>.Добавьте это внизу вашего файла представления (например, index.html.erb).
Надеюсь, это поможет.