AJAX添加多个事件插入前重置Id

Question

在Full Calendar中，我有一些可丢弃的外部项目。当我拖放其中一个并立即删除它时，它就会被删除，一切都很好。然而，当我删除多个项目时，例如2个项目和删除其中的2个项目，这两个项目都会从视图中的日历中删除，实际上一个项目会从数据库中删除，如果我刷新页面，我可以看到这一点。

当我检查表单输入隐藏的值时，它是从数据库中获取的事件id，或者通过ajax作为最后一个插入id从数据库中返回的事件id。两者看起来是一样的，实际上并不一样。

我想我需要的是，在它们被拖放后重置eventID变量。我试着把它们初始化为空的，但不起作用。

在ajax提交下一个单元后，我如何重置它们的值，从而保持变量to附加到当前值。这也是一个全局变量，我认为这就是问题所在。

我的代码：

var eventID; // global variable

跌落功能：

drop: function(date, allDay) { 
var originalEventObject = $(this).data('eventObject');
        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);
        // assign it the date that was reported
        copiedEventObject.start = date;
        if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
        var tempDate = new Date(date);
        copiedEventObject.start = $.fullCalendar.formatDate(copiedEventObject.start, "yyyy-MM-dd HH:mm:ss");
        eventID = '';
        $.ajax({
            url: '<?=site_url("admin/calendar/add");?>',
            data: 'title='+ copiedEventObject.title,
            type: "POST",
            success: function(newID){
                eventID = newID;
                //copiedEventObject._id = newID;
            }
        });
  calendar.fullCalendar('renderEvent',
            {
                title: copiedEventObject.title,
                start: date,
               //id: copiedEventObject._id,
                id: eventID,
            }),
            true // make the event "stick"
 }

事件点击功能：

eventClick: function(calEvent, jsEvent, view) {
        if(!eventID){
            eventID = calEvent._id;
        }
        var form = $("<form id='changeName'>" +
            "<h3 class='eventHeader'>Edit</h3>" +
            "</div></form>");
        form.append("<div class='controls'>" +
            "<label class='control-label' for='title'>Name: </label>" +
            "<input class='span3' name='title' autocomplete=off type='text' value='" + calEvent.title + "' />" +
            "</div>");
        form.append("<input type=hidden value='" + eventID + "' /> ");
        form.append("<div class='controls'>" +
            "<button type='submit'> Save </button>");
var div = bootbox.dialog(form,
   [
     {
       "label" : "Delete",
       "callback": function() {
          deleteOrNot = confirm("Sure ??");
            if (deleteOrNot) {
              calendar.fullCalendar('removeEvents' , function(ev){
                $.ajax({
                  url: '<?=site_url("admin/calendar/delete");?>',
                  data: 'id='+ eventID,
                  type: "POST"
                });
                 return (ev._id == calEvent._id);
                })
              }
            }
          }
        ]);
        $("#changeName").submit(function() {
            calEvent.title = form.find("input[name=title]").val();
            calEvent.description = form.find("input[name=description]").val();
            calEvent.id = form.find("input[type=hidden]").val();
            $.ajax({
                url: '<?=site_url("admin/calendar/editTitle");?>',
                data: 'title='+ calEvent.title+'&id='+ calEvent.id,
                type: "POST"
            });
            calendar.fullCalendar('updateEvent', calEvent);
            div.modal("hide");
            return false;
        });
   }

Answer 1

在您的删除过程中。。。您不应该依赖全局eventID，而应该只是从特定事件中获取ID

更改：

if(!eventID){
    eventID = calEvent._id;
} 

收件人：

var  eventID = calEvent._id;

我怀疑您在drop中也有问题，因为在一次丢弃多个时使用全局eventID。必须看看// some methods here做了什么。

我的建议是彻底摆脱全球eventID。添加时，请等待id从服务器返回，然后在成功回调中将数据传递给fullCalandar

同样。。。在deleteOrNot中。。。应该先发出ajax请求，然后只在$.ajax的成功回调中调用calendar.fullCalendar('removeEvents'。这将在用户看到事件被删除之前确认ajax成功。如果ajax失败，用户将不知道使用您的方法