[英]Rails webpack js and refresh on ajax
I have a calendar module rendered in webpack js - app/javascript/packs/application.js
我有一个在 webpack js -
app/javascript/packs/application.js
中呈现的日历模块
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'));
});
}
});
calendar.render();
});
I have a create action and would like to re-render the calendar on successful callback - create.js.erb
.我有一个创建操作,并希望在成功回调时重新呈现日历 -
create.js.erb
。 How can I do this?我怎样才能做到这一点?
Note: I'm assuming you're using Rails 6. I'm also assuming you added format.js
to your create action.注意:我假设您使用的是 Rails 6。我还假设您将
format.js
添加到您的创建操作中。
Forget about create.js.erb
, you won't need it here.忘记
create.js.erb
,这里不需要它。
Also, you shouldn't put your code in app/javascript/packs/application.js
.此外,您不应将代码放在
app/javascript/packs/application.js
中。
The comments in that file read:该文件中的注释如下:
This file is automatically compiled by Webpack, along with any other files present in this directory .
此文件由 Webpack以及此目录中存在的任何其他文件自动编译。 You're encouraged to place your actual application logic in a relevant structure within app/javascript and only use these pack files to reference that code so it'll be compiled.
鼓励您将实际应用程序逻辑放置在 app/javascript 中的相关结构中,并且仅使用这些包文件来引用该代码,以便对其进行编译。
This is how you would structure it:这就是你将如何构建它:
app/javascript/calendar
and inside that folder, create a file index.js
with your code in it: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();
});
Note the part I added:注意我添加的部分:
// 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();
}
})
Next, you create your pack file app/javascript/packs/calendar.js
and inside it, you just reference your module like so:接下来,您创建您的包文件
app/javascript/packs/calendar.js
并在其中,您只需像这样引用您的模块:
// importing calendar module
import '../calendar';
Now Webpack will compile your file automatically.现在 Webpack 将自动编译您的文件。
What's left is using the helper javascript_pack_tag
that adds a script tag that references the named pack file compiled by webpack: <%= javascript_pack_tag 'calendar' %>
.剩下的是使用帮助程序
javascript_pack_tag
添加一个脚本标记,该标记引用由 webpack 编译的命名包文件: <%= javascript_pack_tag 'calendar' %>
。 Add this at the bottom of your view file (for example index.html.erb).将其添加到视图文件的底部(例如 index.html.erb)。
Hope this helps.希望这可以帮助。
You can use addEvent
method to add the new event to the calendar您可以使用
addEvent
方法将新事件添加到日历
https://fullcalendar.io/docs/event-object https://fullcalendar.io/docs/event-object
https://fullcalendar.io/docs/Calendar-addEvent-demo https://fullcalendar.io/docs/Calendar-addEvent-demo
in the success callback of create action在创建动作的成功回调中
$.ajax({
...
}).done(function (response) {
// Add event to calendar
calendar.addEvent({
title: response.title,
start: response.start_date,
end: response.end_date,
allDay: response.all_day
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.